Шрифты играют важную роль в визуальном восприятии сайта, но при этом они могут существенно влиять на скорость загрузки страниц. В этой статье мы подробно разберём, как оптимизировать загрузку шрифтов в WordPress, чтобы ускорить сайт и улучшить пользовательский опыт без потери качества отображения текста.
Почему оптимизация шрифтов важна для скорости сайта
Шрифты в современном вебе чаще всего загружаются с внешних сервисов (например, Google Fonts) или хранятся локально. Каждый дополнительный запрос к серверу увеличивает время загрузки страницы, а неэффективная загрузка шрифтов может привести к FOIT (Flash of Invisible Text) или FOUT (Flash of Unstyled Text).
Оптимизация шрифтов позволяет:
- Сократить количество и размер HTTP-запросов
- Уменьшить блокировку рендеринга из-за загрузки шрифтов
- Улучшить восприятие сайта пользователями за счет быстрой отрисовки текста
В WordPress существует несколько практических способов улучшить работу со шрифтами, о которых мы расскажем далее.
Оптимизация загрузки Google Fonts в WordPress
Проблемы подключения Google Fonts по умолчанию
Подключение Google Fonts через стандартные вызовы часто приводит к блокировке рендеринга, поскольку браузер ждёт загрузки шрифтов, прежде чем отобразить текст. Кроме того, шрифты загружаются с внешнего сервера, что добавляет задержки.
Решение 1: Локальное хранение Google Fonts
Идеальный способ — скачать нужные шрифты и подключать их локально. Это снижает количество внешних запросов и позволяет использовать современные форматы, такие как WOFF2.
Для этого можно использовать плагин Clearfy Pro, который автоматически импортирует и оптимизирует Google Fonts.
Если хотите сделать это вручную, следуйте инструкции:
- Скачайте нужные шрифты с Google Webfonts Helper.
- Загрузите файлы в папку темы, например,
wp-content/themes/your-theme/fonts/. - Добавьте в
style.cssтемы подключение шрифтов:
@font-face {
font-family: 'WPspeedRoboto';
src: url('fonts/roboto-v20-latin-regular.woff2') format('woff2'),
url('fonts/roboto-v20-latin-regular.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}font-display: swap; гарантирует, что текст будет отображаться сразу с запасным шрифтом, а основной появится, как только загрузится.
Решение 2: Асинхронная загрузка через preload и preconnect
Если локальное хранение пока не подходит, ускорьте загрузку, добавив в <head> следующие теги:
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet" media="print" onload="this.media='all'">Так браузер заранее установит соединение и загрузит шрифты без блокировки основного рендера.
Оптимизация кастомных шрифтов в WordPress
Использование форматов WOFF2 и правильное подключение
Для кастомных шрифтов важно использовать современные форматы — WOFF и особенно WOFF2, которые значительно сжимают файлы. Также шрифты должны подключаться с font-display: swap для предотвращения FOIT.
Пример функции для подключения локальных шрифтов в functions.php
function wpspeed_enqueue_custom_fonts() {
wp_enqueue_style('wpspeed-custom-fonts', get_template_directory_uri() . '/fonts/custom-fonts.css', array(), null);
}
add_action('wp_enqueue_scripts', 'wpspeed_enqueue_custom_fonts');В файле custom-fonts.css нужно прописать @font-face, как в примере выше.
Советы по минимизации шрифтов
- Выбирайте только нужные начертания (например, только нормальный и жирный)
- Обрезайте шрифты под нужные символы с помощью онлайн-сервисов типа Glyphhanger
- Избегайте загрузки лишних языковых наборов
Использование плагинов для оптимизации шрифтов в WordPress
Если не хотите возиться с ручной настройкой, воспользуйтесь плагинами:
- Clearfy Pro — оптимизирует Google Fonts, отключает ненужные шрифты, кеширует и локализует их. Подробности и загрузка на wpshop.ru.
- OMGF — автоматически загружает Google Fonts локально и оптимизирует подключение.
- WP Rocket — платный плагин для кеширования, который умеет оптимизировать загрузку шрифтов через добавление preload и font-display.
Тестирование и проверка оптимизации шрифтов
После внедрения оптимизаций стоит проверить результат:
- Используйте Google Web.dev font-display test для оценки вывода текста.
- Запустите GTmetrix или PageSpeed Insights для оценки скорости и рекомендаций.
- Посмотрите в инструментах разработчика браузера (Network) время загрузки файлов шрифтов.
Если вы видите, что шрифты блокируют рендеринг или загружаются слишком долго — возвращайтесь к шагам оптимизации.