PageSpeed пишет про сторонние ресурсы, шрифты и Метрика тянутся с задержкой, а в сети советуют вставить код в header — страшно сломать сайт. Мастер по маникюру уже попала в ловушку: кеш добавил dns-prefetch, с YouTube скопировали preconnect на все домены, в шапке пятнадцать ссылок. За вечер вы получите понятный результат: откроете код страницы, уберете дубли, настройте три подсказки браузеру через дочернюю тему и проверьте счетчик и форму заявки.
dns-prefetch и preconnect — это короткие строки в шапке сайта, которые говорят браузеру заранее узнать адрес чужого сервера или даже открыть соединение. WordPress с версии 4.6 сам добавляет dns-prefetch для внешних скриптов и стилей, а preconnect для шрифтов с fonts.gstatic.com чаще нужно дописать вручную с атрибутом crossorigin. Правило одно: один домен — одна подсказка, не больше пяти на страницу.
Это не программирование ради программирования. Речь о трех адресах, которые реально тормозят салон, мастерскую или магазин на WordPress: Google Fonts, счетчик mc.yandex.ru и CDN картинок. Одна аккуратная правка в functions.php дочерней темы вместо десятка плагинов. Ниже — сравнение подсказок, аудит кода до правок, готовый фрагмент PHP и проверка в Chrome без команды разработчиков.
- Сравните dns-prefetch и preconnect простыми словами
- Найдите в коде страницы лишние подсказки до правок
- Добавьте preconnect к шрифтам и prefetch к Метрике в дочерней теме
- Уберите дубли в кеш-плагине и не плодите preconnect
- Проверьте Network, Метрику и форму заявки после сохранения
- Что дальше
- Частые вопросы
- Безопасно ли добавлять preconnect в WordPress?
- Влияет ли dns-prefetch на SEO?
- Сколько resource hints достаточно на странице?
- Нужен ли отдельный плагин для dns-prefetch?
- Чем отличается prefetch и preload от dns-prefetch?
- Забыли crossorigin у шрифтов — что будет?
- Метрика перестала считать после правки — что проверить?
Сравните dns-prefetch и preconnect простыми словами
Представьте доставку: dns-prefetch — это только узнать адрес склада на карте. preconnect — уже выехать к воротам и договориться о пропуске. Для файла шрифта с fonts.gstatic.com часто нужен именно preconnect с crossorigin: иначе браузер сделает лишь DNS, как предупреждает MDN. Для счетчика Яндекс Метрики с mc.yandex.ru обычно хватает dns-prefetch, если домен еще не попал в автосписок ядра.
| Подсказка | Что делает браузер | Когда уместно на сайте услуг |
|---|---|---|
| dns-prefetch | Только резолвинг DNS, оценка часто 10-120 мс на новый домен | Метрика, CDN картинок, редкие виджеты |
| preconnect | DNS + TCP + TLS, дороже по ресурсам телефона | Один критичный origin: fonts.gstatic.com для веб-шрифтов |
Схема загрузки Google Fonts: запрос CSS с fonts.googleapis.com → файлы .woff2 с fonts.gstatic.com → preconnect имеет смысл ко второму шагу, не ко всему интернету подряд.
Сюрприз для многих гайдов: WordPress с 4.6 уже выводит dns-prefetch для всех внешних хостов, подключенных через стандартные функции темы и плагинов. Ручной prefetch к тому же домену — дубль. preconnect ядро почти не заполняет само, поэтому для шрифтов ручная строка все еще оправдана.
Найдите в коде страницы лишние подсказки до правок
Типичная ошибка — копировать из статьи список из двадцати доменов и не глянуть, что уже есть. Сначала аудит, потом одна правка.
- На главной: правый клик → Просмотр кода страницы (View Source).
- Найдите rel=»dns-prefetch» и rel=»preconnect», выпишите домены.
- Сверьте с реальными сервисами: шрифты, Метрика, Jetpack CDN вроде i0.wp.com.
- Отметьте дубли и сверьте список с настройками WP Rocket, LiteSpeed или Perfmatters — там часто свой prefetch.
На практике кеш-плагин и ядро уже покрыли mc.yandex.ru, а владелец сайта добавил тот же домен в functions.php. Браузеру не быстрее, зато разметка раздута. Правило из Make WordPress Core: подсказок не должно быть слишком много, особенно preconnect на мобильном.
Добавьте preconnect к шрифтам и prefetch к Метрике в дочерней теме
Боль «не понимаю, что вставлять в header» закрывается фильтром wp_resource_hints в дочерней теме, а не сырым echo в wp_head. Так правка переживет обновление родительской темы. Если дочерней темы еще нет, сначала установите дочернюю тему и сделайте копию functions.php на всякий случай.
add_filter( ‘wp_resource_hints’, function ( $urls, $relation_type ) {
if ( ‘preconnect’ === $relation_type ) {
$urls[] = array(
‘href’ => ‘https://fonts.gstatic.com’,
‘crossorigin’ => ‘anonymous’,
);
}
if ( ‘dns-prefetch’ === $relation_type ) {
$urls[] = ‘https://mc.yandex.ru’;
}
return $urls;
}, 10, 2 );
Вставьте блок в конец functions.php дочерней темы, сохраните. Если mc.yandex.ru уже есть в View Source после шага аудита, строку с dns-prefetch для Метрики не добавляйте. Для CDN картинок добавьте только тот хост, который реально видите в Network, а не весь список из чужого гиста на GitHub.
Workflow проверки: бэкап functions.php → правка → очистка кеша плагина и браузера Ctrl+F5 → View Source → DevTools Network с фильтром gstatic и yandex → тестовая заявка с сайта → отладка счетчика в интерфейсе Метрики.
Уберите дубли в кеш-плагине и не плодите preconnect
Когда и ядро, и WP Rocket, и ваш код добавляют один домен, мобильная страница платит за лишние соединения. Откройте раздел DNS Prefetch или Preconnect в настройках кеша и снимите галочки с доменов, которые вы уже ведете через тему. Альтернатива — оставить список только в плагине и не дублировать в PHP, но тогда при смене хостинга легко забыть перенести настройки.
Не ставьте отдельный плагин dns-prefetch поверх ядра: на GitHub есть обертки вроде littlebizzy/dns-prefetch, они удобны, но риск второго слоя дублей выше, чем у одного фильтра в дочерней теме. Если шрифты уже лежат на вашем сервере, preconnect к fonts.gstatic.com можно убрать — подсказка нужна только пока файлы качаются с Google.
Проверьте Network, Метрику и форму заявки после сохранения
Успех выглядит так: в коде страницы ровно одна пара подсказок для нужных доменов, без десятка одинаковых preconnect; в Network при первой загрузке соединение к fonts.gstatic.com и mc.yandex.ru стартует раньше, чем раньше; сайт открывается без ошибок, заявка уходит, счетчик в Метрике видит визит; Lighthouse не показывает новых ошибок политики CSP.
- Chrome F12 → Network, галочка Disable cache, обновите страницу.
- Фильтр gstatic: смотрите столбец времени до первого байта файла шрифта.
- Фильтр yandex: tag.js не должен ждать DNS в последний момент.
- Отправьте тестовую заявку с главной или страницы услуг и в Метрике убедитесь в режиме отладки, что счетчик на месте.
Честно говоря, прирост в секундах редко бьет рекорды, зато исчезает ощущение белого экрана из-за шрифтов и подвисания аналитики. Если подсказок стало больше пяти — урежьте список и перепроверьте мобильный отчет PageSpeed. После правок имеет смысл свериться с настройкой кеширования WordPress, иначе старый head может еще неделю отдаваться из кеша.
Не хотите трогать PHP сами — опишите ситуацию в форме на сайте (MAX, VK, WhatsApp, Телеграм) или посмотрите услуги по ускорению и настройке WordPress. Мы не обещаем фиксированный процент ускорения, но уберем кашу в head и оставим рабочие заявки.
Что дальше
- Сохраните скрин View Source до и после правки.
- Оставьте не больше трех-пяти подсказок на весь head.
- Через неделю сравните мобильный PageSpeed и поведение формы.
Еще материалы по скорости и аналитике — в разделе статей и в канале Телеграм.
Материал проверен: Андрей Дикий (сайты на WordPress и продвижение статьями, SEO/GEO).
Источники на 2026-10-06: WordPress Developer Resource — wp_resource_hints, Make WordPress Core 4.6/4.7, MDN dns-prefetch и preconnect, документация Яндекс Метрики для WordPress, wp-kama.ru по resource hints, Perfmatters DNS Prefetch; LSI из SERP октябрь 2026 (Яндекс Вордстат MCP недоступен на дату прогона).
Частые вопросы
Безопасно ли добавлять preconnect в WordPress?
Да, если правите дочернюю тему, делаете бэкап functions.php и не добавляете десяток доменов подряд. Ошибка в синтаксисе PHP может вывести белый экран — поэтому сначала копия файла, потом три-пять доменов максимум.
Влияет ли dns-prefetch на SEO?
Напрямую на позиции не влияет. Косвенно помогает скорости первого экрана и спокойной загрузке шрифтов и счетчика, что важно для посетителей и отчетов PageSpeed, но не заменяет контент и нормальный хостинг.
Сколько resource hints достаточно на странице?
Ориентир — три-пять подсказок на весь сайт: один preconnect к fonts.gstatic.com при Google Fonts, dns-prefetch к Метрике если домена нет в авто-списке, плюс ваш CDN картинок при необходимости. Больше preconnect на телефоне часто вредит, предупреждает MDN.
Нужен ли отдельный плагин для dns-prefetch?
Обычно нет: ядро WordPress уже prefetch-ит внешние скрипты и стили. Плагин имеет смысл только если вы сознательно ведете весь список в одном интерфейсе кеша и следите, чтобы не было дубля с темой.
Чем отличается prefetch и preload от dns-prefetch?
dns-prefetch и preconnect только подсказывают сеть заранее. prefetch и preload качают другие ресурсы по другим правилам и легко перегружают мобильный канал. В этом гайде сознательно узкий фокус: только dns-prefetch и preconnect в head.
Забыли crossorigin у шрифтов — что будет?
preconnect к fonts.gstatic.com без crossorigin часто дает лишь DNS, файл шрифта все равно ждет полного рукопожатия. Добавьте crossorigin anonymous в массив preconnect, как в официальном примере WordPress 4.7+.
Метрика перестала считать после правки — что проверить?
Убедитесь, что не трогали сам код счетчика, очистите кеш, откройте сайт в режиме инкогнито и проверьте Network на блокировку tag.js. Подсказка dns-prefetch не должна ломать CSP; если в консоли ошибки политики безопасности, откатите functions.php из бэкапа.
