WPINC: оптимизация загрузки шрифтов в WordPress для ускорения сайта

Автор: Максим Комаров | Опубликовано: 30.11.2025

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

Почему важно оптимизировать загрузку шрифтов в WordPress

Часто разработчики и владельцы сайтов подключают шрифты без учёта влияния на производительность. Внешний запрос к серверу шрифтов увеличивает время ответа, блокирует рендеринг страницы и может ухудшить Core Web Vitals — важные метрики Google для ранжирования.

Оптимизация шрифтов помогает:

Сократить время загрузки страницы;
Уменьшить количество запросов к сторонним сервисам;
Избежать FOUT (Flash of Unstyled Text) — когда текст отображается с запасным шрифтом, а потом меняется на нужный;
Улучшить SEO и поведенческие факторы.

Основные методы оптимизации загрузки шрифтов в WordPress

1. Предварительная загрузка шрифтов (Preload)

Preload позволяет браузеру заранее запросить шрифт, который будет нужен для рендеринга страницы, ещё до того, как он встретится в CSS. Это ускоряет отображение текста.

Для добавления preload в WordPress можно использовать хук wp_head:

function wpinc_preload_fonts() {
    echo '<link rel="preload" href="' . esc_url(get_template_directory_uri() . '/fonts/myfont.woff2') . '" as="font" type="font/woff2" crossorigin>';
}
add_action('wp_head', 'wpinc_preload_fonts');

Замените путь на ваш файл шрифта. Обратите внимание на атрибут crossorigin, он нужен для корректной загрузки, если шрифт с сервера, отличного от домена сайта.

2. Локальное хостинг шрифтов

Если вы используете Google Fonts или другие сервисы, рекомендуется скачать шрифты и разместить их на своём сервере. Это снижает зависимость от внешних сервисов и позволяет лучше контролировать кеширование.

Для этого можно использовать плагин OMGF (Optimize My Google Fonts) или вручную скачать файлы с google-webfonts-helper.

После скачивания разместите шрифты в папке темы, например /fonts/, и подключите их через CSS:

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

Атрибут font-display: swap; обеспечивает отображение запасного шрифта, пока основной загружается, исключая задержки.

3. Использование плагинов для оптимизации шрифтов

Существуют готовые решения, которые автоматизируют процесс:

OMGF — скачивает и локально хостит Google Fonts, автоматически обновляет CSS.
Perfmatters — платный плагин с функцией отключения ненужных шрифтов и оптимизацией загрузки.
Autoptimize — объединяет и минимизирует CSS, а также позволяет добавить preload для шрифтов.

Выбор зависит от ваших задач и бюджета. Для большинства сайтов достаточно OMGF с правильной настройкой.

Разбор типичных проблем при загрузке шрифтов и их решение

FOUT и FOIT: как избежать

FOUT (Flash of Unstyled Text) возникает, когда браузер сначала показывает текст с запасным шрифтом, а потом меняет его на нужный. FOIT (Flash of Invisible Text) — когда текст вообще не отображается, пока шрифт не загрузится.

Чтобы избежать, используйте font-display: swap; в @font-face. Также preload и локальный хостинг шрифтов помогают снизить вероятность FOIT.

Проблемы с кешированием

Если шрифты загружаются постоянно, это может быть из-за отсутствия правильных заголовков кеширования. Настройте сервер так, чтобы отдавать шрифты с заголовками Cache-Control на длительный срок, например 1 месяц или больше.

Пример для Apache в .htaccess:

<IfModule mod_expires.c>
  ExpiresByType font/woff2 "access plus 1 month"
  ExpiresByType font/woff "access plus 1 month"
</IfModule>

Для Nginx:

location ~* \.woff2$ {
  add_header Cache-Control "public, max-age=2592000";
}

Как проверить, что оптимизация работает

Для проверки используйте инструменты:

Google PageSpeed Insights — покажет рекомендации по шрифтам и скорость загрузки.
GTmetrix — анализирует запросы и время загрузки.
DevTools в браузере — вкладка Network покажет, как и когда загружаются шрифты.

Обратите внимание, что после оптимизации количество и время загрузки шрифтов должны уменьшиться, а FOUT/FOIT исчезнуть.

Пример полного кода для подключения оптимизированного локального шрифта в WordPress

Создадим функцию для подключения шрифтов и preload, которую добавим в functions.php темы:

function wpinc_enqueue_local_fonts() {
    // Предварительная загрузка шрифта
    echo '<link rel="preload" href="' . esc_url(get_template_directory_uri() . '/fonts/roboto-regular.woff2') . '" as="font" type="font/woff2" crossorigin>';

    // Подключение CSS с @font-face
    wp_enqueue_style('wpinc-local-fonts', get_template_directory_uri() . '/fonts/fonts.css', array(), null);
}
add_action('wp_head', 'wpinc_enqueue_local_fonts', 1);

В файле fonts.css разместите следующий код:

@font-face {
  font-family: 'Roboto';
  src: url('roboto-regular.woff2') format('woff2'),
       url('roboto-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

Заключение: системный подход к оптимизации шрифтов в WordPress

Оптимизация шрифтов — важный аспект производительности сайта. Локальный хостинг, preload, корректное кеширование и использование атрибута font-display — базовые и эффективные методы.

Не забывайте тестировать изменения и использовать специализированные плагины для автоматизации процесса. Такой подход поможет сделать ваш сайт на WordPress быстрее и удобнее для пользователей.

Оптимизация загрузки шрифтов в WordPress: практические методы и примеры