Prefetch (предварительная загрузка) — техника оптимизации, при которой браузер или сервер загружает ресурсы до того, как они понадобятся пользователю. Снижает воспринимаемое время загрузки следующей страницы до нуля при правильной реализации.
Как работает
Браузер использует подсказки (hints) в HTML или HTTP-заголовках для приоритизации загрузки ресурсов. Несколько типов prefetch-директив решают разные задачи:
- dns-prefetch — заранее резолвит DNS для внешних доменов:
<link rel="dns-prefetch" href="//fonts.googleapis.com"> - preconnect — устанавливает TCP+TLS соединение заранее:
<link rel="preconnect" href="https://fonts.googleapis.com"> - prefetch — загружает ресурс с низким приоритетом для будущих страниц:
<link rel="prefetch" href="/next-page.js"> - preload — загружает критический ресурс текущей страницы с высоким приоритетом:
<link rel="preload" href="/font.woff2" as="font" crossorigin> - modulepreload — загружает ES-модули заранее с парсингом и компиляцией.
История
Концепция предзагрузки появилась с развитием браузерных оптимизаций в 2000-х. Спецификация Resource Hints W3C формализовала dns-prefetch, preconnect, prefetch и prerender в 2014 году. Google Chrome первым реализовал спекулятивный prerendering страниц на основе навигации пользователя. В 2023 году Google представил Speculation Rules API — более точный контроль над prefetch и prerender через JSON-конфиг в HTML.
Prefetch в CDN и edge-серверах
CDN-префетч работает иначе: edge-узел заранее загружает контент с origin до запроса пользователя. Cloudflare Prefetch, Akamai SureRoute предсказывают популярные маршруты на основе аналитики трафика и прогревают кеш на edge до пиковых нагрузок. Для медиасайтов это означает нулевой cache miss в момент публикации вирусного материала.
Preload для критических ресурсов
Шрифты, критический CSS и Hero-изображения — первые кандидаты для preload. Пример оптимизации Core Web Vitals:
<!-- Предзагрузка шрифта -->
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
<!-- Предзагрузка Hero-изображения -->
<link rel="preload" href="/hero.webp" as="image" fetchpriority="high">
<!-- DNS для CDN -->
<link rel="dns-prefetch" href="//cdn.example.com">Правильный preload шрифтов убирает FOUT (Flash of Unstyled Text) и улучшает показатель LCP.
На что обращать внимание
Избыточный prefetch увеличивает потребление трафика и памяти браузера. На мобильных соединениях prefetch следующих страниц может раздражать пользователя, тратя мобильный трафик. Атрибут fetchpriority="low" снижает приоритет prefetch-запросов, не блокируя критическую загрузку. Тестируйте prefetch в DevTools вкладка Network, фильтр по типу ресурса.
Speculation Rules API
Современный API (Chrome 109+) заменяет несколько link rel-хинтов на единую JSON-конфигурацию:
<script type="speculationrules">
{
"prefetch": [{"source": "list", "urls": ["/about", "/contact"]}],
"prerender": [{"source": "document", "where": {"href_matches": "/blog/*"}}]
}
</script>Режим prerender создаёт скрытую страницу в памяти браузера: при переходе пользователя — мгновенное отображение. Используется Core Web Vitals для оценки: хорошо реализованный prefetch снижает LCP следующей страницы до <100 мс.