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

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

Демиан Рензулли
Джереми Вагнер

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

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

Улучшите навигацию с помощью rel=prefetch

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

<link rel="prefetch" href="/articles/" as="document">

Диаграмма, показывающая, как работает предварительная выборка ссылок.

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

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

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

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

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

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

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

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

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

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

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

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

Предварительная выборка фрагментов JavaScript по требованию

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

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

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

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

<head>
  ...
  <link rel="prefetch" href="/articles/" as="document">
  ...
</head>

Атрибут as помогает браузеру установить правильные заголовки и определить, находится ли ресурс уже в кеше. Примеры значений этого атрибута: document , script , style , font , image и другие .

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

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

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

Предварительная выборка модулей JavaScript с помощью волшебных комментариев веб-пакета

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) });
});

Это указывает веб-пакету вставить тег <link rel="prefetch"> в HTML-документ:

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

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

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

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

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

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

Предварительная выборка под капотом

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

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

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

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

Заключение

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