Главная Статьи Оптимизация

Preload и preconnect

Браузер узнаёт о ресурсах постепенно — читает HTML сверху вниз и только наткнувшись на ссылку, идёт за файлом. Из-за этого важная картинка или шрифт могут начать грузиться позже, чем хотелось бы. Подсказки браузеру (resource hints) решают проблему: они говорят «вот это понадобится скоро, начни заранее». Разберём основные.

Зачем подсказывать браузеру

Представьте шрифт, который описан глубоко в CSS. Браузер доберётся до него не сразу: сначала скачает HTML, потом CSS, разберёт его — и только тогда поймёт, что нужен шрифт. А текст всё это время ждёт. Если заранее сказать «нам точно нужен этот шрифт» — браузер начнёт его тянуть сразу, и текст появится быстрее. Подсказки не загружают лишнего, они лишь меняют порядок и время начала загрузки важных вещей.

Основные подсказки

preconnect
Заранее установить соединение с внешним доменом (шрифты, аналитика, CDN). Соединение — это время; сделав его заранее, экономим на момент, когда ресурс реально понадобится.
preload
Начать загрузку важного ресурса прямо сейчас, не дожидаясь, пока браузер сам до него дойдёт. Для главной картинки экрана или ключевого шрифта.
dns-prefetch
Заранее определить IP внешнего домена (более лёгкая версия preconnect). Полезно для доменов, к которым обратимся чуть позже.
prefetch
Подгрузить ресурс для вероятного следующего шага — например, страницу, на которую посетитель скорее всего перейдёт. С запасом, на будущее.
<link rel="preconnect" href="https://fonts.example.com">
<link rel="preload" as="image" href="/hero.jpg">

Где это реально помогает

⚠️ Подсказки — точечный инструмент, а не «чем больше, тем лучше». Если разметить preload десятком ресурсов, браузер начнёт тянуть их все сразу, конкурируя за канал, — и по-настоящему важное замедлится. Preload используют для одного-двух действительно критичных ресурсов, а не для всего подряд.

Как добавить

Подсказки — это строчки <link> в начале страницы. На CMS их часто проставляют плагины оптимизации (например, автоматически добавляют preconnect к доменам внешних шрифтов и preload для LCP-картинки). Вручную добавляют, когда точно знаете критичный ресурс. После добавления стоит свериться с PageSpeed: он подсказывает, какие ресурсы стоит загрузить раньше.

⚡
Resource hints — тонкая настройка поверх базовой оптимизации. Сначала стоит закрыть основное: рендер-блокировку, сжатие, ленивую загрузку и кэш.

Коротко

Подсказки браузеру (preload, preconnect, dns-prefetch, prefetch) меняют порядок загрузки в свою пользу: preconnect заранее устанавливает соединение с внешним доменом, preload раньше начинает грузить важный ресурс (LCP-картинку, ключевой шрифт), dns-prefetch заранее резолвит домен, prefetch подгружает ресурс для вероятного следующего шага. Главное правило — точечность: preload для одного-двух критичных ресурсов, иначе подсказки начнут мешать друг другу. Обычно их проставляют плагины оптимизации.

Частые вопросы

Что такое preload и preconnect?
Это подсказки браузеру (resource hints), которые ускоряют загрузку. Preconnect заранее устанавливает соединение с внешним доменом (шрифты, аналитика, CDN), чтобы не тратить время на это в нужный момент. Preload начинает загрузку важного ресурса (например, главной картинки или ключевого шрифта) сразу, не дожидаясь, пока браузер сам до него дойдёт.
Чем preload отличается от preconnect?
Preconnect только заранее устанавливает соединение с доменом, но не качает сам файл — это полезно, когда вы знаете, что обратитесь к внешнему сервису. Preload же начинает загружать конкретный ресурс немедленно. Грубо: preconnect готовит «дорогу» к домену, а preload уже везёт по ней нужный файл.
Когда использовать preload?
Для одного-двух действительно критичных ресурсов: главной картинки первого экрана (если это ваш LCP) и ключевого шрифта, чтобы текст не мерцал при загрузке. Также полезен preconnect к доменам шрифтов, аналитики и CDN. Не для всего подряд — иначе ресурсы начнут конкурировать за канал.
Можно ли навредить, добавив много preload?
Да. Если разметить preload десятком ресурсов, браузер начнёт тянуть их все одновременно, конкурируя за пропускной канал, и по-настоящему важное замедлится вместо ускорения. Подсказки — точечный инструмент: preload применяют к одному-двум критичным ресурсам, а не ко всему подряд.
Как добавить resource hints на сайт?
Это строки в начале страницы (в head). На популярных CMS их часто проставляют плагины оптимизации — автоматически добавляют preconnect к доменам внешних шрифтов и preload для LCP-картинки. Вручную добавляют, когда точно знаете критичный ресурс. Проверить пользу помогает PageSpeed.

🛠 Полезные инструменты

Анализ сайтаСинонимайзерПроверка ИКСПодбор ключейЧастотность запросовТошнота текстаПревью сниппетаПроверка индексации

📚 Читайте также