Skip to content
Обучение Измерение Блог Case studies О сайте
Содержание
  • Как Lighthouse определяет кандидатов на предварительную загрузку
  • Объявите для атрибута rel тега link значение preload
    • Совместимость с браузером
    • Поддержка предварительной загрузки в системах сбора проектов
  • Руководство по стекам
    • Angular
    • Magento
  • Ресурсы

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

May 2, 2019 — Обновлено Jun 4, 2020
Available in: Español, 한국어, Português, English
Appears in: Аудиты производительности
Содержание
  • Как Lighthouse определяет кандидатов на предварительную загрузку
  • Объявите для атрибута rel тега link значение preload
    • Совместимость с браузером
    • Поддержка предварительной загрузки в системах сбора проектов
  • Руководство по стекам
    • Angular
    • Magento
  • Ресурсы

В разделе 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. Но вам известно, что эти ресурсы важны и их следует загрузить как можно скорее.

Объявите для атрибута rel тега link значение preload #

Настройте предварительную загрузку в 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>.

Ресурсы #

  • Исходный код для проверки предварительной загрузки ключевых запросов.
Последнее обновление: Jun 4, 2020 — Улучшить статью
Return to all articles
Поделиться
подписаться

Contribute

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

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

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

Соцсети

  • 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.