rel=prefetch

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

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

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

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

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

Предварительная загрузка может использоваться для загрузки как 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"> и других аналогичных функций повышения производительности.