Загрузка Google Fonts напрямую с серверов Google добавляет к LCP (Largest Contentful Paint) от 200 до 800 мс из-за лишних DNS-запросов и установления TCP-соединения. В условиях Core Web Vitals это критическая потеря, которая может снизить конверсию сайта на 5-10% при медленном соединении.
Проблема внешних запросов и Render-Blocking
Стандартное подключение шрифтов через @import или создает цепочку зависимостей: браузер сначала загружает CSS, затем обнаруживает ссылку на шрифт, делает запрос к fonts.googleapis.com, а после — к fonts.gstatic.com. В итоге страница «мигает» (эффект FOIT/FOUT), а отрисовка контента задерживается на 300-600 мс.
Пример: сайт на Elementor с 3 разными начертаниями Roboto генерирует до 6 дополнительных HTTP-запросов. Даже при пинге в 50 мс, суммарный оверхед на установку TLS-соединения с Google-серверами съедает значительную часть бюджета LCP. Мой опыт показывает, что устранение этих запросов поднимает оценку PageSpeed Insights на 10-15 пунктов в мобильной версии.
Экспертный вывод: внешние шрифты — это лишний риск. Любая задержка на стороне стороннего CDN бьет по вашим метрикам.
Локальный хостинг шрифтов: технический профит
Перенос шрифтов на собственный сервер (Self-hosting) позволяет использовать HTTP/2 или HTTP/3 (через сервер), где все ресурсы грузятся одним потоком. Это сокращает время до первой отрисовки текста (First Contentful Paint) в среднем на 150-400 мс. Для реализации используйте формат WOFF2 — он сжимает данные на 30-50% эффективнее, чем старый WOFF.
Кейс: переход с Google Fonts на локальные WOFF2-файлы для интернет-магазина на WordPress сократил количество внешних запросов с 4 до 0. Результат: LCP упал с 2.8с до 2.1с. Важно: не загружайте все начертания (Light, Medium, Bold, Black), если используете только два. Каждое лишнее начертание весит от 20 до 70 Кб.
Экспертный вывод: используйте только формат WOFF2 и строго ограниченный набор начертаний. Все остальное — лишний вес.
Оптимизация через font-display: swap
Главная ошибка новичков — игнорирование свойства font-display. По умолчанию браузер скрывает текст до полной загрузки шрифта (FOIT). Директива swap приказывает браузеру мгновенно показать текст системным шрифтом, а затем заменить его на кастомный. Это убирает «белое пятно» при загрузке и улучшает пользовательский опыт.
Нюанс: при резком переключении с Arial на Montserrat происходит «скачок» верстки (CLS — Cumulative Layout Shift), что может добавить 0.1-0.2 к метрике сдвига. Чтобы этого избежать, подбирайте системный шрифт-заглушку, максимально близкий по геометрии к целевому. Это требует ручного подбора размеров в CSS (например, adjustment of letter-spacing).
Экспертный вывод: font-display: swap обязателен, но требует калибровки системного шрифта, чтобы избежать штрафов за CLS.
Инструменты автоматизации и подводные камни
Для WordPress есть два пути: плагины (OMGF, Autoptimize) или ручной перенос. Плагины удобны, но часто добавляют лишний PHP-код, который замедляет генерацию страницы на 20-50 мс. Ручной перенос через @font-face в style.css — самый чистый метод. При ручной настройке важно прописать preload для основного шрифта заголовков в
, чтобы браузер начал загрузку до парсинга CSS.Риск: использование тяжелых плагинов-конструкторов (Elementor, Divi) часто перебивает ваши настройки шрифтов своими встроенными стилями. В таких случаях приходится использовать !important в CSS или отключать Google Fonts в настройках темы, чтобы избежать дублирования запросов.
Экспертный вывод: ручной перенос + preload — золотой стандарт. Плагины допустимы только для тех, кто не хочет лезть в код, но ценой микро-задержек сервера.
Вывод
Мой вердикт: полностью откажитесь от внешних ссылок Google Fonts. Правильный стек оптимизации: локальный хостинг в формате WOFF2 → ограничение до 2-3 начертаний → использование font-display: swap → preload для критического шрифта. Начните с проведения Технический SEO-аудит WordPress, чтобы выявить все скрытые запросы, и перенесите шрифты вручную. Избегайте «комбайнов» для оптимизации, которые делают всё и сразу, но перегружают базу данных WordPress.