Skip to content
О сайте Блог Обучение Исследовать узоры Case studies
Содержание
  • Как работает предварительная загрузка
  • Сценарии использования
    • Предварительная загрузка ресурсов, определенных в CSS
    • Предварительная загрузка файлов CSS
    • Предварительная загрузка файлов JavaScript
  • Как реализовать rel = preload
    • Предварительная загрузка модулей JavaScript с помощью webpack
  • Заключение

Настройте предварительную загрузку критических ресурсов для повышения скорости загрузки

Nov 5, 2018 — Обновлено May 27, 2020
Available in: English, Español, Português, 中文, 日本語 и 한국어
Appears in: Ускорение загрузки
Houssein Djirdeh
Houssein Djirdeh
TwitterGitHubGlitchHomepage
Milica Mihajlija
Milica Mihajlija
TwitterGitHubHomepage
Содержание
  • Как работает предварительная загрузка
  • Сценарии использования
    • Предварительная загрузка ресурсов, определенных в CSS
    • Предварительная загрузка файлов CSS
    • Предварительная загрузка файлов JavaScript
  • Как реализовать rel = preload
    • Предварительная загрузка модулей JavaScript с помощью webpack
  • Заключение

Когда вы открываете веб-страницу, браузер запрашивает HTML-документ с сервера, анализирует его содержимое и отправляет отдельные запросы на любые ресурсы, на которые ссылается страница. Как разработчик, вы уже знаете обо всех ресурсах, необходимых вашей странице, и о том, какие из них наиболее важны. Вы можете использовать эти знания, чтобы заблаговременно запросить критические ресурсы и ускорить процесс загрузки. В этой статье объясняется, как можно это сделать с помощью <link rel="preload">.

Как работает предварительная загрузка #

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

Скриншот панели Network (Сеть) в Chrome DevTools.
В этом примере шрифт Pacifico определяется в таблице стилей правилом @font-face. Браузер загружает файл шрифта только после завершения загрузки и анализа таблицы стилей.

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

Скриншот панели Network (Сеть) в Chrome DevTools после применения предварительной загрузки.
В этом примере предварительно загружается шрифт Pacifico, поэтому его загрузка происходит параллельно с таблицей стилей.

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

Аудит Preload key requests (Настройте предварительную загрузку ключевых запросов) в Lighthouse.

Вы можете настроить предварительную загрузку ресурсов, добавив тег <link> с атрибутом rel="preload" в заголовок HTML-документа:

<link rel="preload" as="script" href="critical.js">

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

После внедрения предварительной загрузки на многих сайтах, включая Shopify, Financial Times и Treebo, на 1 секунду были улучшены такие ориентированные на пользователя метрики, как TTI (Время до интерактивности) и FCP (Первая отрисовка контента).

Ресурсные подсказки, например preconnect и prefetch, выполняются по усмотрению браузера, тогда как preload является обязательной для браузера. Современные браузеры уже довольно хорошо определяют приоритеты ресурсов, поэтому необходимо использовать preload точечно и только для предварительной загрузки самых критических ресурсов.

Неиспользованные предварительные загрузки вызывают предупреждение на вкладке Console (Консоль) в Chrome DevTools примерно через 3 секунды после события load.

Предупреждение на вкладке Console в Chrome DevTools о неиспользуемых предварительно загруженных ресурсах.
preload поддерживается во всех современных браузерах.

Сценарии использования #

Внимание

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

Предварительная загрузка ресурсов, определенных в 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 и другие.

Ознакомьтесь с документом Chrome Resource Priorities and Scheduling (Приоритетность и планирование загрузки ресурсов в Chrome), чтобы больше узнать о том, как браузер устанавливает приоритеты для различных типов ресурсов.

Внимание

Отсутствие атрибута as или наличие недопустимого значения эквивалентно XHR-запросу, когда браузер не знает, что он извлекает, поэтому не может определить правильный приоритет. Это также может привести к тому, что некоторые ресурсы, например сценарии, будут получены дважды.

Некоторые типы ресурсов, например шрифты, загружаются в анонимном режиме . Для них вы должны установить атрибут crossorigin с preload:

<link rel="preload" href="ComicSans.woff2" as="font" type="font/woff2" crossorigin>

Внимание

Предварительно загруженные шрифты без атрибута 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 точечно и измеряйте воздействие в реальных условиях.

Производительность
Последнее обновление: May 27, 2020 — Улучшить статью
Codelabs

See it in action

Learn more and put this guide into action.

  • Codelab: Preload critical assets to improve loading speed
  • Preload web fonts to improve loading speed
Return to all articles
Поделиться
подписаться

Contribute

  • Сообщить об ошибке
  • Просмотреть исходный код

Дополнительная информация

  • developer.chrome.com
  • Новости Chrome
  • Разборы конкретных случаев
  • Подкасты
  • Шоу

Соцсети

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • Все продукты
  • Условия и конфиденциальность
  • Правила сообщества

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.