Оптимизация внешних шрифтов в WordPress без задержек загрузки

Внешние шрифты, такие как Google Fonts, широко используются в WordPress-сайтах для улучшения дизайна и читаемости. Однако они могут значительно замедлять загрузку страниц, особенно если шрифты подключаются неправильно. В этой статье мы подробно рассмотрим, как оптимизировать загрузку внешних шрифтов в WordPress, чтобы улучшить скорость сайта без потери визуального качества.

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

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

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

Методы оптимизации загрузки внешних шрифтов в WordPress

1. Локальное хранение шрифтов

Самый эффективный способ – скачать нужные шрифты и хранить их на сервере вместе с сайтом. Это сокращает количество внешних запросов и дает полный контроль над загрузкой.

Для локального подключения шрифтов выполните следующие шаги:

1. Скачайте нужные шрифты с Google Fonts или другого источника.
2. Загрузите файлы шрифтов в папку вашей темы, например, wp-content/themes/your-theme/fonts/.
3. Добавьте подключение шрифтов в style.css вашей темы:

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

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

2. Использование свойства font-display с Google Fonts

Если локальное хранение невозможно, можно оптимизировать загрузку через Google Fonts, добавив параметр display=swap в URL шрифтов. Это позволяет браузеру показывать запасной шрифт сразу, а затем заменять его на нужный при загрузке.

Пример подключения с помощью wp_enqueue_style:

function wpspeed_enqueue_google_fonts() {
  wp_enqueue_style('wpspeed-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', [], null);
}
add_action('wp_enqueue_scripts', 'wpspeed_enqueue_google_fonts');

3. Предварительная загрузка шрифтов (Preload)

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

Добавьте следующий код в функцию подключения шрифтов:

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

Важно указать атрибут crossorigin, чтобы избежать проблем с CORS.

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

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

• OMGF (Optimize My Google Fonts) — скачивает шрифты Google и подключает локально.
• Clearfy Pro — содержит модуль оптимизации загрузки шрифтов среди прочих функций для ускорения WordPress.

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

Практический пример: локальное подключение Google Fonts с preload и font-display

Давайте соберём вместе оптимальное подключение шрифтов в вашей теме WordPress.

1. Скачайте нужные шрифты, например Roboto в форматах .woff и .woff2.

2. Загрузите их в папку fonts темы.

3. Добавьте в functions.php темы следующий код:

function wpspeed_enqueue_local_fonts() {
  wp_enqueue_style('wpspeed-local-fonts', get_template_directory_uri() . '/fonts/local-fonts.css', [], null);
}
add_action('wp_enqueue_scripts', 'wpspeed_enqueue_local_fonts');

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

4. Создайте файл local-fonts.css в папке fonts с содержимым:

@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-display swap, что значительно ускорит отображение текста и улучшит пользовательский опыт.

Как проверить эффективность оптимизации шрифтов

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

• Google PageSpeed Insights — покажет рекомендации по шрифтам.
• Инструменты разработчика браузера — во вкладке Network можно отследить загрузку файлов шрифтов.
• WebPageTest — детальный анализ загрузки ресурсов.

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

Заключение по оптимизации внешних шрифтов в WordPress

Оптимизация внешних шрифтов — обязательный шаг для любого WordPress-сайта, который хочет быть быстрым и удобным для пользователей. Локальное хранение шрифтов в сочетании с preload и font-display swap — лучший способ минимизировать задержки и избежать проблем с отображением текста. Если вы не хотите заниматься этим вручную, рекомендуем обратить внимание на плагины вроде Clearfy Pro или OMGF, которые автоматизируют процесс.

Для дополнительной информации и плагинов для оптимизации посетите wpshop.ru.