Preconnect — это директива <link rel=preconnect>, которой страница просит браузер заранее договориться со сторонним доменом: разрешить имя через DNS, открыть TCP-соединение и провести TLS-рукопожатие. Что это значит на практике — к моменту, когда понадобится шрифт или скрипт с чужого домена, канал уже прогрет, и запрос уходит без задержки на установку связи.
Раннее подключение окупается там, где критичные ресурсы лежат на отдельных доменах: Google Fonts, CDN со стилями, домен аналитики. Установка одного соединения со сторонним хостом складывается из трёх шагов — DNS, TCP, TLS — и на мобильной сети это заметный кусок времени до отрисовки. Прогрев этих шагов до запроса сокращает путь к главному контенту и напрямую влияет на LCP. Проверить эффект помогает вкладка Network в DevTools и отчёт PageSpeed Insights.
§ 01Зачем нужен
Ресурсная подсказка нужна, когда важный ресурс приходит с домена, отличного от основного. Браузер узнаёт про такой домен только в момент, когда парсер доходит до ссылки на файл — и лишь тогда начинает DNS, TCP и TLS. На сторонних хостах эта цепочка занимает сотни миллисекунд. Предварительное соединение с доменом снимает эту паузу: DNS, TCP и TLS проходят параллельно с разбором HTML. Типовые кандидаты — fonts.gstatic.com, домен CDN, хост платёжного виджета. Для чего нужно: убрать простой перед загрузкой того, что рисует первый экран.
§ 02Как настраивается
Подсказка добавляется тегом в <head>: <link rel=preconnect href=https://fonts.gstatic.com>. Для кросс-доменных шрифтов нужен атрибут crossorigin, иначе браузер откроет второе соединение и первое пропадёт впустую. Ставить приём стоит только для доменов, с которых грузятся ресурсы первого экрана — на каждое соединение тратятся ресурсы клиента. Список ограничивают 3–4 хостами. Для менее срочных доменов подойдёт более лёгкий dns-prefetch, который резолвит только имя.
LCP 3.8→2.4 c — Интернет-магазин косметики на Shopify добавил preconnect к CDN шрифтов и домену аналитики в head. LCP упал с 3.8 до 2.4 с за 4 недели на мобайле. Замер через PSI и CrUX-75th, отказы снизились на 9%.
TTFB стороннего −280мс — B2B SaaS-платформа с MRR $180k прописала preconnect к Stripe и Google Fonts перед загрузкой чекаута. Соединение со сторонним доменом ускорилось на 280мс за 3 недели. Динамика по WebPageTest и полю connect в CrUX.
§ 03Как проверить, что работает
Открой DevTools, вкладку Network, и посмотри тайминги соединения для нужного домена: при сработавшем прогреве блоки Initial connection, SSL и DNS Lookup у первого запроса к хосту будут нулевыми или почти нулевыми. PageSpeed Insights и Lighthouse в разделе диагностики подсказывают домены-кандидаты через аудит Preconnect to required origins. Отличается проверка от dns-prefetch тем, что здесь в таймингах обнуляется не только DNS, но и TCP с TLS.
§ 04Подводные камни
Лишние подключения вредят: браузер держит открытые соединения около 10 секунд, и десяток преконнектов к доменам, которые не нужны на старте, отбирают канал у критичных ресурсов. Забытый crossorigin для шрифтов — частая ошибка: соединение открывается, но не переиспользуется, и выигрыш обнуляется. Приём не ускоряет сам ответ сервера и не помогает ресурсам с основного домена — там соединение уже установлено. Держи список коротким и включай в него только хосты первого экрана.