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

Автор: Нина Журавлева | Опубликовано: 08.12.2025

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

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

При загрузке страницы браузер часто блокирует отрисовку контента до тех пор, пока шрифты не загрузятся, что вызывает эффект «мерцания» или FOUT (Flash of Unstyled Text). Оптимизация загрузки шрифтов решает эти проблемы, минимизирует задержки и повышает удовлетворенность посетителей.

Для WordPress существуют свои особенности, так как тема и плагины могут подключать шрифты автоматически, и важно правильно управлять этим процессом.

Способы оптимизации загрузки шрифтов в WordPress

1. Локальное хранение шрифтов вместо подключения с CDN

Многие темы и плагины подключают шрифты напрямую с Google Fonts или других CDN. Это удобно, но вызывает дополнительные DNS-запросы и задержки. Чтобы ускорить загрузку, рекомендуется скачать шрифты и разместить их на собственном сервере.

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

/* Скачайте нужные файлы шрифтов в папку темы, например /fonts/ */

@font-face {
  font-family: 'WpzoomRoboto';
  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 — это позволит показывать текст с запасным системным шрифтом, пока основной загружается.

2. Использование атрибута font-display для улучшения визуальной загрузки

Когда вы подключаете шрифты через @font-face или через Google Fonts, важно использовать font-display. Это CSS-свойство управляет стратегией отображения шрифтов, и его отсутствие может привести к блокирующей отрисовке.

Варианты значения:

swap — сначала отображается запасной шрифт, потом подгружается основной.
fallback — короткое ожидание загрузки, потом fallback.
optional — минимальное ожидание, если шрифт не загружается быстро, используется системный.

Пример подключения Google Fonts с указанием font-display через PHP:

function wpzoom_enqueue_google_fonts() {
    wp_enqueue_style( 'wpzoom-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', false );
}
add_action( 'wp_enqueue_scripts', 'wpzoom_enqueue_google_fonts' );

3. Предзагрузка шрифтов (Preload) для ускорения первых запросов

Чтобы браузер начал загружать шрифты максимально рано, можно добавить тег <link rel="preload" as="font" crossorigin> в <head>. Это особенно эффективно для критичных шрифтов.

Добавим предзагрузку в WordPress через хук:

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

Важно, чтобы путь и атрибуты были корректны, иначе эффект не появится.

Плагины для оптимизации шрифтов в WordPress

1. OMGF (Optimize My Google Fonts)

Плагин автоматически скачивает Google Fonts на ваш сервер и меняет ссылки в стилях, чтобы использовать локальные файлы. Это значительно улучшает скорость загрузки и позволяет контролировать font-display.

Преимущества:

Автоматическая локализация шрифтов.
Возможность настройки font-display.
Поддержка предзагрузки и оптимизации CSS.

2. WP Rocket

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

3. Asset CleanUp

Позволяет selectively отключать ненужные стили и скрипты, включая шрифты, на страницах, где они не используются. Это снижает общий вес страницы и ускоряет загрузку.

Реальный пример: локальное подключение Google Fonts в теме WordPress с оптимизацией

Шаги:

Скачайте нужные файлы шрифтов в форматах woff и woff2 (например, Roboto Regular и Bold) с сайта fonts.google.com или с помощью инструмента google-webfonts-helper.
Загрузите файлы в папку вашей темы, например /wp-content/themes/your-theme/fonts/.
Добавьте в файл style.css вашей темы следующий код:

@font-face {
  font-family: 'WpzoomRoboto';
  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-face {
  font-family: 'WpzoomRoboto';
  src: url('fonts/roboto-bold.woff2') format('woff2'),
       url('fonts/roboto-bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

В functions.php добавьте функцию предзагрузки шрифтов:

function wpzoom_preload_local_fonts() {
    echo '<link rel="preload" href="'.get_template_directory_uri().'/fonts/roboto-regular.woff2" as="font" type="font/woff2" crossorigin>';
    echo '<link rel="preload" href="'.get_template_directory_uri().'/fonts/roboto-bold.woff2" as="font" type="font/woff2" crossorigin>';
}
add_action( 'wp_head', 'wpzoom_preload_local_fonts' );

В стилях темы используйте шрифт:

body {
  font-family: 'WpzoomRoboto', Arial, sans-serif;
}

Эти простые действия значительно уменьшат время загрузки шрифтов, уменьшат количество запросов и улучшат показатели производительности сайта.

Дополнительные советы по оптимизации шрифтов в WordPress

Используйте минимальное количество начертаний

Каждый дополнительный вес шрифта (например, 300, 400, 700, 900) — это отдельный файл, который нужно загрузить. Оставляйте только те варианты, которые действительно нужны дизайну.

Объединяйте и минимизируйте CSS

Объединение стилей и минимизация CSS сокращают размер файлов и ускоряют их загрузку. Многие плагины кэширования умеют это делать автоматически.

Управляйте загрузкой шрифтов через хуки WordPress

Иногда темы или плагины подключают шрифты самостоятельно, без возможности настройки. В таких случаях можно удалить их подключение через wp_dequeue_style и подключить оптимизированный вариант самостоятельно.

function wpzoom_dequeue_unwanted_fonts() {
    wp_dequeue_style( 'unwanted-font-handle' );
}
add_action( 'wp_enqueue_scripts', 'wpzoom_dequeue_unwanted_fonts', 20 );

Таким образом можно контролировать все подключаемые шрифты и исключать лишние.