Предварительная загрузка ключевых запросов
Published on • Updated on
В разделе Opportunities (Возможности) отчета 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.Проблема здесь в том, что браузер узнает об этих 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.Более подробная информация приведена в статье «Настройте предварительную загрузку критически важных ресурсов для повышения скорости загрузки».
Совместимость с браузером
По состоянию на июнь 2020 года предварительная загрузка поддерживалась в браузерах на основе Chromium. Актуальность информации проверяйте по ссылке «Совместимость с браузером».
Поддержка предварительной загрузки в системах сбора проектов
См. страницу Preloading Assets (Предварительная загрузка ресурсов) на сайте Tooling.Report.
Руководство по стекам
Angular
Предварительно загружайте маршруты, чтобы ускорить навигацию.
Magento
Измените макет своей темы и добавьте теги <link rel=preload>.
Ресурсы
Updated on • Improve article