rel="prefetch" значение атрибута

Ключевое слово prefetch для атрибута rel элемента <link> сообщает браузерам, что пользователю, вероятно, понадобится целевой ресурс при будущих переходах, и поэтому браузер может улучшить взаимодействие с пользователем, заранее загрузив ресурс и сохранив его в кэше. <link rel="prefetch"> используется для ресурсов, предназначенных для переходов в пределах одного сайта, или для подресурсов, используемых страницами того же сайта.

Результат сохраняется в HTTP-кэше на диске. Поэтому этот механизм полезен для предварительной загрузки подресурсов, даже если они не используются текущей страницей. Его также можно использовать для предварительной загрузки следующего документа, который пользователь, вероятно, посетит на сайте. Однако в связи с этим нужно внимательно отнестись к заголовкам — например, некоторые заголовки Cache-Control могут блокировать предварительную загрузку (например, no-cache или no-store).

<link rel="prefetch"> функционально эквивалентен вызову fetch() с параметром priority: "low", за исключением того, что первый обычно имеет ещё более низкий приоритет и для него в запросе устанавливается заголовок Sec-Purpose: prefetch. Обратите внимание, что браузеры обычно назначают ресурсам, загружаемым заранее, более низкий приоритет, чем ресурсам, загружаемым с помощью preload (например, запрошенным через <link rel="preload">), — текущая страница важнее следующей.

Запрос на получение ресурса для операции prefetch приводит к HTTP-запросу, содержащему HTTP-заголовок Sec-Purpose: prefetch. Сервер может использовать этот заголовок, чтобы изменить время хранения ресурсов в кэше или выполнить другую специальную обработку. Запрос также будет содержать заголовок Sec-Fetch-Dest со значением empty.

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

Примеры

Базовая предварительная загрузка

<link rel="prefetch" href="main.js" />

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

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

<link rel="prefetch" href="/app/style.css" />
<link rel="prefetch" href="/landing-page" />

Влияние разделения кэша

Во многих браузерах теперь реализован тот или иной вариант разделения кэша, из-за чего <link rel="prefetch"> становится бесполезным для ресурсов, предназначенных для использования разными сайтами верхнего уровня. Это касается и основного документа при переходе между сайтами. Например, следующая предварительная загрузка:

<link rel="prefetch" href="https://news.example/article" />

Не будет доступна из https://aggregator.example/.

Спецификации

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

См. также

• Спекулятивная загрузка — сравнение <link rel="prefetch"> и других схожих способов повышения производительности.