Настройка preload, prefetch и preconnect
Resource Hints позволяют браузеру начать загрузку ресурсов заранее — до того как они будут обнаружены парсером. Правильное использование сокращает LCP и FCP на 200–800 мс.
Три директивы и их назначение
| Директива | Когда | Что делает |
|---|---|---|
preconnect |
Как можно раньше | DNS + TCP + TLS к домену |
preload |
Текущая страница | Загрузить ресурс с высоким приоритетом |
prefetch |
Следующая страница | Загрузить в фоне с низким приоритетом |
preconnect — устранение connection overhead
<head>
<!-- Критичные сторонние домены — устанавливаем соединение заранее -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://cdn.example.ru" crossorigin>
<!-- API сервер если он на другом домене -->
<link rel="preconnect" href="https://api.example.ru">
<!-- dns-prefetch: только DNS, без TCP (для менее критичных) -->
<link rel="dns-prefetch" href="https://analytics.google.com">
<link rel="dns-prefetch" href="https://mc.yandex.ru">
</head>
crossorigin нужен для ресурсов с CORS (шрифты, JSON API, изображения с другого домена).
preload — приоритетная загрузка ресурсов текущей страницы
<head>
<!-- LCP-изображение — самый важный preload -->
<link rel="preload" as="image"
href="/images/hero.webp"
imagesrcset="/images/hero-640.webp 640w, /images/hero-1280.webp 1280w"
imagesizes="100vw">
<!-- Кастомный шрифт -->
<link rel="preload" as="font" type="font/woff2"
href="/fonts/inter-regular.woff2" crossorigin>
<!-- Критичный JS-модуль (не defer/async) -->
<link rel="preload" as="script" href="/js/checkout.js">
<!-- CSS (если не в <head> напрямую) -->
<link rel="preload" as="style" href="/css/above-fold.css"
onload="this.onload=null;this.rel='stylesheet'">
</head>
Типы ресурсов для as: image, script, style, font, fetch, document, track, audio, video.
prefetch — предзагрузка следующей страницы
<!-- На странице корзины — prefetch страницы оформления заказа -->
<link rel="prefetch" href="/checkout">
<link rel="prefetch" as="script" href="/js/checkout.chunk.js">
<link rel="prefetch" as="style" href="/css/checkout.css">
Браузер загружает prefetch-ресурсы в фоне с низким приоритетом — только когда основные ресурсы уже загружены.
Динамический prefetch на hover
// Prefetch при наведении на ссылку (React)
function usePrefetch() {
const prefetched = useRef(new Set<string>());
return useCallback((url: string) => {
if (prefetched.current.has(url)) return;
prefetched.current.add(url);
const link = document.createElement('link');
link.rel = 'prefetch';
link.href = url;
document.head.appendChild(link);
}, []);
}
function NavLink({ to, children }: { to: string; children: React.ReactNode }) {
const prefetch = usePrefetch();
return (
<Link
to={to}
onMouseEnter={() => prefetch(to)}
onFocus={() => prefetch(to)}
>
{children}
</Link>
);
}
Speculation Rules API (Chrome 108+)
Более современная альтернатива prefetch — позволяет браузеру полностью пре-рендерить страницу:
<script type="speculationrules">
{
"prerender": [
{
"where": {
"and": [
{ "href_matches": "/products/*" },
{ "not": { "href_matches": "/api/*" } }
]
},
"eagerness": "moderate"
}
],
"prefetch": [
{
"urls": ["/checkout", "/cart"],
"eagerness": "eager"
}
]
}
</script>
Значения eagerness: immediate (сразу), eager (при hover), moderate (при взаимодействии), conservative (по усмотрению браузера).
Early Hints (103)
Сервер отправляет preload заголовки до формирования основного ответа — пока PHP/Laravel генерирует HTML, браузер уже начинает загружать ресурсы:
# Nginx с модулем http_v2_module
location / {
http2_push /css/app.css;
http2_push /js/app.js;
http2_push /fonts/inter.woff2;
# или через 103 Early Hints
}
// Laravel: отправить 103 Early Hints
public function show(): Response
{
// Отправляем hints до рендеринга
header('Link: </css/app.css>; rel=preload; as=style, </js/app.js>; rel=preload; as=script', false, 103);
return response()->view('pages.product');
}
Ошибки при использовании preload
- Preload ресурса который не используется на странице — браузер предупредит в консоли
- Preload шрифта без
crossorigin— загрузится дважды - Слишком много preload — конкурируют за пропускную способность, снижают приоритет LCP-изображения
- Preload + lazy loading на одном изображении — взаимоисключают друг друга
Срок настройки: 4–8 часов для аудита и расстановки правильных hints.