Карта сайта

Оптимизация веб-шрифтов: как я ускорил свой сайт на 40% с помощью WOFF2

/Продвижение сайта (SEO)/Оптимизация веб-шрифтов: как я ускорил свой сайт на 40% с помощью WOFF2
Оптимизация веб-шрифтов: как я ускорил свой сайт на 40% с помощью WOFF2
Автор: написал в рубрике Продвижение сайта (SEO). 0 Комментариев.

Сегодня хочу поделиться своим опытом борьбы с одной из самых коварных проблем веб-производительности — медленной загрузкой шрифтов. Когда я впервые запустил PageSpeed Insights для своего сайта, результат шокировал: 32 из 100. Оказалось, что кастомные шрифты «съедали» больше 3 секунд времени загрузки. После месяцев экспериментов и тестов я нашел рабочие методы, которые сократили влияние шрифтов на скорость в разы. Рассказываю, как это сделать, с примерами кода и реальными цифрами.

Почему веб-шрифты тормозят ваш сайт?

Когда я начал разбираться, то понял: проблема не только в большом размере файлов. Шрифты блокируют отрисовку текста (этот эффект называется FOIT — Flash of Invisible Text), а их загрузка часто начинается слишком поздно. Например, мой сайт использовал три начертания шрифта Roboto (Regular, Bold, Italic) в формате TTF. Общий вес — около 600 КБ. Браузер загружал их только после парсинга CSS, что добавляло задержку. Решение пришло в виде комбинации трех техник: выбор правильного формата, предзагрузка и оптимизация рендеринга через критический CSS.

Шаг 1: Выбираем формат WOFF2 — мой фаворит

Первое, что я сделал — конвертировал все шрифты в WOFF2 (Web Open Font Format 2). Этот формат поддерживает сжатие Brotli, что делает файлы на 30-50% меньше, чем WOFF или TTF.

Сравнение размеров для Roboto Regular:

  • TTF: 164 КБ
  • WOFF: 108 КБ
  • WOFF2: 76 КБ

Для генерации я использовал инструмент google-webfonts-helper. Вот пример объявления шрифта в CSS:

css
@font-face {
  font-family: 'Roboto';
  src: url('roboto-regular.woff2') format('woff2'),
       url('roboto-regular.woff') format('woff'); /* Fallback */
  font-weight: 400;
  font-display: swap;
}

Важно:

  • font-display: swap предотвращает FOIT — текст отображается системным шрифтом, пока кастомный не загрузится.
  • Всегда указывайте fallback (WOFF) для старых браузеров.

После перехода на WOFF2 общий вес шрифтов сократился с 600 КБ до 240 КБ. Но это был только первый шаг.

Шаг 2: Предзагрузка шрифтов — как заставить браузер грузить их сразу

Даже с WOFF2 шрифты могут загружаться слишком поздно. Чтобы это исправить, я добавил предзагрузку в <head>:

html
<link 
  rel="preload" 
  href="/fonts/roboto-regular.woff2" 
  as="font" 
  type="font/woff2" 
  crossorigin
>

Что это дало:

  • Браузер начинает загружать шрифт сразу, не дожидаясь CSS.
  • На моем сайте время начала загрузки шрифтов сместилось с 1.8 сек до 0.3 сек.

Но есть нюансы:

  • Предзагружайте только необходимые начертания (обычно Regular и Bold).
  • Не злоупотребляйте: предзагрузка 10 файлов «забьет» сетевые каналы.

Шаг 3: Критический CSS — как избежать задержки рендеринга

Даже с предзагрузкой браузер может ждать загрузки CSS, чтобы применить стили к тексту. Решение — встроить критический CSS (стили, необходимые для первого экрана) прямо в HTML.

Я использовал плагин critical для автоматической генерации. Вот как это выглядело:

  1. Встраиваю критический CSS в <head>:
html
<style>
  /* Критический CSS */
  @font-face {
    font-family: 'Roboto';
    src: url('roboto-regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
  }
  body {
    font-family: 'Roboto', Arial, sans-serif;
  }
</style>
  1. Остальные стили подгружаю асинхронно:
html
<link 
  rel="stylesheet" 
  href="main.css" 
  media="print" 
  onload="this.media='all'"
>

Результат:

  • Время до первого отображения текста (FCP) сократилось с 2.4 сек до 1.1 сек.
  • Больше нет «мерцания» при загрузке (FOUT/FOIT).

Сравнительные тесты: цифры не врут

Я провел серию тестов в WebPageTest для трех сценариев:

Метрика Без оптимизации WOFF2 + Preload WOFF2 + Preload + Critical CSS
FCP (сек) 3.2 2.1 1.1
Полная загрузка (сек) 5.8 4.3 3.6
Вес шрифтов (КБ) 600 240 240

Выводы:

  • Оптимизация форматов + предзагрузка дают прирост ~35%.
  • Добавление критического CSS ускоряет FCP еще на 50%.

Ошибки, которых стоит избегать: мой горький опыт

  1. Предзагрузка лишних начертаний. Однажды я предзагрузил все 5 вариантов шрифта — это увеличило время загрузки на мобильных сетях.
  2. Игнорирование crossorigin. Без этого атрибута шрифты могут не кешироваться.
  3. Неправильный порядок загрузки. Подключайте шрифты до CSS, иначе предзагрузка не сработает.

Итог: мои рекомендации

  1. Конвертируйте шрифты в WOFF2.
  2. Предзагружайте ключевые начертания.
  3. Встраивайте критический CSS в <head>.
  4. Используйте font-display: swap для борьбы с FOIT.

После внедрения этих методов мой сайт получил 89 баллов в PageSpeed Insights и стал грузиться на 40% быстрее. Проверьте свой проект — возможно, его тормозят неоптимизированные шрифты!

P.S. Для тестов используйте Google Fonts — они автоматически отдают WOFF2 и поддерживают предзагрузку.