Настройте предварительную загрузку критических ресурсов для повышения скорости загрузки
Когда вы открываете веб-страницу, браузер запрашивает HTML-документ с сервера, анализирует его содержимое и отправляет отдельные запросы на любые ресурсы, на которые ссылается страница. Как разработчик, вы уже знаете обо всех ресурсах, необходимых вашей странице, и о том, какие из них наиболее важны. Вы можете использовать эти знания, чтобы заблаговременно запросить критические ресурсы и ускорить процесс загрузки. В этой статье объясняется, как можно это сделать с помощью <link rel="preload">.
Как работает предварительная загрузка #
Предварительная загрузка лучше всего подходит для ресурсов, которые браузер обычно обнаруживает поздно.
@font-face. Браузер загружает файл шрифта только после завершения загрузки и анализа таблицы стилей.
Предварительно загружая определенный ресурс, вы сообщаете браузеру, что хотели бы получить данный ресурс раньше, чем он будет загружен браузером, так как ресурс важен для текущей страницы.
Цепочка критических запросов представляет собой установленный браузером порядок выборки ресурсов. Lighthouse определяет ресурсы, которые находятся на третьем уровне этой цепочки, как поздно обнаруженные. Вы можете использовать аудит Preload key requests (Настройте предварительную загрузку ключевых запросов), чтобы определить, какие ресурсы необходимо загружать заранее.
Вы можете настроить предварительную загрузку ресурсов, добавив тег <link> с атрибутом rel="preload" в заголовок HTML-документа:
<link rel="preload" as="script" href="critical.js">Браузер кеширует предварительно загруженные ресурсы, чтобы их можно было использовать в нужный момент. (Браузер не выполняет сценарии и не применяет таблицы стилей.)
Ресурсные подсказки, например preconnect и prefetch, выполняются по усмотрению браузера, тогда как preload является обязательной для браузера. Современные браузеры уже довольно хорошо определяют приоритеты ресурсов, поэтому необходимо использовать preload точечно и только для предварительной загрузки самых критических ресурсов.
Неиспользованные предварительные загрузки вызывают предупреждение на вкладке Console (Консоль) в Chrome DevTools примерно через 3 секунды после события load.
Сценарии использования #
Предварительная загрузка ресурсов, определенных в CSS #
Шрифты, определенные с помощью правил @font-face или фоновые изображения, определенные в файлах CSS, не обнаруживаются, пока браузер не загрузит и не проанализирует эти файлы CSS. Предварительная загрузка этих ресурсов гарантирует, что они будут получены до загрузки файлов CSS.
Предварительная загрузка файлов CSS #
Если вы используете критический подход к обработке CSS-кода, разделите CSS-код на две части. Критический CSS-код, необходимый для рендеринга контента в области просмотра, встраивается в <head> документа, а некритический CSS-код обычно загружается с помощью JavaScript с отложенной загрузкой. Ожидание выполнения JavaScript перед загрузкой некритического CSS-кода может вызвать задержки в отрисовке страницы при прокрутке, поэтому рекомендуется использовать <link rel="preload">, чтобы начать загрузку раньше.
Предварительная загрузка файлов JavaScript #
Поскольку браузеры не выполняют предварительно загруженные файлы, предварительная загрузка полезна для отделения выборки от выполнения. Это может улучшить такие метрики, как TTI (Время до интерактивности). Предварительная загрузка сработает эффективнее, если вы разделите пакеты JavaScript и предварительно загрузите только критические фрагменты.
Как реализовать rel = preload #
Самый простой способ реализовать preload — это добавить тег <link> к <head> документа:
<head>
<link rel="preload" as="script" href="critical.js">
</head>Использование атрибута as помогает браузеру установить приоритет предварительно извлеченного ресурса в соответствии с его типом, установить правильные заголовки и определить, существует ли уже ресурс в кеше. Допустимые значения для этого атрибута: script, style, font, image и другие.
Некоторые типы ресурсов, например шрифты, загружаются в анонимном режиме . Для них вы должны установить атрибут crossorigin с preload:
<link rel="preload" href="ComicSans.woff2" as="font" type="font/woff2" crossorigin>Элементы <link> также принимают атрибут type, который содержит MIME-тип связанного ресурса. Браузеры используют значение type, чтобы обеспечить предварительную загрузку ресурсов только в том случае, если их тип файла поддерживается. Если браузер не поддерживает указанный тип ресурса, он проигнорирует <link rel="preload">.
Вы также можете предварительно загрузить любой тип ресурса через HTTP-заголовок Link :
Link: </css/style.css>; rel="preload"; as="style"
Преимущество указания preload в HTTP-заголовке заключается в том, что браузеру не нужно анализировать документ, чтобы обнаружить preload. Это может дать небольшие улучшения в некоторых случаях.
Предварительная загрузка модулей JavaScript с помощью webpack #
Если вы используете сборщик модулей, который создает файлы сборки вашего приложения, вам необходимо проверить, поддерживает ли он внедрение тегов предварительной загрузки. В webpack версии 4.6.0 или новее предварительная загрузка поддерживается за счет использования волшебных комментариев внутри import():
import(_/* webpackPreload: true */_ "CriticalChunk")Если у вас старая версия webpack, используйте сторонний плагин, например preload-webpack-plugin.
Заключение #
Чтобы повысить скорость загрузки страниц, предварительно загружайте важные ресурсы, которые браузер обнаруживает с опозданием. Предварительная загрузка всего будет контрпродуктивна, поэтому используйте preload точечно и измеряйте воздействие в реальных условиях.