Предварительная выборка ресурсов для ускорения навигации в будущем.

Узнайте о подсказке ресурса rel=prefetch и о том, как ее использовать.

Демиан Рензулли
Demián Renzulli
X GitHub Glitch
Джереми Вагнер

Опубликовано: 12 сентября 2019 г., Последнее обновление: 8 февраля 2025 г.

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

В этом руководстве объясняется, как добиться этого с помощью <link rel=prefetch> , что позволяет эффективно реализовать предварительную загрузку.

Улучшите производительность сайта с помощью rel=prefetch

Добавление <link rel=prefetch> на веб-страницу сообщает браузеру о необходимости загрузить некоторые ресурсы (например, скрипты или файлы CSS), которые могут понадобиться пользователю в будущем:

<link rel="prefetch" href="/css/styles.css">

Подсказка prefetch потребляет дополнительные байты для ресурсов, которые не нужны немедленно, поэтому этот метод нужно применять обдуманно; выполняйте предварительную выборку ресурсов только тогда, когда вы уверены, что они понадобятся пользователям. Рассмотрите возможность отказа от предварительной выборки, когда пользователи используют медленное соединение. Вы можете обнаружить это с помощью API сетевой информации .

Варианты использования

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

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

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

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

Хотя предварительная выборка ресурсов использует дополнительную полосу пропускания, она может улучшить большинство показателей производительности. Время до первого байта (TTFB) часто будет намного ниже, так как запрос документа приводит к попаданию в кэш. Поскольку TTFB будет ниже, последующие временные показатели также часто будут ниже, включая наибольшую отрисовку содержимого (LCP) и первую отрисовку содержимого (FCP) .

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

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

Например, Netflix использует время, которое пользователи проводят на страницах, не вошедших в систему, для предварительной загрузки React, который будет использоваться после входа пользователей в систему. Благодаря этому им удалось сократить время до интерактивности на 30% для будущих навигаций .

Влияние предварительной загрузки статических ресурсов на показатели производительности зависит от предварительно загружаемого ресурса:

  • Предварительная загрузка изображений может значительно сократить время LCP для элементов изображения LCP.
  • Предварительная загрузка таблиц стилей может улучшить как FCP, так и LCP, поскольку время загрузки таблицы стилей в сети будет устранено. Поскольку таблицы стилей блокируют рендеринг, они могут уменьшить LCP при предварительной загрузке. В случаях, когда элемент LCP последующей страницы является фоновым изображением CSS, запрошенным с использованием свойства background-image , изображение также будет предварительно загружено как зависимый ресурс предварительно загруженной таблицы стилей.
  • Предварительная загрузка JavaScript позволит обрабатывать предварительно загруженный скрипт гораздо раньше, чем если бы он был сначала загружен сетью во время навигации. Это может повлиять на Interaction to Next Paint (INP) страницы. В случаях, когда разметка отображается на клиенте с помощью JavaScript, LCP может быть улучшен за счет сокращения задержек загрузки ресурсов, а клиентская загрузка разметки, содержащей элемент LCP страницы, может произойти раньше.
  • Предварительная загрузка веб-шрифтов, которые еще не используются текущей страницей, может устранить сдвиги макета. В случаях, когда используется font-display: swap; период подкачки для шрифта устраняется, что приводит к более быстрой отрисовке текста и устранению сдвигов макета. Если будущая страница использует предварительно загруженный шрифт, а элемент LCP страницы представляет собой блок текста, использующий веб-шрифт, LCP для этого элемента также будет быстрее.

Предварительная загрузка фрагментов JavaScript по запросу

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

Например, если у вас есть страница, которая содержит кнопку, открывающую диалоговое окно, содержащее средство выбора эмодзи, вы можете разделить ее на три фрагмента JavaScript — home, dialog и picker. Home и dialog могут быть изначально загружены, а picker может быть загружен по запросу. Такие инструменты, как webpack, позволяют вам указать браузеру предварительно загружать эти фрагменты по запросу.

Как реализовать rel=prefetch

Самый простой способ реализовать prefetch — добавить тег <link> в <head> документа:

<head>
  ...
  <link rel="prefetch" href="//css/styles.css">
  ...
</head>

Вы также можете инициировать предварительную загрузку с помощью HTTP-заголовка Link :

Link: </css/style.css>; rel=prefetch

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

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

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

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

form.addEventListener("submit", e => {
  e.preventDefault()
  import('lodash.sortby')
    .then(module => module.default)
    .then(sortInput())
    .catch(err => { alert(err) });
});

Вместо того чтобы ждать, пока произойдет событие «отправить» для загрузки этой функции, вы можете предварительно загрузить этот ресурс, чтобы увеличить вероятность того, что он будет доступен в кэше к моменту отправки формы пользователем. Webpack позволяет это сделать с помощью магических комментариев внутри import() :

form.addEventListener("submit", e => {
   e.preventDefault()
   import(/* webpackPrefetch: true */ 'lodash.sortby')
         .then(module => module.default)
         .then(sortInput())
         .catch(err => { alert(err) });
});

Это сообщает webpack о необходимости внедрить тег <link rel="prefetch"> в HTML-документ:

<link rel="prefetch" href="1.bundle.js">

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

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

Вы также можете реализовать более интеллектуальную предварительную выборку с помощью библиотек, которые используют prefetch выборку внутри:

  • quicklink использует Intersection Observer API для определения, когда ссылки попадают в область просмотра, и выполняет предварительную загрузку связанных ресурсов во время простоя . Бонус: quicklink весит менее 1 КБ!
  • Guess.js использует аналитические отчеты для создания прогностической модели, которая интеллектуально выбирает только то, что, скорее всего, понадобится пользователю.

И quicklink, и Guess.js используют API сетевой информации , чтобы избежать предварительной загрузки, если пользователь находится в медленной сети или у него включена Save-Data .

Prefetch под капотом

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

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

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

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

Заключение

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