Как отследить и удалить проблемы с загрузкой внешних шрифтов в WordPress

Проблемы с загрузкой внешних шрифтов и их влияние на производительность сайта

Внешние шрифты, такие как Google Fonts, часто замедляют загрузку страницы из-за дополнительных запросов к внешним серверам. Это негативно влияет на показатели Core Web Vitals и общую скорость сайта. Особенно это критично для сайтов на WordPress, где темы и плагины могут автоматически подключать шрифты без контроля.

Диагностика проблем с внешними шрифтами

Для выявления проблем с загрузкой шрифтов используйте следующие инструменты и методы:

• Chrome DevTools Network: отслеживайте запросы к доменам шрифтов (fonts.googleapis.com, fonts.gstatic.com).
• PageSpeed Insights: смотрите рекомендации по оптимизации шрифтов, например "Устранить блокирующую загрузку шрифтов".
• Плагины для диагностики: Query Monitor покажет запросы и время загрузки ресурсов.

Если вы видите, что шрифты загружаются с большим временем отклика или блокируют отображение контента, значит проблема актуальна.

Пошаговое решение: удаление и локальная загрузка внешних шрифтов

1. Определение источника подключения шрифтов

Проверьте, откуда подключаются шрифты. Обычно шрифты добавляются в functions.php темы или через плагины. Используйте поиск по проекту по строкам fonts.googleapis.com или @import url.

2. Отключение загрузки внешних шрифтов

Если шрифты подключаются темой, отключите их через дочернюю тему. Например, удалите действие, если шрифты подключаются через wp_enqueue_style:

function remove_external_fonts() {
    wp_dequeue_style('theme-google-fonts');
    wp_deregister_style('theme-google-fonts');
}
add_action('wp_enqueue_scripts', 'remove_external_fonts', 20);

Замените 'theme-google-fonts' на название хендла вашего стиля.

3. Локальная загрузка шрифтов

Загрузите нужные файлы шрифтов (woff2, woff) с Google Fonts через https://google-webfonts-helper.herokuapp.com/ и разместите в папке темы, например /fonts/.

Добавьте в CSS локальные пути:

@font-face {
  font-family: 'Roboto';
  src: url('/wp-content/themes/your-theme/fonts/roboto-v20-latin-regular.woff2') format('woff2'),
       url('/wp-content/themes/your-theme/fonts/roboto-v20-latin-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

4. Подключение локальных стилей

Зарегистрируйте и подключите локальный CSS с шрифтами в functions.php:

function enqueue_local_fonts() {
    wp_enqueue_style('local-fonts', get_stylesheet_directory_uri() . '/fonts/fonts.css', array(), null);
}
add_action('wp_enqueue_scripts', 'enqueue_local_fonts');

Проверка результата после внедрения

• Очистите кэш браузера и кэш плагинов (например, WP Rocket).
• Загрузите сайт и откройте Chrome DevTools > Network, убедитесь, что запросы к fonts.googleapis.com и fonts.gstatic.com отсутствуют.
• Проверьте PageSpeed Insights — показатель блокировки шрифтов должен снизиться.
• Проверьте визуальное отображение текста на всех устройствах и браузерах.

Частые ошибки и способы их исправления

• Шрифты не отображаются после локальной загрузки: проверьте правильность путей в CSS и наличие файлов на сервере.
• Шрифты подключаются повторно: убедитесь, что удалили или отключили все подключения из темы и плагинов.
• Поврежденные файлы шрифтов: используйте только проверенные источники, например Google Webfonts Helper.
• Кэш мешает обновлению: очистите кэш плагинов и CDN.

Практические советы по безопасности и производительности

• Локальная загрузка шрифтов снижает зависимость от сторонних сервисов и ускоряет загрузку.
• Используйте формат woff2 для лучшей компрессии и поддержки современными браузерами.
• Добавляйте font-display: swap; для улучшения UX при загрузке шрифтов.
• Регулярно проверяйте обновления шрифтов и обновляйте локальные файлы.

Сравнение вариантов загрузки шрифтов