Почему важно оптимизировать загрузку шрифтов в WordPress
Шрифты — важный элемент дизайна сайта, который напрямую влияет на визуальное восприятие и читабельность контента. Однако неправильное подключение шрифтов может значительно замедлить загрузку страниц, ухудшить пользовательский опыт и повлиять на SEO. Особенно это актуально для сайтов на WordPress, где часто используются сторонние темы и плагины, автоматически подгружающие множество шрифтов.
Оптимизация загрузки шрифтов позволяет:
- Уменьшить время загрузки страниц;
- Снизить количество запросов к серверу;
- Избежать блокировки рендеринга из-за загрузки шрифтов;
- Повысить оценку в PageSpeed Insights и других инструментах анализа производительности.
Давайте разберём, как добиться этих целей на практике.
Как определить, какие шрифты загружаются на сайте
Первым шагом является анализ текущей загрузки шрифтов. Для этого используйте инструменты разработчика в браузере (Chrome DevTools, Firefox Developer Tools) или сервисы типа PageSpeed Insights.
Откройте вкладку Network и отфильтруйте запросы по типу font. Вы увидите, какие файлы шрифтов загружаются, их размер, количество и время загрузки. Также обратите внимание на количество уникальных шрифтов и вариаций (начертания, веса), которые используются на сайте.
Частая ошибка — загрузка множества начертаний и стилей, хотя на сайте реально используется лишь часть из них. Это увеличивает вес страницы и время загрузки.
Методы оптимизации загрузки шрифтов в WordPress
1. Выбор и подключение только необходимых начертаний и наборов символов
Если вы используете шрифты Google Fonts, подключайте только те стили и кириллические наборы, которые действительно нужны. Например, вместо:
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">лучше указать конкретные веса:
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">Это уменьшит количество загружаемых файлов и их общий размер.
2. Локальный хостинг шрифтов
Подгрузка шрифтов с внешних CDN может замедлять сайт, особенно если есть проблемы с сетью. Лучший способ — скачать необходимые файлы шрифтов и разместить их на вашем сервере, подключив через @font-face.
Для автоматизации локального хостинга шрифтов в WordPress можно использовать плагины, например, Clearfy Pro, который позволяет отключать загрузку Google Fonts и заменять их локальными копиями.
3. Оптимизация CSS для шрифтов
Рекомендуется минимизировать и объединять CSS, отвечающий за подключение шрифтов, чтобы уменьшить количество запросов и общий вес стилей.
Для этого можно использовать функции WordPress и плагины оптимизации кэша и минификации, например, ABC Pagination совместно с плагинами кеширования.
Практический пример: локальное подключение шрифтов в теме WordPress
Создадим функцию wpdevelop_enqueue_local_fonts(), которая подключает локальные шрифты, отключая загрузку Google Fonts по умолчанию.
function wpdevelop_enqueue_local_fonts() {
wp_dequeue_style('twentytwentyone-fonts'); // пример для темы Twenty Twenty-One
wp_enqueue_style('wpdevelop-local-fonts', get_stylesheet_directory_uri() . '/fonts/fonts.css', array(), null);
}
add_action('wp_enqueue_scripts', 'wpdevelop_enqueue_local_fonts', 20);В файле fonts.css опишем подключение локальных шрифтов:
@font-face {
font-family: 'Roboto';
src: url('roboto-regular.woff2') format('woff2'),
url('roboto-regular.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Roboto';
src: url('roboto-bold.woff2') format('woff2'),
url('roboto-bold.woff') format('woff');
font-weight: 700;
font-style: normal;
font-display: swap;
}Файлы шрифтов необходимо положить в папку /fonts/ внутри вашей темы.
Использование плагинов для автоматизации оптимизации шрифтов
Для тех, кто предпочитает не заниматься ручной оптимизацией, есть плагины, которые облегчают задачу:
- OMGF (Optimize My Google Fonts) — автоматически скачивает Google Fonts на сервер и подключает локально;
- Clearfy Pro — комплексный плагин, в том числе умеет отключать загрузку шрифтов и оптимизировать их;
- Asset CleanUp — позволяет отключать загрузку шрифтов и скриптов на отдельных страницах, снижая нагрузку.
Включение такого плагина значительно упрощает оптимизацию, особенно если на сайте много дополнительных тем и плагинов.
Как избежать блокировки рендеринга из-за шрифтов
Проблема блокировки рендеринга возникает, когда браузер ждёт загрузки шрифтов, чтобы отобразить текст на странице. Это увеличивает время до отображения контента.
Для решения используйте атрибут font-display: swap; в CSS @font-face — это позволит сначала показать текст системным шрифтом, а после загрузки подменить его на кастомный.
Кроме того, можно предварительно загружать шрифты с помощью <link rel="preload" as="font" crossorigin> в заголовке сайта:
<link rel="preload" href="/fonts/roboto-regular.woff2" as="font" type="font/woff2" crossorigin>Это ускорит загрузку и снизит вероятность появления FOUT (Flash of Unstyled Text).
Советы по сокращению количества загружаемых шрифтов и стилей
Чем меньше шрифтов и стилей, тем быстрее загрузка. Вот что можно сделать:
- Используйте не более двух-трёх начертаний шрифта (например, normal и bold);
- Откажитесь от лишних начертаний курсив и light, если они не нужны;
- Используйте системные шрифты там, где можно — это минимизирует загрузку;
- Оптимизируйте использование иконок — заменяйте иконки в шрифте на SVG, если возможно.
Выводы и рекомендации по оптимизации шрифтов в WordPress
Оптимизация загрузки шрифтов — обязательный этап ускорения сайта на WordPress. Она включает в себя анализ текущей загрузки, минимизацию подключаемых стилей, локальный хостинг шрифтов и использование современных CSS-свойств для улучшения отображения.
Используйте плагины, такие как Clearfy Pro для автоматизации задач, а также внимательно тестируйте результат с помощью PageSpeed Insights и других инструментов.