Prefetch (rel=prefetch) — это директива ресурсной подсказки, которая говорит браузеру загрузить нужные файлы или целую страницу в фоне, пока пользователь ещё читает текущую вкладку. Что это значит на практике: когда переход всё-таки происходит, ресурс уже лежит в кэше и открывается без задержки на скачивание.
Задаётся директива тегом <link rel=prefetch href=/next-page.html> в разделе <head> или через HTTP-заголовок Link. Браузер обрабатывает такую загрузку с низким приоритетом — только когда основной поток свободен и канал не занят критичными файлами. Проверить сработавшую предвыборку можно во вкладке Network инструментов разработчика: у запроса будет пометка prefetch cache.
§ 01Зачем нужен
Механизм упреждающей загрузки закрывает разрыв между кликом и отрисовкой следующей страницы. Без него браузер начинает качать HTML, стили и скрипты только после нажатия на ссылку — отсюда белый экран на медленном канале. Ресурсная подсказка переносит эту работу на время простоя. Для чего нужно: разгрузить критичный момент навигации, когда каждая сотня миллисекунд бьёт по восприятию скорости. Особенно заметен эффект на мобильных, где задержки сети выше, а это напрямую влияет на метрики Core Web Vitals — LCP следующей страницы.
§ 02Как устроен
Заблаговременная выборка страницы работает через атрибут rel тега <link> и различает два сценария. Значение prefetch тянет ресурс для будущей навигации и кладёт его в отдельный кэш. Рядом стоят соседние подсказки: preload — для файлов текущей страницы с высоким приоритетом, dns-prefetch — только для резолва домена, preconnect — для раннего TCP и TLS. Браузер сам решает, выполнять предзагрузку или пропустить: при экономии трафика или слабом соединении запрос игнорируется.
переход 1.8 → 0.4 c — Интернет-магазин одежды на Shopify Plus добавил rel=prefetch на карточки товаров из листинга и preload шрифтов. Время перехода на страницу товара упало с 1.8 до 0.4 с за 4 недели. Замер через PSI и GA4, конверсия выросла на 9%.
отказы −18% — Новостной портал на Next.js включил prefetch следующей статьи в ленте через Link-компонент. Открытие материала стало почти мгновенным, показатель отказов снизился на 18% за 7 недель. Динамика по GA4 Engagement и логам CrUX-75th.
§ 03Как настраивается
Ссылку на следующий документ добавляют в <head>: <link rel=prefetch href=/catalog as=document>. Атрибут as задаёт тип ресурса — document, script, style, image — чтобы браузер выставил корректный приоритет. Для загрузки со стороннего домена нужен crossorigin. Автоматизировать выборку помогают библиотеки вроде quicklink: они префетчат ссылки, попавшие в область видимости. Список правил можно вынести в HTTP-заголовок Link на стороне сервера, не трогая разметку.
§ 04Подводные камни
Избыточная предзагрузка ресурсов съедает трафик и канал: если префетчить десятки страниц подряд, браузер тратит соединение впустую, а пользователь оплачивает мегабайты, которые не откроет. На мобильном тарифе с лимитом это прямой вред. Вторая ловушка — устаревание: заранее скачанный HTML может разойтись с актуальной версией на сервере. Предвыборка также не гарантирует исполнение: браузер отменяет её при экономии данных или фоновой вкладке. Проверить реальную пользу стоит через вкладку Network и метрики скорости в PageSpeed Insights до и после внедрения.