Оптимизация шрифтов на мобильных устройствах — важный аспект ускорения загрузки страниц и улучшения читаемости сайта на WordPress. Большие или неправильно подключённые шрифты могут замедлять загрузку, увеличивать расход трафика и ухудшать пользовательский опыт. В этой статье подробно разберём, как оптимизировать шрифты в WordPress именно под мобильные устройства, какие инструменты и плагины использовать, а также приведём примеры кода для тонкой настройки.
Почему оптимизация шрифтов важна для мобильных пользователей
Мобильные устройства имеют ограниченные ресурсы: слабее процессоры, медленнее сети (особенно 3G или нестабильный LTE), а также ограничения по объему трафика. Если сайт грузит крупные шрифты, особенно если они загружаются с внешних серверов без кеширования, это замедляет отображение контента и увеличивает время до интерактивности.
Кроме того, избыточное использование разных гарнитур увеличивает количество HTTP-запросов. Оптимизированные шрифты снижают нагрузку на мобильный браузер, ускоряют рендеринг текста и повышают удобство чтения.
Основные подходы к оптимизации шрифтов в WordPress для мобильных
1. Выбор и минимизация количества шрифтов
Чем меньше шрифтов и начертаний (стилей) используется, тем быстрее загрузка. Рекомендуется ограничиться 1–2 гарнитурами и максимум 2–3 стилями (например, нормальный, полужирный, курсив).
Для мобильных можно использовать более системные шрифты, которые уже есть на устройстве, чтобы не тратить время на загрузку внешних.
2. Использование font-display: swap для шрифтов
Добавьте в CSS правило font-display: swap; для @font-face, чтобы браузер сначала показывал текст системным шрифтом, а когда загрузится кастомный — автоматически менял его. Это улучшает восприятие скорости загрузки.
@font-face {
font-family: 'WPMobileFont';
src: url('/wp-content/fonts/wpmobilefont.woff2') format('woff2');
font-display: swap;
}
3. Предзагрузка критичных шрифтов (preload)
Для шрифтов, которые используются в заголовках и основном тексте, можно добавить тег <link rel="preload" as="font" crossorigin> в <head>. Это ускорит загрузку шрифта.
<link rel="preload" href="/wp-content/fonts/wpmobilefont.woff2" as="font" type="font/woff2" crossorigin>
Практические решения с плагинами для WordPress
Плагин OMGF (Optimize My Google Fonts)
OMGF скачивает шрифты Google Fonts на ваш сервер и корректно подключает их с нужными заголовками кеширования и font-display. Это существенно ускоряет загрузку на мобильных.
Настройте OMGF следующим образом:
- Установите и активируйте плагин.
- В настройках выберите опцию локальной загрузки шрифтов.
- Включите font-display: swap.
Ссылка на плагин с примером: OMGF на WPSHOP
Плагин Clearfy Pro для оптимизации ресурсов
Clearfy Pro позволяет отключать неиспользуемые шрифты, а также оптимизировать подключение кастомных. В мобильных настройках можно задать отдельные правила, например, отключить шрифты для мобильных пользователей и использовать системные.
Это особенно полезно, если вы используете тяжелые темы с множеством стилей.
Пример кода для условной загрузки шрифтов на мобильных устройствах
Иногда нужно подключать разные шрифты для мобильной и десктопной версии. Ниже пример функции с префиксом wpmobile_, которая условно добавляет шрифты в зависимости от устройства.
function wpmobile_enqueue_fonts() {
if ( wp_is_mobile() ) {
// Подключаем системный шрифт для мобильных
wp_enqueue_style( 'wpmobile-system-font', 'https://fonts.googleapis.com/css2?family=Arial&display=swap' );
} else {
// Подключаем кастомный шрифт для десктопа
wp_enqueue_style( 'wpmobile-custom-font', get_template_directory_uri() . '/fonts/custom-font.css', array(), null );
}
}
add_action( 'wp_enqueue_scripts', 'wpmobile_enqueue_fonts' );
Этот подход помогает уменьшить нагрузку на мобильные устройства, не жертвуя дизайном для десктопа.
Дополнительные советы по ускорению шрифтов на мобильных
Использование форматов WOFF2 и WOFF
WOFF2 — современный формат сжатия, который поддерживается большинством мобильных браузеров. Всегда предоставляйте шрифты в WOFF2, а для старых браузеров — в WOFF.
Оптимизация CSS для шрифтов
Минифицируйте CSS, указывайте только необходимые свойства для шрифтов, избегайте избыточных правил. Используйте @font-face с четко описанными диапазонами символов (unicode-range), чтобы загружать только нужные символы для вашего сайта.
Lazy Load для шрифтов с JavaScript
Можно отложить загрузку шрифтов с помощью JavaScript, загружая их после первичной отрисовки страницы, например, через FontFaceObserver. Это уменьшит время первого рендера на мобильных.
Итоги и рекомендации
Оптимизация шрифтов для мобильных — простой, но эффективный способ улучшить скорость и удобство вашего WordPress сайта. Используйте минимальное количество шрифтов, применяйте font-display: swap, предварительную загрузку, локальную загрузку через OMGF и настройте условное подключение для мобильных через wp_is_mobile().
Для комплексной оптимизации рекомендуем также подключить Clearfy Pro, который поможет отключить ненужные ресурсы и улучшить производительность.
Подробнее о плагинах и их настройках ищите на нашем партнерском ресурсе: WPSHOP — лучшие решения для WordPress.