DNS Prefetch — это директива в HTML, которая просит браузер заранее определить IP-адрес указанного домена, пока пользователь ещё читает страницу. Что это значит на практике: браузер не ждёт момента запроса к стороннему серверу, а разрешает его адрес заблаговременно через тег <link rel=dns-prefetch>.
Работает подсказка на страницах, которые тянут ресурсы с внешних доменов: шрифты Google Fonts, аналитику, CDN, виджеты чатов. DNS-разрешение занимает от 20 до 120 мс на каждый новый хост, и ранний DNS-запрос убирает эту задержку из критического пути. Проверить эффект можно во вкладке Network в DevTools по колонке DNS Lookup.
§ 01Зачем нужен
Каждое подключение к новому домену начинается с DNS-разрешения: браузер переводит имя хоста в IP-адрес. Пока адрес не получен, соединение не открывается и ресурс не грузится. Предварительное разрешение доменов запускает этот шаг заранее, ещё до того как парсер дойдёт до тега <script> или <img> со сторонним источником. Выигрыш заметен на мобильных сетях, где задержка DNS выше из-за нестабильного соединения. Для чего нужно: сократить время до первого байта от внешнего ресурса без изменения самого кода загрузки.
§ 02Как настраивается
Тег ставится в <head> документа, по одной строке на каждый домен: <link rel=dns-prefetch href=//fonts.googleapis.com>. Указывается только протокол и хост, без пути. Порядок размещения — как можно выше, до подключения стилей и скриптов. Для доменов, к которым точно будет обращение в ближайшие миллисекунды, эта подсказка браузеру часто дополняется тегом <link rel=preconnect>, который делает ещё и TCP-рукопожатие с TLS. Комбинация preconnect плюс dns-prefetch как запасной вариант покрывает и старые браузеры.
TTFB стороннего домена −180мс — Медиапортал о финансах на WordPress с 12 внешними доменами (шрифты, аналитика, CDN видео) добавил dns-prefetch для fonts.googleapis.com и player.vimeo.com. Время до подключения к сторонним хостам сократилось на 180 мс за 3 недели. Замер через WebPageTest и CrUX-75th.
LCP 3.1 → 2.6 c — B2B SaaS-лендинг на Next.js подгружал чат Intercom и Segment с чужих доменов. Команда прописала dns-prefetch и preconnect для 4 ключевых хостов в head. LCP упал с 3.1 до 2.6 с за 4 недели, поле CrUX позеленело. Динамика по PSI и GA4 Web Vitals.
§ 03Где смотреть результат
Откройте DevTools, вкладку Network, и наведите курсор на строку стороннего ресурса — во всплывающей подсказке видно фазы Queueing, DNS Lookup, Initial connection. Если ранний DNS-запрос отработал, значение DNS Lookup у ресурса будет близко к нулю: адрес уже в кэше. WebPageTest показывает то же самое на waterfall-диаграмме отдельным цветом для DNS. PageSpeed Insights напрямую этот механизм ускорения подключения не измеряет, но его эффект отражается на метрике LCP, если внешний домен отдаёт ключевой контент.
§ 04Подводные камни
Список доменов раздувать нельзя. Браузер выполняет разрешение параллельно, и десяток лишних хостов отнимает ресурсы у по-настоящему нужных запросов. Ставьте resource hints только на домены, к которым обращение гарантировано. Второй момент: для домена, который уже указан в preconnect, дублировать его в dns-prefetch избыточно на современных браузерах. Отличается ситуация с приватностью — предзагрузка DNS раскрывает провайдеру список сторонних хостов ещё до клика. И работает подсказка как рекомендация: браузер вправе её проигнорировать при нехватке ресурсов.