Подключение Google Fonts стандартным методом через API добавляет к времени отрисовки страницы (LCP) от 200 до 800 мс из-за лишних DNS-запросов и TCP-соединений. В условиях Core Web Vitals это критическая потеря, которая может снизить конверсию на 3-5% при медленном соединении 3G.
Проблема внешних запросов и Render-Blocking
Стандартный вызов шрифтов через @import или заставляет браузер сначала загрузить CSS-файл Google, затем выполнить DNS-запрос к серверам fonts.gstatic.com и только потом скачать сам шрифт. В итоге страница «замирает» на 0.3–0.7 сек, либо происходит неприятный скачок контента (CLS), когда системный шрифт внезапно меняется на дизайнерский.
Кейс: на проекте с 4 начертаниями Roboto время до первого отображения текста (FCP) составляло 1.8 сек. После удаления внешних вызовов и перехода на локальный хостинг FCP сократился до 1.2 сек. Экспертный вывод: любые внешние HTTP-запросы в Critical Path — это технический долг, который нужно закрывать в первую очередь при SEO оптимизации сайтов на WordPress.
Локальный хостинг: WOFF2 и сжатие
Единственный профессиональный способ оптимизации — загрузка шрифтов на свой сервер в формате WOFF2. Этот формат сжимает данные на 30-50% эффективнее, чем старый WOFF или TTF. Например, один вес шрифта в TTF может весить 120 КБ, тогда как WOFF2 — всего 30-45 КБ.
- Ошибка: подключать все начертания (Light, Regular, Medium, Bold, Black).
- Норма: использовать максимум 2-3 веса (например, 400 и 700).
Микро-вывод: использование более 3 вариаций одного шрифта неоправданно раздувает вес страницы и замедляет ее отрисовку без видимого профита для дизайна.
Оптимизация через font-display: swap
Чтобы пользователь не видел пустой экран (FOIT) во время загрузки шрифта, необходимо прописать свойство font-display: swap в @font-face. Это приказывает браузеру мгновенно показать текст системным шрифтом и заменить его на Google Font сразу после загрузки.
Практика показывает, что без swap показатель LCP (Largest Contentful Paint) может быть выше нормы на 0.5 сек просто потому, что браузер «ждал» шрифт. Экспертный вывод: swap обязателен, но требует тщательного подбора фолбэк-шрифта (например, Arial для Roboto), чтобы минимизировать сдвиг верстки при замене.
Инструментарий: плагины против ручного кода
Для WordPress есть два пути: плагины (OMGF, Autoptimize) или ручная правка CSS. Плагины удобны, но часто добавляют лишние JS-скрипты для управления кэшем. Ручная установка через файл style.css и папку /fonts/ сокращает количество запросов к базе данных и исключает лишние циклы выполнения PHP.
Сравнение: использование тяжелого плагина для шрифтов может добавить 10-20 КБ к размеру HTML-документа. Ручная оптимизация дает «чистый» код. Мой выбор — ручная загрузка WOFF2, так как шрифты меняются раз в год, и автоматизация здесь избыточна.
Вывод
Мой вердикт: полностью откажитесь от подключения Google Fonts через API. Единственно верная стратегия — скачивание нужных начертаний в формате WOFF2, их размещение на своем сервере и прописка font-display: swap. Начните с анализа текущих шрифтов: удалите все неиспользуемые веса, оставьте 2-3 основных. Это гарантированно снизит время LCP и уберет ошибки CLS в Google PageSpeed Insights.