Подсказки браузеру могут сократить LCP на секунды. Узнайте разницу между preload, prefetch и preconnect и научитесь применять их без вреда для скорости.
Браузер не знает, какие ресурсы на странице самые важные, пока не начнёт парсить HTML. К тому моменту, когда он обнаружит критическое изображение, шрифт или скрипт, уже прошли драгоценные миллисекунды. Resource hints — это способ дать браузеру подсказку заранее, чтобы он мог начать загрузку критических ресурсов до того, как они понадобятся. Правильное использование этих подсказок может сократить LCP на сотни миллисекунд или даже секунды.
Неправильное использование, с другой стороны, может ухудшить ситуацию. Слишком много preload создают конкуренцию за пропускную способность. Prefetch ненужных ресурсов тратит данные пользователя. Preconnect к слишком многим доменам создаёт бесполезные соединения. Ключ к успеху — точное понимание, какую подсказку когда использовать и для каких ресурсов.
Три типа подсказок и их назначение
Preload — самая сильная подсказка. Она говорит браузеру: этот ресурс будет нужен на текущей странице очень скоро, начни загружать его немедленно с наивысшим приоритетом. Preload предназначен для ресурсов, которые критически важны для рендеринга текущей страницы, но которые браузер обнаружит поздно при обычном парсинге.
Типичный кандидат для preload — LCP-изображение, которое загружается через CSS background-image или через JavaScript. Браузер обнаруживает его только после парсинга CSS или выполнения JavaScript. К тому времени загрузка уже отложена. Preload в head запускает загрузку немедленно, параллельно с парсингом HTML.
Prefetch — более слабая подсказка для ресурсов, которые понадобятся при следующей навигации. Она говорит браузеру: загрузи этот ресурс с низким приоритетом в фоновом режиме, он пригодится когда пользователь перейдёт на следующую страницу. Prefetch не должен использоваться для ресурсов текущей страницы. Он не влияет на скорость текущей загрузки.
Preconnect — самая лёгкая подсказка. Она говорит браузеру: установи соединение с этим доменом заранее, чтобы когда потребуется запрос к нему, не тратить время на DNS-запрос и TCP/TLS-рукопожатие. Preconnect идеален для сторонних доменов, к которым ваша страница точно будет делать запросы: CDN, API, шрифты, аналитика.
Preload: мощный инструмент, требующий осторожности
Preload критически важен для LCP-изображений, но только если это действительно LCP-элемент. Preload десятка изображений создаёт конкуренцию, в которой проигрывают все. Идентифицируйте точный LCP-элемент вашей страницы через PageSpeed Insights или Chrome DevTools. Preload только его и только в необходимом формате.
Preload критических шрифтов предотвращает невидимый текст и сдвиги макета. Если ваш основной текстовый шрифт загружается через CSS, браузер не начнёт его загрузку пока не распарсит CSS и не построит дерево рендеринга. Preload шрифта с атрибутом crossorigin запускает загрузку шрифта параллельно с парсингом CSS.
Preload критического CSS для above-the-fold контента позволяет браузеру отрисовать видимую часть страницы до загрузки полного CSS-файла. Это техника встроенного критического CSS, дополненная preload основного файла, который загружается асинхронно.
Избегайте preload для ресурсов, которые не используются на текущей странице. Каждый preload занимает место в очереди загрузки. Если ресурс не нужен, его preload бесполезно тратит пропускную способность и задерживает загрузку действительно важных ресурсов.
Prefetch для ускорения навигации
Prefetch ускоряет следующую страницу, а не текущую. Самый распространённый сценарий — prefetch страниц, на которые пользователь с высокой вероятностью перейдёт. Если у вас есть кнопка "Следующая статья" или пользователи систематически переходят с категории на популярные товары, prefetch этих целевых страниц или их критических ресурсов может сделать навигацию мгновенной.
DNS-prefetch — это упрощённая версия prefetch, которая разрешает только DNS домена. Это быстрее и легче чем полный preconnect и полезно для доменов, к которым возможны запросы, но не гарантированно.
Prerender — это самая агрессивная форма prefetch, которая не только загружает страницу, но и рендерит её в фоновом процессе. Если пользователь переходит, страница появляется мгновенно. Chrome поддерживает prerender ограниченно и только для URL, которые пользователь с очень высокой вероятностью посетит, например первый результат поиска.
Preconnect для сторонних ресурсов
Каждый сторонний домен, к которому ваша страница делает запросы, требует DNS-запроса, TCP-соединения и TLS-согласования. Эти шаги занимают от 100 до 500 миллисекунд в зависимости от расстояния до сервера. Preconnect выполняет все эти шаги заранее, в фоновом режиме, пока браузер парсит HTML.
Применяйте preconnect к доменам, к которым запросы будут сделаны гарантированно. CDN ваших изображений, домен шрифтов, API аналитики — все они кандидаты. Не применяйте preconnect к десяткам доменов. Каждое preconnect-соединение потребляет ресурсы браузера и сервера.
Как Serpmax анализирует использование Resource Hints
Serpmax Performance Analyzer проверяет HTML-код страницы на наличие resource hints. Отчёт показывает: какие ресурсы preloaded, какие из них действительно используются страницей, какие важные ресурсы могли бы выиграть от preload, но не имеют его, для каких сторонних доменов имеет смысл preconnect, и какие preload бесполезны и задерживают загрузку других ресурсов.
Особенно ценно то, что Serpmax выявляет preload для ресурсов, которые не используются. Это распространённая проблема после редизайна, когда старые preload остаются в коде и загружают несуществующие или ненужные ресурсы. Отчёт помогает очистить код от мусорных подсказок.
Часто задаваемые вопросы
Сколько preload можно использовать на одной странице? Минимум. Только для действительно критических ресурсов. Для большинства страниц один-два preload — оптимально. Каждый дополнительный preload увеличивает конкуренцию и может замедлить загрузку.
Preload и HTTP/2 Server Push — это одно и то же? Нет. Server Push отправляет ресурс без запроса браузера. Preload отправляет запрос раньше. Server Push был удалён из Chrome из-за проблем с перегрузкой. Preload остаётся рекомендуемой практикой.
Preload гарантирует приоритетную загрузку? В большинстве случаев да, но браузер может игнорировать preload в определённых условиях, например если соединение перегружено или ресурс уже загружен из кеша.
Заключение
Resource hints — это тонкий инструмент, который в умелых руках даёт значительный прирост скорости. Preload критических ресурсов сокращает LCP. Preconnect к сторонним доменам ускоряет запросы к ним. Prefetch делает навигацию мгновенной. Но каждая лишняя подсказка — это балласт, замедляющий загрузку.
Анализируйте свои страницы с Serpmax. Определите что действительно критично. Примените preload точечно. Подключите preconnect к важным сторонним доменам. Очистите код от ненужных подсказок. Результат — измеримое улучшение Core Web Vitals без изменения контента или дизайна.