Как удалить загрузку WOFF шрифтов в WordPress для ускорения сайта

Часто при оптимизации производительности WordPress-сайта приходится сталкиваться с задачей удаления лишних ресурсов, которые замедляют загрузку страниц. Одним из таких ресурсов являются WOFF (Web Open Font Format) шрифты, которые по умолчанию могут загружаться темами или плагинами.

Удаление или отключение загрузки WOFF шрифтов помогает уменьшить количество HTTP-запросов, снизить вес страницы и повысить скорость загрузки, особенно на мобильных устройствах и медленных соединениях. В этой статье мы подробно разберём, как определить, какие WOFF шрифты загружаются, и как их убрать без ущерба для отображения сайта.

Почему WOFF шрифты влияют на скорость сайта

WOFF и WOFF2 — это форматы веб-шрифтов, которые поддерживаются всеми современными браузерами. Темы и плагины WordPress часто используют их для улучшения дизайна, подключая через @font-face в CSS, либо через enqueue скрипты и стили.

Однако лишние шрифты, которые не используются или загружаются с внешних источников (например, Google Fonts), создают дополнительные HTTP-запросы, увеличивают время загрузки и влияют на показатель Core Web Vitals.

Удаление ненужных WOFF шрифтов — часть комплексной оптимизации, наряду с кешированием, сжатием и оптимизацией изображений.

Как определить, какие WOFF шрифты загружаются на сайте

Для начала нужно понять, какие именно WOFF шрифты загружаются на вашем сайте и откуда. Сделать это можно с помощью встроенных инструментов разработчика браузера:

• Откройте сайт в Google Chrome или Firefox.
• Нажмите F12 для открытия панели разработчика.
• Перейдите во вкладку Network (Сеть) и обновите страницу.
• В фильтре по типу выберите Fonts (Шрифты).
• Просмотрите, какие файлы шрифтов загружаются (обычно с расширениями .woff или .woff2), и откуда они.

Так вы увидите, какие шрифты загружаются темой или плагином, а также с внешних ресурсов, например Google Fonts.

Способы удаления или отключения загрузки WOFF шрифтов в WordPress

Отключение Google Fonts через functions.php

Если тема или плагин подключают Google Fonts через enqueue, можно отключить их, удалив соответствующие стили. Пример функции для удаления шрифтов:

function wparticles_dequeue_google_fonts() {
    wp_dequeue_style('twentytwentyone-fonts'); // замените на хендл стиля вашей темы
    wp_deregister_style('twentytwentyone-fonts');
}
add_action('wp_enqueue_scripts', 'wparticles_dequeue_google_fonts', 20);

Чтобы узнать хендл стиля, можно посмотреть в исходном коде темы или использовать плагин Query Monitor.

Удаление @font-face из CSS с помощью фильтра

Если шрифты подключены через CSS, можно использовать фильтр style_loader_tag для удаления или модификации загрузки CSS, в котором прописаны WOFF шрифты.

function wparticles_filter_style_loader_tag($html, $handle, $href, $media) {
    if($handle === 'your-font-style-handle') {
        // Можно заменить $href на кастомный CSS без шрифтов
        $href = get_stylesheet_directory_uri() . '/css/no-fonts.css';
        $html = '<link rel="stylesheet" id="' . $handle . '" href="' . esc_url($href) . '" media="' . esc_attr($media) . '" />';
    }
    return $html;
}
add_filter('style_loader_tag', 'wparticles_filter_style_loader_tag', 10, 4);

В этом примере вы создаёте альтернативный CSS без описания шрифтов и заменяете исходный.

Использование плагина Clearfy Pro для отключения шрифтов

Если вы хотите удобное решение без правки кода, можно использовать плагин Clearfy Pro. В нём есть опции по отключению Google Fonts, Emoji и других ненужных ресурсов.

Плагин позволяет убрать загрузку шрифтов в пару кликов, что особенно удобно для новичков и тех, кто хочет быстро оптимизировать сайт.

Как проверить результат и убедиться, что WOFF шрифты не загружаются

После внесения изменений обязательно проверьте сайт в режиме инкогнито и с помощью инструментов разработчика:

• Откройте вкладку «Network» и проверьте, что запросы на файлы .woff отсутствуют или значительно сократились.
• Проверьте визуальное отображение сайта – шрифты должны оставаться читаемыми и удобными.
• Используйте сервисы проверки скорости, например Google PageSpeed Insights, чтобы увидеть улучшения в показателях.

Дополнительные советы по оптимизации шрифтов в WordPress

Используйте системные шрифты

Для максимальной скорости можно заменить веб-шрифты на системные, например font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;. Это полностью исключит загрузку внешних шрифтов.

Загружайте шрифты локально

Если вам важна кастомизация, лучше скачать нужные WOFF-файлы и загрузить их на ваш сервер, подключая через локальный CSS. Это даст контроль над кешированием и уменьшит зависимость от внешних сервисов.

Минимизируйте использование разных начертаний

Чем меньше вариантов шрифтов (жирный, курсив, разные веса), тем меньше файлов загружается, и тем быстрее работает сайт.

Выводы

Удаление загрузки WOFF шрифтов — важный этап в оптимизации WordPress сайта, особенно если используются сторонние темы и плагины, которые подключают шрифты по умолчанию. Используйте описанные методы от ручного удаления в functions.php до удобных решений в плагинах Clearfy Pro для быстрого результата.

Это позволит уменьшить количество HTTP-запросов, повысить скорость загрузки и улучшить пользовательский опыт без потери визуальной привлекательности вашего сайта.