Подключение Google Fonts стандартным методом добавляет до 3-4 лишних HTTP-запроса и увеличивает время отрисовки первого контента (FCP) на 300-800 мс. В условиях Core Web Vitals даже задержка в 0.5 секунды может стоить 2-5% конверсии из-за эффекта «прыгающего» текста (CLS).
Проблема внешних запросов и Render-Blocking
Стандартный вызов шрифтов через link rel=stylesheet заставляет браузер сначала скачать CSS-файл Google, затем сам файл шрифта, и только потом отрисовать текст. Это создает критическую цепочку зависимостей. В среднем, один шрифт весит от 20 до 150 КБ в зависимости от начертаний. Если вы подключаете 3 варианта веса (Regular, Medium, Bold), суммарный вес может достигать 400 КБ, что критично для мобильного 3G-соединения.
Кейс: при переходе с внешних Google Fonts на локальные файлы на сайте с трафиком 10к посещений/мес LCP (Largest Contentful Paint) сократился с 2.8с до 2.1с. Экспертный вывод: внешние запросы к серверам Google — это неоправданный риск для PageSpeed, который легко устраняется локальным хостингом.
Локальный хостинг шрифтов: пошаговый профит
Перенос шрифтов на свой сервер полностью исключает DNS-запросы к сторонним доменам (fonts.googleapis.com и fonts.gstatic.com). Для реализации используйте плагины вроде OMGF или ручную загрузку в папку /wp-content/themes/your-theme/fonts/. Важно использовать формат WOFF2, который сжимает данные на 30-50% эффективнее старого WOFF.
Сравнение: запрос к Google Fonts занимает ~150-300 мс на DNS-резолв и TCP-соединение. Локальный запрос через HTTP/2 или HTTP/3 выполняется почти мгновенно в рамках одного соединения с сервером. Мой вердикт: локальный хостинг — единственный профессиональный стандарт для SEO оптимизации сайта на WordPress с нуля.
Оптимизация через font-display: swap
Главная проблема Google Fonts — эффект FOIT (Flash of Invisible Text), когда пользователь видит пустой экран, пока шрифт не загрузится. Добавление параметра &display;=swap в URL или свойства font-display: swap; в CSS заставляет браузер сразу показать системный шрифт, а затем заменить его на брендовый.
Нюанс: при неправильном подборе фолбэк-шрифта (например, Arial вместо Roboto) происходит скачок верстки (CLS), так как ширина символов различается. Чтобы избежать этого, используйте CSS-свойство size-adjust для подгонки системного шрифта под размер Google Font. Экспертный вывод: swap обязателен, но только в связке с точным подбором запасного шрифта.
Сокращение наборов символов и Subset
По умолчанию Google Fonts грузит все возможные глифы, включая редкие символы разных языков. Для русскоязычного сайта достаточно подмножества latin и cyrillic. Ограничение набора символов через параметр ⊂=cyrillic,latin или использование инструментов типа Google Webfonts Helper позволяет сократить вес файла шрифта с 120 КБ до 30-40 КБ.
Пример: удаление лишних начертаний (например, замена 5 вариантов веса на 2 основных: 400 и 700) экономит до 200 КБ трафика на каждой странице. Мой вывод: избыточность в типографике — главный враг скорости; оставляйте только те веса, которые реально используются в макете.
Вывод
Идеальная стратегия: полный отказ от внешних ссылок в пользу локального хостинга шрифтов в формате WOFF2 с обязательным параметром font-display: swap. Начинайте с аудита текущих шрифтов через Chrome DevTools (вкладка Network), удаляйте неиспользуемые начертания и ограничивайте subset только кириллицей и латиницей. Избегайте плагинов-оптимизаторов «в один клик», если они не позволяют контролировать формат файла и метод подключения, так как часто они создают лишние редиректы.
