Зачем нужны Resource Hints?
С каждым годом требования к скорости загрузки растут: Core Web Vitals стали фактором ранжирования. Resource Hints — один из самых эффективных инструментов для снижения 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-префетч).
- Тестирование и документирование результатов.
Процесс работы и сроки
| Этап | Длительность | Результат |
|---|---|---|
| Аудит текущих подсказок | 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 и получите консультацию.