Шрифты играют важную роль в дизайне сайта, но их неправильная загрузка может значительно замедлить работу WordPress-сайта. В этой статье подробно разберем, как оптимизировать загрузку шрифтов, чтобы повысить скорость загрузки страниц, уменьшить время отображения контента и улучшить показатели Core Web Vitals.
Почему важна правильная загрузка шрифтов в WordPress
Часто разработчики и вебмастера подключают шрифты, используя стандартные методы, например, через Google Fonts или @font-face в CSS, не задумываясь об их влиянии на производительность. Однако шрифты могут вызвать блокировку рендеринга страницы, увеличить количество запросов и объем передаваемых данных.
В итоге страница долго загружается, пользователи видят пустой экран или «мигание» текста, а поисковые системы снижают рейтинг из-за плохих Core Web Vitals.
Оптимизация загрузки шрифтов в WordPress помогает:
- Уменьшить время загрузки страницы;
- Снизить нагрузку на сервер и трафик;
- Избежать блокировки рендеринга из-за шрифтов;
- Повысить удобство для пользователя;
- Улучшить SEO и ранжирование.
Основные проблемы загрузки шрифтов в WordPress
Рассмотрим типичные ошибки, которые влияют на скорость:
- Подключение шрифтов без предварительной загрузки (preload);
- Использование избыточных вариантов и начертаний;
- Загрузка шрифтов с внешних серверов без оптимизации;
- Отсутствие локального хранения шрифтов и кеширования;
- Подключение шрифтов в CSS, который загружается блокирующе.
Чтобы решить эти проблемы, применим несколько практических подходов.
Локальное хранение и оптимизация Google Fonts в WordPress
Подключать Google Fonts напрямую через ссылку в <head> быстро и просто, но это создает зависимость от внешнего сервиса, увеличивает время DNS lookup и не позволяет контролировать кеш.
Лучшее решение – скачать нужные шрифты и хранить их локально на сервере. Это ускорит загрузку и позволит управлять кешированием.
Для автоматизации используйте плагин OMGF (Optimize My Google Fonts). Он скачивает выбранные шрифты и генерирует локальные стили.
Пример подключения локальных шрифтов вручную:
/* wpbloger-style.css */
@font-face {
font-family: 'Open Sans';
src: url('fonts/OpenSans-Regular.woff2') format('woff2'),
url('fonts/OpenSans-Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}Обратите внимание на font-display: swap; – этот параметр заставляет текст показываться с запасным шрифтом, пока основной загружается, что улучшает UX.
Чтобы подключить этот CSS в WordPress, можно использовать функцию:
function wpbloger_enqueue_local_fonts() {
wp_enqueue_style('wpbloger-local-fonts', get_stylesheet_directory_uri() . '/wpbloger-style.css', array(), null);
}
add_action('wp_enqueue_scripts', 'wpbloger_enqueue_local_fonts');Предварительная загрузка шрифтов (preload) для ускорения рендеринга
Чтобы браузер начал загружать шрифты как можно раньше, добавьте в <head> тег <link rel="preload" as="font" crossorigin>.
Пример добавления preload через WordPress:
function wpbloger_preload_fonts() {
echo '<link rel="preload" href="' . get_stylesheet_directory_uri() . '/fonts/OpenSans-Regular.woff2" as="font" type="font/woff2" crossorigin>';
}
add_action('wp_head', 'wpbloger_preload_fonts');Этот прием значительно снижает время первого отображения текста (FCP).
Удаление неиспользуемых вариантов шрифтов
Очень часто в проекте подключают все варианты начертаний и начертаний шрифта, хотя используются только 1-2. Это увеличивает общий объем загружаемых файлов.
Проанализируйте, какие веса и стили реально нужны, и подключайте только их. Например, если используется только обычный и полужирный шрифт, скачайте и подключите только эти файлы.
Это уменьшит количество запросов и объем загружаемых данных.
Использование плагинов для оптимизации шрифтов в WordPress
Кроме OMGF, есть и другие полезные плагины:
- WP Rocket: умеет автоматически оптимизировать загрузку шрифтов, добавлять preload и font-display;
- Autoptimize: позволяет объединять и оптимизировать CSS, включая шрифты;
- Asset CleanUp: отключает ненужные стили и скрипты, включая ненужные шрифты;
- Perfmatters: отключает загрузку Google Fonts и помогает добавить локальные шрифты.
Используйте плагины в сочетании с ручными методами для лучшего результата.
Отложенная загрузка шрифтов и fallback-решения
Если шрифты слишком тяжелые или их много, имеет смысл отложить их загрузку после отображения контента. Для этого применяют техники lazy load для шрифтов.
Пример отложенной загрузки через JavaScript:
function wpbloger_load_fonts_async() {
?>
<script>
var font = new FontFace('Open Sans', 'url(<?php echo get_stylesheet_directory_uri(); ?>/fonts/OpenSans-Regular.woff2)');
font.load().then(function(loadedFont) {
document.fonts.add(loadedFont);
document.documentElement.style.fontFamily = '"Open Sans", sans-serif';
});
</script>
<?php
}
add_action('wp_footer', 'wpbloger_load_fonts_async');Такой код загружает шрифт асинхронно, не блокируя отображение страницы.
Выводы и рекомендации по оптимизации загрузки шрифтов в WordPress
Для качественной оптимизации загрузки шрифтов:
- Храните шрифты локально, избегайте прямого подключения с Google Fonts;
- Используйте
font-display: swap;для улучшения UX; - Добавляйте preload для ключевых файлов шрифтов;
- Подключайте только необходимые варианты и начертания;
- Используйте плагины для автоматизации оптимизации;
- Рассмотрите отложенную загрузку шрифтов для тяжёлых ресурсов.
Эти шаги помогут сделать ваш WordPress-сайт быстрее, улучшить пользовательский опыт и SEO-показатели.