Как сделать так, чтобы ваша страница загружалась быстрее

Понимание того, как браузер загружает и рендерит веб-страницу, является ключом к повышению скорости загрузки страницы.

Браузеру необходимо создать дерево рендеринга, чтобы начать отображение страницы. Чтобы создать дерево рендеринга, браузер должен сначала создать дерево DOM (Document Object Model) и дерево CSSOM (CSS Object Model).

Таким образом, дерево рендеринга = дерево DOM + дерево CSSOM.

Если мы можем ускорить создание этих деревьев, мы ускорим загрузку страницы.

Прежде чем узнать, как сделать так, чтобы страница загружалась быстрее, давайте посмотрим, как браузер загружает страницу.

Стоит отметить, что шаги, которые браузер предпринимает для загрузки и рендеринга страницы, называются критическим путем рендеринга.

Этапы загрузки

Когда вы посещаете сайт, браузер начинает с запроса HTML страницы. Серверу требуется время, чтобы подготовить HTML-код и отправить его в качестве ответа. Сервер может отправлять его частями (каждая по 14 КБ), но браузеру не нужно ждать, пока весь HTML будет отправлен целиком.

Как только браузер получает первый фрагмент, он начинает разбирать HTML. Это означает, что процесс разбора происходит постепенно. Браузер разбирает HTML символ за символом, чтобы преобразовать их в лексемы. Токены включают в себя такие вещи, как начальные и конечные теги, а также имена и значения их атрибутов.

Разбор HTML включает в себя процесс построения дерева DOM. Дерево DOM показывает элементы в документе, а также отношения между ними. В качестве примера, дерево DOM может показать, что тег BODY имеет два дочерних элемента: H1 и P. Тег H1 имеет class="title" и TextNode Hello World.

В процессе разбора HTML браузер столкнется с некоторыми внешними ресурсами, такими как JavaScript, CSS, изображения и т. д. Процесс загрузки каждого из них различен. Например, загрузка JavaScript заставляет парсер остановиться и ждать, пока он загрузится и выполнится, а для CSS или изображений он может продолжать разбор, пока они загружаются.

К тому времени, когда браузер закончит разбор HTML, у него должно быть построено дерево DOM. Но он должен дождаться загрузки CSS, чтобы построить дерево CSSOM, и тогда он сможет построить дерево рендеринга и начать рендеринг страницы.

Теперь мы знаем, какие шаги должен предпринять браузер, чтобы начать рендеринг страницы. Давайте сделаем шаг назад и узнаем, как происходит загрузка и разбор CSS и JavaScript, чтобы знать, как их оптимизировать.

Загрузка CSS

Дерево CSSOM должно быть построено до начала рендеринга страницы. Чтобы построить его, браузер должен сначала разобрать CSS. Я сказал «разобрать», а не «загрузить», потому что ваш CSS может быть встроен (в тег <style>).

CSS блокирует рендеринг, что означает, что вы не можете начать рендеринг страницы, пока она не будет разобрана. Но он не блокирует парсер, то есть браузер может продолжать разбор HTML, пока CSS загружается (если он был связан извне).

Главный вывод: чем больше файл CSS, тем больше времени потребуется для начала рендеринга страницы, потому что это блокирующий рендеринг ресурс.

Загрузка JavaScript

JavaScript является ресурсом, блокирующим парсер. Это означает, что как только браузер найдет какой-либо код JavaScript, он немедленно остановит парсинг, чтобы загрузить и выполнить JavaScript. После выполнения JavaScript синтаксический анализатор может продолжить разбор документа.

Таким образом, JavaScript может задержать рендеринг, потому что браузер не может завершить построение DOM, пока не разберет HTML.

JavaScript должен ждать CSSOM

Что еще хуже, ваш код JavaScript не может начать выполнение, если идет загрузка CSS. Другими словами, если у вас есть <link rel="stylesheet" href="/style.css> над вашим кодом JavaScript, то браузеру придется ждать загрузки этого файла CSS и построения дерева CSSOM, прежде чем начать выполнение кода JavaScript, что означает задержку в построении DOM, и, следовательно, задержку рендеринга.

Оптимизация времени загрузки страницы

Теперь мы переходим к самому интересному — к тому, чтобы наши страницы загружались быстрее.

Подробное рассмотрение каждой техники выходит за рамки этой статьи, но я дам вам краткий обзор каждой из них. После этого вам будет легче узнать больше о каждой из них самостоятельно.

Загружайте только используемый/критически важный CSS

Чаще всего мы загружаем CSS, который нам не нужен на текущей странице. Поэтому мы можем разделить файл CSS на более мелкие и использовать каждый из них в зависимости от того, что нужно текущей странице.

Чаще всего это можно применить к загрузке стороннего CSS-кода только на тех страницах, где он необходим. Например, использовать библиотеку CSS для подсветки синтаксиса кода только на тех страницах, где отображается код.

Существует также хорошо известная техника, называемая критическим CSS. Она используется для загрузки только того CSS-кода, который вы видите над сгибом (видимая часть браузера при первоначальной загрузке), а затем лениво загружает остальное асинхронно. И вы можете сделать это еще лучше, инкрустировав критический CSS и лениво загружая остальное извне.

Асинхронная загрузка JavaScript

Два популярных атрибута для достижения этой цели: defer и async. Использование любого из них не заставит браузер ждать, пока они загрузятся, чтобы продолжить разбор.

Основное различие между ними заключается во времени и порядке выполнения.

Отложенные скрипты начинают выполняться после построения всего DOM, но до того, как сработает событие DOMContentLoaded. Это также означает, что перед выполнением скрипта вы должны увидеть, как отображается страница.

Отложенные скрипты выполняются в том порядке, в котором они были определены. Так, если скрипт1 находится выше скрипта2, то скрипт1 всегда начнет выполняться раньше скрипта2, даже если скрипт2 загружен раньше.

Асинхронные скрипты начнут выполняться сразу после их получения. Асинхронные скрипты не ждут построения DOM, что означает, что они могут заблокировать парсер, если асинхронный скрипт будет получен до построения DOM.

Async-скрипты выполняются в том порядке, в котором они были получены. Тот, который загружается первым, выполняется первым.

Эмпирическое правило — использовать отложенные скрипты, когда они зависят от содержимого (DOM) страницы, и использовать асинхронные скрипты для вещей, которым не нужен DOM, таких как аналитика и т.д.

Минимизируйте и сжимайте ресурсы

Существует множество инструментов сборки, которые помогут вам минифицировать CSS и JavaScript. Минификация — это процесс удаления всех ненужных для выполнения символов, таких как пробелы, комментарии и т.д.

Сжатие ресурсов выполняется сервером. gzip и brotli — самые популярные типы сжатия в настоящее время.

Минификация и сжатие ваших ресурсов сделают их намного меньше, что улучшит время загрузки.

Предварительная загрузка важных ресурсов

Браузер загружает ресурсы по мере того, как он их находит при разборе HTML. Иногда полезно запросить ресурс как можно раньше, еще до того, как парсер найдет его.

В качестве примера можно привести два синхронных внешних JavaScript-файла, расположенных друг под другом. Если мы не используем предварительную загрузку, то нам придется ждать, пока загрузится и выполнится первый сценарий, прежде чем загрузится второй. Но с предварительной загрузкой мы можем сказать браузеру, чтобы он получил второй сценарий даже во время разбора HTML.

Предварительная загрузка также используется для получения других ресурсов, таких как CSS, изображения, шрифты и т. д.

Предварительная загрузка может быть выполнена с помощью <link>. Пример:

<link rel="preload" href="style.css" as="style">
<link rel="preload" href="main.js" as="script">
Вход в полноэкранный режим Выход из полноэкранного режима

Сократите время отклика вашего сервера

Сколько бы вы ни оптимизировали клиентский код, это не ускорит загрузку страницы, если серверу требуется много времени, чтобы отправить запрашиваемый HTML-код.

Обычно это самое малое, что мы можем контролировать, особенно если мы не поддерживаем внутренний код. Но если мы занимаемся этим, мы можем сделать такие вещи, как оптимизация запросов к базе данных (как быстро мы получаем данные из нашей базы данных), использование кэширования, сжатие и минимизация ответов, модернизация серверного оборудования и т.д.

Теперь вы можете узнать больше

В этой статье мы едва поцарапали поверхность оптимизации производительности загрузки. Но теперь вам будет легче углубиться в каждую из них, поскольку вы должны иметь полное представление о том, как браузер загружает страницы.

Важной частью, которую мы не затронули в этой статье, являются инструменты, которые мы можем использовать для измерения производительности страницы и влияния оптимизаций, которые мы делаем. Google Chrome предоставляет нам два хороших инструмента для этого: вкладку производительности в devtools и Lighthouse. Поэтому я рекомендую вам проверить их самостоятельно.

Оцените статью
devanswers.ru
Добавить комментарий