Налаштування 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, cross-domain зображення).
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 при наведенні
// 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 (при наведенні), 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 на одному зображенні — взаємовиключають один одного
Час налаштування: 4–8 годин для аудиту та розстановки правильних hints.