Веб-шрифты — важная часть современного дизайна сайтов, однако они могут значительно замедлять загрузку страниц, особенно на WordPress, где используется множество плагинов и тем с разными стилями. В этой статье мы подробно разберём, как оптимизировать загрузку веб-шрифтов, чтобы улучшить скорость сайта на WordPress без потери качества отображения текста.
Почему важно оптимизировать загрузку веб-шрифтов в WordPress
Веб-шрифты загружаются с внешних сервисов (Google Fonts, Adobe Fonts) или локально. Каждый дополнительный запрос к серверу увеличивает время загрузки страницы. Если шрифты блокируют отображение контента (FOIT — flash of invisible text), пользователь видит пустое место, пока шрифты не загрузятся. Это негативно сказывается на UX и SEO.
На WordPress часто используются темы и плагины, которые автоматически подключают множество вариантов шрифтов, что приводит к избыточным HTTP-запросам и увеличению времени загрузки. Оптимизация загрузки шрифтов помогает:
- сократить количество запросов;
- уменьшить размер загружаемых файлов;
- избежать блокировки рендеринга;
- повысить скорость и стабильность сайта.
Основные техники оптимизации веб-шрифтов на WordPress
1. Локальная загрузка шрифтов вместо внешних сервисов
Подключение шрифтов с Google Fonts или Adobe Fonts означает зависимость от сторонних серверов. Локальная загрузка позволяет:
- контролировать кеширование;
- избежать задержек из-за загрузки с разных доменов;
- исключить возможные сбои при недоступности внешних сервисов.
Для локальной загрузки шрифтов можно использовать плагин Clearfy Pro с функцией оптимизации шрифтов или сделать это вручную.
Пример ручной загрузки:
/* Функция wpspeed_enqueue_local_fonts подключает локальные шрифты */
function wpspeed_enqueue_local_fonts() {
wp_enqueue_style('wpspeed-local-fonts', get_template_directory_uri() . '/fonts/fonts.css', [], null);
}
add_action('wp_enqueue_scripts', 'wpspeed_enqueue_local_fonts');В файле fonts.css подключаем локальные файлы:
@font-face {
font-family: 'Open Sans';
src: url('OpenSans-Regular.woff2') format('woff2'),
url('OpenSans-Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}2. Использование атрибута font-display: swap для избегания FOIT
Атрибут font-display: swap в CSS позволяет браузеру показывать запасной шрифт до загрузки веб-шрифта, что улучшает восприятие сайта пользователем.
Если вы используете Google Fonts через API, можно добавить параметр &display=swap в URL запроса.
Пример подключения Google Fonts с swap:
function wpspeed_enqueue_google_fonts() {
wp_enqueue_style('wpspeed-google-fonts', 'https://fonts.googleapis.com/css2?family=Open+Sans&display=swap', [], null);
}
add_action('wp_enqueue_scripts', 'wpspeed_enqueue_google_fonts');3. Подключение только нужных вариантов шрифтов
Частая ошибка — подключение всех начертаний и весов шрифтов сразу. Это увеличивает размер загружаемых файлов.
Выбирайте только те варианты, которые реально используются на сайте. Например, если вам нужны только обычный и полужирный шрифты, подключайте только их.
Пример ограничения вариантов Google Fonts:
https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swapАвтоматизация оптимизации с помощью плагинов
Clearfy Pro для оптимизации шрифтов
Clearfy Pro — мощный плагин для комплексной оптимизации WordPress, включая веб-шрифты. Он позволяет автоматически локализовать Google Fonts, минимизировать и объединять CSS, а также добавлять font-display: swap без ручного редактирования кода.
Для настройки достаточно активировать соответствующую опцию в разделе оптимизации шрифтов плагина.
Autoptimize — популярный плагин с опциями для шрифтов
Autoptimize умеет агрегировать и минимизировать CSS и JS, а также оптимизировать загрузку шрифтов. В настройках можно включить опцию «Оптимизировать шрифты Google» и добавить font-display: swap.
Продвинутые техники оптимизации: preload и preconnect
Использование <link rel="preload"> для ускорения загрузки шрифтов
Тег preload сообщает браузеру заранее загрузить важные ресурсы, включая шрифты, что сокращает задержку их появления на странице.
Пример добавления preload для локального шрифта:
function wpspeed_preload_local_fonts() {
echo '<link rel="preload" href="' . get_template_directory_uri() . '/fonts/OpenSans-Regular.woff2" as="font" type="font/woff2" crossorigin>';
}
add_action('wp_head', 'wpspeed_preload_local_fonts');Использование preconnect для внешних шрифтов
Если шрифты загружаются с внешних серверов (например, fonts.gstatic.com), добавьте <link rel="preconnect"> для установления раннего соединения, что ускорит загрузку.
Пример для Google Fonts:
function wpspeed_preconnect_google_fonts() {
echo '<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>';
echo '<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>';
}
add_action('wp_head', 'wpspeed_preconnect_google_fonts');Практические советы по контролю и тестированию оптимизации шрифтов
После внедрения оптимизации обязательно проверяйте, что шрифты корректно отображаются на всех устройствах и браузерах. Используйте инструменты:
- Google PageSpeed Insights — покажет рекомендации по шрифтам и FOIT;
- WebPageTest — позволяет увидеть время загрузки шрифтов и порядок запросов;
- DevTools браузера — вкладка Network для анализа загрузки файлов.
Обратите внимание на метрики, связанные с отображением текста (First Contentful Paint, Largest Contentful Paint) — они очень чувствительны к загрузке шрифтов.
Если используете локальные шрифты, убедитесь, что они корректно кэшируются сервером: добавьте заголовки Cache-Control и правильные MIME-типы.
Заключение
Оптимизация загрузки веб-шрифтов — ключевой этап ускорения WordPress-сайта. Локальная загрузка, правильное использование font-display, ограничение вариантов шрифтов и современные техники preload/preconnect значительно сокращают время загрузки и повышают комфорт пользователей.
Для удобства и автоматизации используйте Clearfy Pro или Autoptimize, которые помогут внедрить все лучшие практики без лишних усилий.