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

— Обновлено
Available in: English, Español, Português и 한국어
Appears in: Аудиты производительности
Содержание

В разделе Opportunities (Возможности) отчета Lighthouse запросы третьего уровня в критической цепочке запросов помечаются в качестве кандидатов на предварительную загрузку:

Скриншот проверки Preload key requests (Предварительная загрузка ключевых запросов) в Lighthouse

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

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

index.html
|--app.js
   |--styles.css
   |--ui.js

В ваш файл index.html включен <script src="app.js">. Когда запускается app.js, он вызывает fetch() для загрузки styles.css и ui.js. Пока 2 последние ресурса не будут загружены, проанализированы и запущены, страница будет выглядеть неполной. В приведенном выше примере в качестве кандидатов Lighthouse отметил бы styles.css styles.css и ui.js.

При настроенной предварительной загрузке потенциальная экономия будет зависеть от того, насколько раньше браузер сможет запускать запросы. Например, если app.js требует 200 мс для загрузки, анализа и выполнения, то потенциальная экономия для каждого ресурса составляет 200 мс, поскольку app.js больше не является узким местом для каждого из запросов.

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

Если предварительная загрузка не настроена, styles.css и ui.js запрашиваются только после загрузки, анализа и выполнения app.js.
Если предварительная загрузка не настроена, styles.css и ui.js запрашиваются только после загрузки, анализа и выполнения app.js.

Проблема здесь в том, что браузер узнает об этих 2 последних ресурсах только после загрузки, анализа и выполнения app.js. Но вам известно, что эти ресурсы важны и их следует загрузить как можно скорее.

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

<head>
  ...
  <link rel="preload" href="styles.css" as="style">
  <link rel="preload" href="ui.js" as="script">
  ...
</head>
Если предварительная загрузка настроена, styles.css и ui.js запрашиваются одновременно с app.js.
Если предварительная загрузка настроена, styles.css и ui.js запрашиваются одновременно с app.js.

Более подробная информация приведена в статье «Настройте предварительную загрузку критически важных ресурсов для повышения скорости загрузки».

Совместимость с браузером #

По состоянию на июнь 2020 года предварительная загрузка поддерживалась в браузерах на основе Chromium. Актуальность информации проверяйте по ссылке «Совместимость с браузером».

Поддержка предварительной загрузки в системах сбора проектов #

См. страницу Preloading Assets (Предварительная загрузка ресурсов) на сайте Tooling.Report.

Руководство по стекам #

Angular #

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

Magento #

Измените макет своей темы и добавьте теги <link rel=preload>.

Ресурсы #

Последнее обновление: — Улучшить статью
Return to all articles
Поделиться