Подключение Google Fonts стандартным методом через API добавляет к LCP (Largest Contentful Paint) от 200 до 800 мс из-за лишних DNS-запросов и установления TCP-соединения. В условиях Core Web Vitals это критическая потеря, которая может снизить конверсию на 5-10% при медленном 3G-соединении.
Проблема внешних запросов и Render-Blocking
Когда браузер видит ссылку на fonts.googleapis.com, он останавливает отрисовку страницы, чтобы скачать CSS-файл, а затем сам файл шрифта. Это создает «скачок» контента (CLS) или белое окно. В среднем, один запрос к стороннему домену занимает от 100 до 300 мс только на DNS-резолвинг. Если на сайте подключено 3 начертания (Regular, Medium, Bold), суммарная задержка может достигать 1 секунды.
Кейс: при переходе с внешнего подключения Google Fonts на локальное хранение на сайте с трафиком 50к посещений/мес, показатель LCP улучшился с 3.2с до 2.4с. Экспертный вывод: любые внешние HTTP-запросы в
— это технический долг, который нужно закрывать в первую очередь.Локальный хостинг шрифтов: пошаговый профит
Единственный профессиональный способ оптимизации — скачивание шрифтов в формате WOFF2 и их размещение на своем сервере. WOFF2 сжимает данные на 30-50% эффективнее, чем старый WOFF или TTF. Вместо того чтобы грузить весь пакет шрифтов, нужно оставить только те начертания, которые реально используются в дизайне (обычно это 2-3 варианта). Один лишний вес шрифта (например, Italic, который используется в 1% текста) добавляет лишние 20-40 КБ к весу страницы.
Микро-кейс: удаление неиспользуемых начертаний Roboto (оставили только 400 и 700) сократило размер CSS-пакета со шрифтами с 120 КБ до 45 КБ. Экспертный вывод: используйте плагины вроде OMGF или делайте это вручную через @font-face, чтобы полностью исключить зависимость от серверов Google.
Свойства font-display и борьба с FOIT
Ошибка многих вебмастеров — игнорирование параметра font-display. По умолчанию браузеры используют «block», что вызывает эффект FOIT (Flash of Invisible Text): текст невидим, пока шрифт не загрузится. Переключение на font-display: swap заставляет браузер мгновенно показать системный шрифт, который затем заменится на Google Font. Это снижает показатель CLS, так как геометрия блоков фиксируется быстрее.
Практика показывает, что разница в восприятии скорости загрузки пользователем при использовании swap составляет около 400-600 мс. Экспертный вывод: swap — обязательный стандарт. Если вы видите «мигание» текста, подбирайте системный шрифт (Arial, Helvetica), максимально близкий по метрикам к вашему Google Font.
Прелоадинг критических шрифтов в WordPress
Чтобы шрифт появился на экране мгновенно, его нужно добавить в . Но здесь кроется ловушка: если запрелоадить 5-7 файлов, вы забьете канал загрузки и замедлите рендеринг основного HTML. Оптимальный диапазон — прелоад только для одного самого тяжелого шрифта, который используется в заголовке H1 (обычно Bold или Black).
Пример: прелоад одного файла .woff2 весом 30 КБ сокращает время появления первого значимого текста на 150-200 мс. Экспертный вывод: прелоадите только основной шрифт заголовков; остальные пусть грузятся асинхронно. Это тонкий баланс между скоростью и приоритетностью ресурсов.
Вывод
Мой вердикт: полностью откажитесь от подключения Google Fonts через API. Единственно верный путь — локальный хостинг в формате WOFF2 + свойство font-display: swap + прелоад одного основного начертания. Это дает гарантированное сокращение LCP на 300-700 мс. Начинайте с установки плагина OMGF для автоматизации или ручного переноса через CSS, если владеете кодом. Избегайте использования более 3-х вариантов начертания одного семейства — это избыточно и тормозит сайт.
