Как ускорить загрузку веб-шрифтов

1. Используйте WOFF2

Это самый компактный распространённый формат. Если вы всё ещё отдаёте TTF или OTF, это самый простой выигрыш. Чтобы сконвертировать шрифты, воспользуйтесь генератором веб-шрифтов.

2. Удалите неиспользуемые символы

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

3. Загружайте меньше начертаний

Каждое начертание и курсив — это отдельный файл. Многим сайтам нужны только обычный и полужирный. Найдите в CSS начертания, которые больше не используются, и удалите их.

4. Рассмотрите вариативный шрифт

Если вам нужны три или более начертаний, один вариативный шрифт может весить меньше, чем несколько статичных файлов. Его можно уменьшить ещё сильнее, сузив диапазон весов в генераторе веб-шрифтов.

5. Предзагрузите основной шрифт

Обычно браузер находит шрифт только после того, как прочитает CSS. Предзагрузка позволяет начать загрузку раньше:

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

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

6. Настройте font-display

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

7. Кешируйте шрифты надолго

Файлы шрифтов меняются редко, поэтому пусть браузеры их сохраняют. Добавьте в имя файла версию или хеш, а затем отправьте заголовок:

Cache-Control: public, max-age=31536000, immutable

Измерьте результат

Проверьте страницу в тесте скорости страницы до и после изменений и сравните Largest Contentful Paint и смещение макета.