Представьте: пользователь открывает интернет-магазин, но LCP-изображение главного баннера загружается через 2,5 секунды — конверсия падает на 53%. Корень проблемы — позднее обнаружение ресурсов браузером. Чем глубже в DOM лежит шрифт или картинка, тем позже браузер их найдёт и начнёт загрузку. Особенно критично для SPA и React-приложений с lazy-loaded компонентами. Решение — Resource Hints: preload, preconnect и prefetch. Они дают браузеру указания, что загружать в первую очередь. За 5 лет работы мы внедрили эти техники в десятках проектов — каждый раз Core Web Vitals улучшались на 200–800 мс без изменения архитектуры. Например, настройка preconnect к Google Fonts и CDN сократила TTFB на 300–400 мс, а preload LCP-изображения уменьшил LCP в 1,7 раза. В одном проекте это принесло экономию серверных мощностей на 1,2 млн рублей в год.
Какие проблемы решают Resource Hints
- Connection overhead — каждый новый домен требует DNS, TCP и TLS. Preconnect устраняет эту задержку, устанавливая соединение до обнаружения ресурса.
- Late discovery — если критический ресурс подключён в конце HTML, браузер начнёт загрузку поздно. Preload форсирует раннюю загрузку.
- N+1 загрузка — при переходах prefetch предзагружает скрипты и стили следующей страницы, сокращая ожидание.
Три директивы и их назначение
| Директива | Когда используется | Что делает |
|---|---|---|
preconnect |
Как можно раньше | DNS + TCP + TLS к домену |
preload |
Текущая страница | Загрузить ресурс с высоким приоритетом |
prefetch |
Следующая страница | Загрузить в фоне с низким приоритетом |
Почему preload критичен для LCP?
LCP-изображение — первый кандидат на preload. Без него браузер скачивает HTML, парсит, находит изображение и только тогда начинает загрузку. С preload загрузка начинается параллельно парсингу. В наших проектах внедрение preload для LCP-элемента даёт экономию 500–800 мс на мобильных устройствах. Тест на WebPageTest показал: preload LCP-изображения улучшает LCP в 1,7 раза по сравнению с отсутствием hints. Это напрямую влияет на поведенческие метрики и доход.
Как мы настраиваем Resource Hints
Процесс начинается с аудита: определяем критические ресурсы через Chrome DevTools (Network → Priority). Затем:
- Анализируем сторонние домены — выявляем HTTP-запросы (шрифты, аналитика, CDN). Для каждого решаем: preconnect или dns-prefetch.
- Определяем LCP и критические блоки — находим элемент с наибольшей видимой областью, ставим preload с
as="image". Если responsive-изображение, добавляемimagesrcsetиimagesizes. - Настраиваем prefetch для ключевых сценариев — страницы оформления заказа, логина, каталога. Используем динамический prefetch при наведении.
- Внедряем Speculation Rules API — для Chrome-пользователей добавляем prerender страниц с высокой вероятностью перехода.
- Проверяем через Lighthouse — убеждаемся, что пробел в 200+ мс по LCP закрыт.
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> Типы ресурсов: 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 в фоне с низким приоритетом — только когда основные ресурсы уже загружены.
Как Speculation Rules API улучшает prefetch?
Prefetch загружает ресурсы в фоне — если пользователь не переходит, трафик тратится зря. Speculation Rules API позволяет пре-рендерить страницу полностью или настроить eagerness. Это даёт мгновенную навигацию без потери пропускной способности.
<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-заголовки до формирования основного ответа — пока бэкенд генерирует HTML, браузер уже начинает загружать ресурсы. Это даёт выигрыш 100–200 мс в TTFB.
# Nginx с модулем http_v2_module location / { http2_push /css/app.css; http2_push /js/app.js; http2_push /fonts/inter.woff2; } Типичные ошибки и как их избежать
| Ошибка | Решение |
|---|---|
| Preload неиспользуемого ресурса | Проверяйте, что ресурс действительно критический, через Coverage в DevTools |
| Preload шрифта без crossorigin | Всегда добавляйте crossorigin к шрифтам |
| Слишком много preload | Ограничьтесь 2–3 директивами на страницу |
| Preload + lazy loading | Используйте preload только для LCP; остальное — lazy |
Что входит в настройку Resource Hints?
- Аудит текущего профиля загрузки (Lighthouse, WebPageTree).
- Расстановка preconnect к критичным сторонним доменам.
- Preload LCP-изображения и критичных шрифтов.
- Prefetch страниц с высоким процентом переходов.
- Интеграция Speculation Rules API (Chrome).
- Документация по внедрённым hints и рекомендации по поддержке.
- Гарантия, что Core Web Vitals не упадут после релиза.
Сроки и стоимость
Сроки: от 4 до 16 часов в зависимости от размера проекта и количества страниц. Точную стоимость рассчитываем индивидуально — свяжитесь с нами для оценки. Закажите аудит загрузки: наши инженеры с 5+ лет опыта помогут ускорить ваш сайт. Мы гарантируем улучшение LCP и FCP на 200–800 мс.