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

В разделе «Возможности» вашего отчета Lighthouse третий уровень запросов в вашей критической цепочке запросов помечается как кандидат на предварительную загрузку:

Скриншот аудита запросов ключей Lighthouse Preload

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

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

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

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

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

Запросы предварительной загрузки могут ускорить загрузку ваших страниц.

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

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

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

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

Дополнительные рекомендации см. также в разделе «Предварительная загрузка критически важных ресурсов для повышения скорости загрузки» .

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

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

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

См. страницу предварительной загрузки ресурсов Tooling.Report .

Рекомендации для конкретного стека

Угловой

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

Магенто

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

Ресурсы