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

Автор: Павел Ершов | Опубликовано: 13.02.2026

Одной из частых причин замедления загрузки сайта на WordPress является загрузка веб-шрифтов. Несмотря на привлекательность кастомных шрифтов, их загрузка может блокировать отображение контента и увеличивать время до полной отрисовки страницы (TTFB и FCP). В этой статье мы разберём, как грамотно организовать отложенную загрузку шрифтов, чтобы ускорить сайт без потери дизайна.

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

Веб-шрифты обычно загружаются через @font-face из внешних источников (Google Fonts, Adobe Fonts) или локально. При этом браузер сначала должен получить CSS с описанием шрифтов, затем скачать сами файлы шрифтов. Этот процесс блокирует отрисовку текста, вызывая так называемую FOUT (Flash of Unstyled Text) или FOIT (Flash of Invisible Text).

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

Оптимизация обычно сводится к двум главным направлениям:

Отложенная загрузка шрифтов (font loading strategy)
Предзагрузка наиболее важных шрифтов (preload)

Основные техники отложенной загрузки шрифтов в WordPress

Preload ключевых шрифтов

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

Пример добавления в файл functions.php темы:

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

Если шрифты загружаются с Google Fonts, тег preload нужно адаптировать с правильным URL и добавить атрибут crossorigin.

Отложенная загрузка CSS шрифтов с помощью JavaScript

Чтобы не блокировать загрузку страницы CSS со шрифтами, можно загружать его асинхронно через JS после первичного рендеринга. Это уменьшит время до отображения контента.

Пример простого скрипта для динамической загрузки CSS со шрифтами:

function wpspeed_load_font_css() {
    ?>
    <script>
    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = '<?php echo get_template_directory_uri(); ?>/fonts/fonts.css';
    document.head.appendChild(link);
    </script>
    <?php
}
add_action('wp_footer', 'wpspeed_load_font_css');

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

Использование плагинов для оптимизации шрифтов

Для удобства можно использовать готовые плагины, которые автоматизируют оптимизацию загрузки шрифтов:

OMGF — автоматически скачивает Google Fonts на ваш сервер, оптимизирует и добавляет preload.
Clearfy Pro — в составе функционала есть оптимизация загрузки шрифтов и отложенная загрузка.
WP Rocket — популярный плагин кеширования с возможностью оптимизации загрузки CSS и шрифтов.

На Clearfy Pro можно подробнее почитать о функционале оптимизации.

Оптимизация локальных шрифтов и формат WOFF2

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

Чтобы подключить локальные шрифты, в корне темы создайте папку /fonts/, загрузите туда файлы и добавьте в CSS:

@font-face {
    font-family: 'MyFont';
    src: url('fonts/myfont.woff2') format('woff2'),
         url('fonts/myfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

Атрибут font-display: swap заставляет браузер показывать текст с запасным шрифтом, пока основной загружается, предотвращая FOIT.

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

Если нужно более гибко управлять загрузкой, можно использовать фильтры WordPress и создавать свои функции.

Пример функции для замены Google Fonts на локальные и добавления preload:

function wpspeed_replace_google_fonts() {
    // Удаляем стандартный enqueued Google Fonts
    wp_dequeue_style('twentytwenty-fonts'); // пример, изменить под себя
    // Подключаем локальные шрифты
    wp_enqueue_style('wpspeed-local-fonts', get_template_directory_uri() . '/fonts/local-fonts.css', [], null);
    // Добавляем preload
    add_action('wp_head', function() {
        echo '<link rel="preload" href="'.get_template_directory_uri().'/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin>';
    });
}
add_action('wp_enqueue_scripts', 'wpspeed_replace_google_fonts', 20);

Резюме: последовательность внедрения оптимизации шрифтов

1. Определите шрифты, которые реально используются на сайте и приоритетны для загрузки.

2. Скачайте их локально в формате WOFF2 и WOFF.

3. Подключите шрифты с @font-face и добавьте font-display: swap.

4. Добавьте preload для ключевых файлов шрифтов через <link rel="preload">.

5. Используйте асинхронную загрузку CSS со шрифтами, если нужно.

6. Рассмотрите плагины для упрощения задач, например Clearfy Pro.

7. Тестируйте сайт с помощью Google PageSpeed Insights, WebPageTest и других сервисов, чтобы убедиться в улучшении скорости.

Следуя этим рекомендациям, вы сможете значительно ускорить загрузку страниц WordPress, улучшить UX и SEO-показатели сайта.