В современном веб-дизайне использование кастомных шрифтов — это стандарт, но они могут серьезно замедлять загрузку сайта, особенно если подключены неэффективно. В этой статье рассмотрим, как оптимизировать загрузку шрифтов в WordPress, чтобы улучшить скорость и повысить производительность без ущерба для визуальной составляющей.
Почему важно оптимизировать загрузку шрифтов в WordPress
Шрифты, особенно сторонние, такие как Google Fonts, часто загружаются с внешних серверов, что увеличивает время ответа и блокирует отображение текста (FOIT или FOUT). Это негативно влияет на пользовательский опыт и SEO. Оптимизация загрузки позволяет:
- Уменьшить количество запросов к серверу
- Снизить время рендеринга страницы
- Избежать проблем с видимостью текста
- Уменьшить нагрузку на хостинг
Рассмотрим основные методы оптимизации, которые можно применить на WordPress-сайте.
Использование плагинов для оптимизации загрузки шрифтов
Плагин "OMGF (Optimize My Google Fonts)"
Плагин OMGF автоматически загружает Google Fonts локально, минимизирует количество запросов и добавляет правильные заголовки кеширования. Это снижает зависимость от внешних сервисов и ускоряет загрузку.
После установки и активации OMGF выполните следующие шаги:
- Перейдите в настройки плагина и запустите сканирование сайта для поиска используемых шрифтов.
- Сгенерируйте локальные копии шрифтов и внедрите их в тему.
- Проверьте, что шрифты загружаются с вашего сервера, а не с Google Fonts.
Плагин "Autoptimize"
Autoptimize объединяет и минимизирует CSS, JS и HTML, включая стили шрифтов. Он также умеет оптимизировать загрузку шрифтов за счет отложенной загрузки и внедрения критического CSS.
Настройка:
- Включите "Оптимизацию CSS" в настройках плагина.
- Активируйте опцию "Отложенная загрузка шрифтов".
- Проверьте результаты по времени загрузки в инструментах для анализа скорости.
Ручная оптимизация загрузки шрифтов: примеры кода
Локальное подключение Google Fonts
Чтобы загружать шрифты локально без плагинов, можно скачать нужные файлы шрифтов и добавить их в папку темы, например /wp-content/themes/your-theme/fonts/. Затем создайте файл стилей fonts.css с описанием шрифтов:
@font-face {
font-family: 'WpupdateRoboto';
src: url('fonts/roboto-regular.woff2') format('woff2'),
url('fonts/roboto-regular.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
Подключите этот файл в functions.php вашей темы:
function wpupdate_enqueue_local_fonts() {
wp_enqueue_style('wpupdate-local-fonts', get_template_directory_uri() . '/fonts.css', array(), null);
}
add_action('wp_enqueue_scripts', 'wpupdate_enqueue_local_fonts');
Опция font-display: swap; важна — она предотвращает блокировку текста в ожидании загрузки шрифтов.
Отложенная загрузка шрифтов с помощью JavaScript
Можно подгружать шрифты асинхронно, чтобы не блокировать рендеринг страницы. Пример скрипта для динамической загрузки шрифтов:
function wpupdate_load_fonts_async() {
?>
<script>
if ('fonts' in document) {
document.fonts.load('1em WpupdateRoboto').then(function() {
document.documentElement.classList.add('fonts-loaded');
});
}
</script>
<?php
}
add_action('wp_footer', 'wpupdate_load_fonts_async');
В CSS добавьте стили для состояния загрузки шрифтов:
html {
font-family: sans-serif;
}
html.fonts-loaded {
font-family: 'WpupdateRoboto', sans-serif;
}
Оптимизация CSS для шрифтов: критический CSS и preconnect
Для ускорения отображения текста рекомендуется:
- Использовать тег
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>для ускорения соединения с сервером шрифтов. - Внедрять критический CSS с минимальным набором стилей шрифтов прямо в <head> страницы.
- Минимизировать количество используемых начертаний и наборов символов.
Пример подключения с preconnect:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
Проверка и мониторинг результата оптимизации
После внедрения оптимизаций обязательно проверьте скорость загрузки сайта с помощью инструментов:
Обратите внимание на метрики, связанные с отрисовкой текста (First Contentful Paint, Largest Contentful Paint) и количество запросов к серверам шрифтов.
Регулярный аудит поможет поддерживать оптимальную производительность и избежать проблем с загрузкой шрифтов при обновлении темы или плагинов.