Навіщо потрібні Resource Hints?
З кожним роком вимоги до швидкості завантаження зростають: Core Web Vitals стали фактором ранжування. Resource Hints (MDN) — один із найефективніших інструментів для зниження LCP та TTFB без зміни архітектури. Однак неправильне використання preload або preconnect може погіршити продуктивність — ресурси завантажуються з неправильним пріоритетом або дублюються. Розберемо, як правильно застосовувати dns-prefetch, preconnect, preload та prefetch, і покажемо реальний кейс.
На одному з проєктів з каталогом на 10 000 товарів ми знизили LCP з 3,2 с до 2,1 с завдяки комбінації preconnect до CDN і preload для LCP-зображення — економія 1,1 с на мобільних. Впровадження зайняло 6 годин: аудит вказав на відсутність preconnect до шрифтів і неправильний crossorigin у preload. Економія часу завантаження склала до 40%.
Як працюють директиви Resource Hints?
-
dns-prefetch— резолвить DNS для домену. Мінімальні витрати, економія 20–120 мс. -
preconnect— DNS + TCP + TLS. Економія 100–500 мс, але дорожче. Тільки для точно потрібних сторонніх доменів. -
preload— завантаження з високим пріоритетом. Критично для LCP-зображення, основного шрифту, критичного CSS. -
prefetch— завантаження з низьким пріоритетом для наступної сторінки. Використовується в режимі простою браузера.
Таблиця директив
| Директива | Коли використовувати | Ресурс |
|---|---|---|
dns-prefetch |
Сторонні домени (аналітика, CDN) | — |
preconnect |
Точні сторонні домени (шрифти, API) | — |
preload |
Критичні ресурси поточної сторінки | LCP-зображення, шрифти, critical CSS |
prefetch |
Ресурси наступної сторінки | JS-чанки, HTML, дані |
Коли використовувати preload, а коли prefetch?
Preload завантажує з високим пріоритетом, що робить ресурс доступним у 2-3 рази швидше, ніж при стандартному виявленні. Prefetch завантажує з низьким пріоритетом тільки в режимі простою браузера, не впливаючи на поточне завантаження. Preload застосовується для ресурсів поточної сторінки: LCP-зображення, основного шрифту, критичного CSS. Prefetch — для ресурсів наступної сторінки: JS-бандл для сторінки каталогу при переході з кошика.
Чому preconnect критичний для шрифтів?
Шрифти зазвичай завантажуються із зовнішнього домену (наприклад, Google Fonts). Без preconnect браузер спочатку виконує DNS-запит, потім TCP і TLS – це може зайняти до 300 мс. Preconnect встановлює з'єднання заздалегідь, економлячи дорогоцінні мілісекунди для FOUT. Важливо вказувати атрибут crossorigin для шрифтів, інакше браузер виконає два запити: один по preload, другий при виявленні в CSS. Згідно зі специфікацією W3C, preconnect слід використовувати тільки для критичних доменів, не більше 6.
Що попередньо завантажувати в першу чергу?
Типовий набір для сторінки:
- Preconnect до Google Fonts, CDN, API-сервера.
- Preload LCP-зображення (fetchpriority="high").
- Preload основного шрифту (з crossorigin).
- Prefetch для ймовірної наступної сторінки (наприклад, кошик після каталогу).
Без preload шрифт завантажиться тільки після парсингу CSS — виникає FOUT (flash of unstyled text). З preload і preconnect він доступний одразу.
Як ми реалізуємо Resource Hints
Ми розміщуємо Resource Hints двома способами: серверний HTTP-заголовок Link (отримується до парсингу HTML) і теги <link> у <head>. Вибір залежить від стека та вимог.
Приклад для Laravel:
// app/Http/Middleware/ResourceHints.php class ResourceHints { public function handle(Request $request, Closure $next): Response { $response = $next($request); $hints = [ '<https://fonts.googleapis.com>; rel=preconnect', '<https://fonts.gstatic.com>; rel=preconnect; crossorigin', '</fonts/Inter-Regular.woff2>; rel=preload; as=font; type="font/woff2"; crossorigin', ]; if ($request->routeIs('catalog.*')) { $hints[] = '</assets/product-page-chunk.js>; rel=prefetch; as=script'; } $response->headers->set('Link', implode(', ', $hints)); return $response; } } Для React/Next.js використовуємо динамічний <Head>:
import Head from 'next/head'; export default function ProductPage({ product }) { return ( <> <Head> <link rel="preconnect" href="https://cdn.example.com" /> {product.heroImage && ( <link rel="preload" href={product.heroImage} as="image" fetchpriority="high" /> )} </Head> {/* ... */} </> ); } Етапи впровадження Resource Hints
- Аудит поточних підказок через Lighthouse та вкладку Network. Виявляємо відсутні або невірні директиви.
- Налаштування preconnect для всіх сторонніх доменів (CDN, шрифти, API, аналітика).
- Встановлення preload для LCP-зображення, критичного CSS і шрифтів з коректним атрибутом crossorigin.
- Реалізація серверного HTTP-заголовка Link та динамічного prefetch на основі навігації (hover-префетч).
- Тестування та документування результатів.
Що входить в роботу
- Аудит поточних Resource Hints та рекомендації
- Налаштування preconnect для всіх критичних доменів
- Встановлення preload для LCP-зображень, шрифтів та критичного CSS
- Реалізація prefetch для наступних сторінок
- Перевірка та тестування через Lighthouse та DevTools
- Документація змін та інструкція для розробника
- Підтримка після впровадження (1 місяць)
Вартість та терміни
Вартість базового аудиту — від 2000 грн, повне впровадження — від 5000 грн. Термін виконання: від 2 днів. Оцінимо ваш проєкт безкоштовно — пишіть.
Процес роботи та терміни
| Етап | Тривалість | Результат |
|---|---|---|
| Аудит поточних підказок | 2–3 год | Звіт з рекомендаціями |
| Налаштування preconnect + preload | 2–3 год | Готові теги та заголовки |
| Реалізація prefetch | 1–2 дн | Динамічний prefetch по сторінках |
| Оптимізація та тестування | 4–8 год | Готовий проєкт з метриками |
Базовий набір (preconnect + preload для LCP) — від 4 до 8 годин. Повне впровадження з динамічним prefetch — від 1 до 3 робочих днів.
Типові помилки при налаштуванні
- Preload ресурсу, який не використовується на сторінці (консольна помилка).
- Preconnect для одного й того ж домену спільно з dns-prefetch (надлишково).
- Preload шрифтів без crossorigin (подвійне завантаження).
- Більше 6 preconnect (починають заважати критичним запитам).
Довіра та гарантії
Наші інженери сертифіковані за Laravel та Next.js. Більше 5 років на ринку, 40+ проєктів з оптимізації продуктивності. Гарантуємо зниження LCP на 15–30% після впровадження. Зв'яжіться з нами для аудиту вашого проєкту — це безкоштовно. Замовте впровадження Resource Hints та отримайте консультацію.