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

Preload и preconnect

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

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

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

Когда начинает грузиться ключевой шрифт Без preload HTML CSS шрифт обнаружен поздно С preload шрифт грузится сразу — текст появится раньше
preload «вытаскивает» важный ресурс в начало, не дожидаясь, пока браузер до него дойдёт.

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

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 — тонкая настройка поверх базовой оптимизации. Сначала стоит закрыть основное: рендер-блокировку, сжатие, ленивую загрузку и кэш.

preconnect или dns-prefetch

Эти две подсказки похожи, но отличаются глубиной подготовки. Когда браузер обращается к внешнему домену, он делает несколько шагов: узнаёт его IP (DNS), устанавливает соединение и согласует шифрование (для https). dns-prefetch выполняет заранее только первый шаг — определение IP; это легко и почти бесплатно, подходит для доменов, к которым вы, может быть, обратитесь. preconnect идёт дальше и заранее проделывает всю подготовку, включая соединение и TLS, — это дороже, поэтому его берегут для доменов, к которым точно и скоро обратятся (шрифты, ключевая аналитика). Практика: для критичного внешнего домена — preconnect, для «вероятных» — более лёгкий dns-prefetch. Не ставьте preconnect к десятку доменов: открытые впрок соединения тоже расходуют ресурсы.

fetchpriority: расставить приоритеты

Есть ещё одна, более свежая подсказка — атрибут fetchpriority. Он не запускает загрузку раньше, а меняет приоритет среди того, что и так грузится. fetchpriority="high" говорит «этот ресурс важнее остальных, дай ему канал в первую очередь» — его ставят главной картинке первого экрана (LCP), чтобы она опередила второстепенные изображения. fetchpriority="low" наоборот понижает приоритет неважного — например, картинок глубоко внизу страницы. В связке с preload это мощный дуэт: preload начинает грузить ключевой ресурс раньше, а fetchpriority high гарантирует, что он не уступит канал менее важным. Браузеры расставляют приоритеты и сами, но подсказка помогает в спорных случаях.

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

Подсказки легко применить неправильно, и тогда они либо не работают, либо вредят. Самая частая — preload без указания типа: атрибут as обязателен («as=image», «as=font», «as=style»), иначе браузер не поймёт, что и с каким приоритетом грузить, и может скачать ресурс дважды. Для шрифтов забывают crossorigin — без него предзагруженный шрифт не «совпадёт» с тем, что запросит CSS, и загрузится повторно. Ещё ошибка — preload ресурса, который на самом деле не нужен на первом экране: вы отнимаете канал у действительно важного. И перебор: чем больше «срочных» подсказок, тем меньше смысла в каждой. Правило прежнее — точечно и по делу.

Коротко

Подсказки браузеру (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.
Чем preconnect отличается от dns-prefetch?
dns-prefetch выполняет заранее только определение IP домена — это легко и почти бесплатно, для «вероятных» доменов. preconnect проделывает всю подготовку: DNS, соединение и согласование шифрования — это дороже, поэтому его берегут для доменов, к которым точно и скоро обратятся (шрифты, ключевая аналитика).
Почему preload иногда грузит ресурс дважды?
Чаще всего из-за пропущенного атрибута as (as=image, as=font, as=style) — без него браузер не понимает тип ресурса. Для шрифтов нужен ещё crossorigin, иначе предзагруженный шрифт не совпадёт с тем, что запросит CSS, и скачается повторно. Указывайте корректный as и crossorigin для шрифтов.

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

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

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