Шрифты играют важную роль в визуальном восприятии сайта, но их неправильная загрузка может значительно замедлять работу ресурса. В этой статье разберём, как оптимизировать загрузку шрифтов в WordPress, чтобы повысить скорость и улучшить пользовательский опыт, приведём практические примеры и код для решения конкретных задач.
Почему стоит оптимизировать загрузку шрифтов в WordPress
Внешние и локальные шрифты могут стать причиной блокировки рендеринга страницы, увеличения времени загрузки и снижения Core Web Vitals. Особенно это заметно при использовании Google Fonts или нестандартных кастомных шрифтов. Оптимизация загрузки помогает:
- Сократить время загрузки страницы;
- Уменьшить количество HTTP-запросов;
- Избежать блокировки рендеринга;
- Повысить оценку в PageSpeed Insights и других сервисах;
- Улучшить SEO и пользовательский опыт.
Для WordPress есть несколько способов оптимизации, о которых расскажем далее.
Оптимизация Google Fonts: загрузка шрифтов локально и отложенно
Частая ошибка — подключение Google Fonts через стандартный <link> в <head>, что создаёт дополнительный внешний запрос и блокирует рендеринг.
Решение — скачать шрифты и хранить локально, либо использовать отложенную загрузку.
Локальная загрузка Google Fonts
Для локальной загрузки можно использовать плагин OMGF (Optimize My Google Fonts). Он автоматически скачивает шрифты и подключает их локально.
Если хотите сделать вручную, то алгоритм такой:
- Скачайте необходимые файлы шрифтов в формате
woff2,woff. - Загрузите их в папку темы, например
/wp-content/themes/your-theme/fonts/. - Создайте CSS с подключением шрифтов через
@font-face:
@font-face {
font-family: 'WPManualRoboto';
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;, чтобы браузер показывал текст с запасным шрифтом, пока основной загружается.
После этого в functions.php отключите стандартное подключение Google Fonts и добавьте свой CSS:
function wpmanual_dequeue_google_fonts() {
wp_dequeue_style('twentytwentyone-fonts'); // пример для темы Twenty Twenty-One
}
add_action('wp_enqueue_scripts', 'wpmanual_dequeue_google_fonts', 20);
function wpmanual_enqueue_local_fonts() {
wp_enqueue_style('wpmanual-local-fonts', get_stylesheet_directory_uri() . '/fonts/fonts.css', array(), null);
}
add_action('wp_enqueue_scripts', 'wpmanual_enqueue_local_fonts');
Отложенная загрузка Google Fonts с помощью JavaScript
Если хотите оставить загрузку с CDN, можно отложить подключение, чтобы не блокировать рендеринг.
Пример кода для вставки в footer.php или через wp_footer:
function wpmanual_defer_google_fonts() {
?>
<script>
WebFontConfig = {
google: { families: [ 'Roboto:400,700&display=swap' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.async = true;
document.head.appendChild(wf);
})();
</script>
<?php
}
add_action('wp_footer', 'wpmanual_defer_google_fonts');
Этот метод загружает шрифты после основного контента.
Оптимизация кастомных и локальных шрифтов в WordPress
Если используете свои шрифты, важно правильно организовать подключение, чтобы избежать лишних запросов и блокировок.
Настройка @font-face с font-display
Всегда используйте font-display: swap; или optional для улучшения UX:
@font-face {
font-family: 'WPManualCustom';
src: url('fonts/custom-font.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}
Это позволит браузеру сначала показать текст с запасным шрифтом, а затем заменить на нужный.
Минимизация количества шрифтов и начертаний
Чем больше файлов шрифтов и начертаний, тем больше запросов. Рекомендуется:
- Использовать минимум начертаний (например, обычный и полужирный);
- Объединять шрифты в один файл, если возможно;
- Удалять неиспользуемые глифы с помощью специальных сервисов типа Font Squirrel.
Пример подключения шрифтов из темы с оптимизацией
function wpmanual_enqueue_custom_fonts() {
wp_enqueue_style('wpmanual-custom-fonts', get_template_directory_uri() . '/fonts/custom-fonts.css', array(), null);
}
add_action('wp_enqueue_scripts', 'wpmanual_enqueue_custom_fonts');
В файле custom-fonts.css прописывайте @font-face с font-display: swap;.
Использование плагинов для оптимизации шрифтов в WordPress
Если вы не хотите заниматься ручной настройкой, можно использовать специализированные плагины:
- OMGF (Optimize My Google Fonts) — автоматически скачивает и подключает Google Fonts локально.
- Asset CleanUp — позволяет отключать ненужные стили и скрипты, включая шрифты, на отдельных страницах.
- Clearfy Pro — в числе функций есть оптимизация загрузки шрифтов и отключение ненужных ресурсов.
Например, в Clearfy Pro можно настроить опции для удаления Google Fonts и подключения локальных шрифтов без вмешательства в код.
Диагностика и проверка оптимизации загрузки шрифтов
Для проверки оптимизации используйте инструменты:
- Google PageSpeed Insights — покажет, есть ли проблемы с задержкой рендеринга из-за шрифтов.
- GTmetrix — анализирует загрузку ресурсов.
- Вкладка Network в инструментах разработчика браузера — позволяет увидеть, как и когда загружаются шрифты.
Если видите, что шрифты блокируют рендеринг, рассмотрите применение описанных выше методов.
Советы по улучшению
- Всегда используйте
font-displayв@font-face. - Минимизируйте количество разных шрифтов и начертаний.
- Загружайте шрифты локально, чтобы избежать внешних запросов.
- Используйте отложенную загрузку для Google Fonts.
- Отключайте шрифты там, где они не нужны с помощью Asset CleanUp или аналогов.
Итоги
Оптимизация загрузки шрифтов в WordPress — важный этап ускорения сайта. Правильная локальная загрузка, настройка font-display, минимизация количества файлов и использование плагинов помогут сделать сайт быстрее и удобнее для пользователей.
Если хотите быстро и безопасно реализовать локальную загрузку Google Fonts, рекомендую попробовать плагин OMGF, а для комплексной оптимизации — Clearfy Pro.