Preload

Как работает

Все resource hints ставятся тегом <link> в блоке <head>. Разница — в атрибуте rel и в задаче, которую hint решает.

<link rel="preload"> — самый агрессивный. Говорит браузеру: загрузи этот ресурс с высоким приоритетом прямо сейчас, ещё до того как парсер HTML до него доберётся. Типично применяется для LCP-картинки, критичного шрифта, hero-видео:

<link rel="preload" as="image" href="/img/hero.webp" fetchpriority="high">
<link rel="preload" as="font" href="/fonts/inter-500.woff2" type="font/woff2" crossorigin>

Атрибут as обязателен — без него браузер не знает, какой приоритет и какие CORS-правила применять. Атрибут fetchpriority="high" дополнительно поднимает ресурс в очереди.

<link rel="preconnect"> — открыть TCP+TLS соединение с чужим доменом заранее, до того как понадобится первый ресурс с него. Экономит 100-300 мс на DNS + TLS-хендшейке для CDN, шрифтов Google, аналитики:

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link rel="dns-prefetch"> — только DNS-резолвинг, без TCP-соединения. Легче preconnect, но и эффект меньше. Ставится для доменов, которые понадобятся чуть позже.

<link rel="prefetch"> — низкоприоритетная загрузка ресурса для следующей навигации. Браузер грузит его в свободное время, если пользователь перейдёт по ссылке — ресурс уже в кэше.

Почему важно для SEO

Resource hints — точечный инструмент для улучшения LCP и TTFB. Preload LCP-картинки часто даёт сдвиг метрики на 200-500 мс без изменения содержимого страницы. Preconnect к CDN шрифтов убирает FOIT (Flash of Invisible Text) и заодно улучшает LCP, если LCP-элемент — заголовок с кастомным шрифтом.

Google Search Central в разделе Web Performance рекомендует preload как первый шаг оптимизации Core Web Vitals. Lighthouse в аудите «Preload key requests» отдельно подсказывает, для каких ресурсов hint даст максимальный эффект.

Для Яндекса прямых рекомендаций по resource hints нет, но Метрика фиксирует ускорение TTFB и LCP после внедрения — что бьёт в поведенческие и ранжирование.

Частые ошибки

• preload без атрибута as — браузер игнорирует hint и грузит ресурс с обычным приоритетом.
• Preload на 5-10 ресурсов сразу — конкурируют за bandwidth, эффект нулевой.
• Preload картинки, которая не является LCP — впустую тратятся ресурсы.
• preconnect к 15 разным доменам — браузер удерживает соединения, растёт нагрузка на устройство пользователя.
• Preload шрифта без атрибута crossorigin — шрифт всё равно грузится повторно.
• Preload через JavaScript после DOMContentLoaded — hint уже поздно, ресурс успел запроситься обычным путём.

Как проверить

В Chrome DevTools вкладка Network → колонка Priority показывает, с каким приоритетом браузер запросил ресурс. Если preload сработал — приоритет будет High или Very High. Lighthouse в аудите «Preload key requests» выдаёт конкретные рекомендации: какой ресурс какого типа стоит preload'нуть.

SEO Crawler при обходе фиксирует наличие resource hints в <head> каждой страницы, сверяет их с фактическими критичными ресурсами (LCP-картинка, шрифты первого экрана) и подсвечивает несоответствия — например, preload картинки, которая не является LCP-элементом. В отчёте это часть блока «Производительность».

Вывод

Resource hints — тонкий инструмент, эффективный только при точечном использовании. Preload — для 1-2 самых критичных ресурсов (LCP-элемент, критичный шрифт). Preconnect — для 2-3 основных сторонних доменов (CDN, шрифты). Всё остальное — либо мешает, либо не даёт эффекта. Проверяйте результат через Lighthouse после каждого добавления hint.