Оптимизация веб-шрифтов: font-display, предзагрузка, подмножества, системные шрифты. Как избежать невидимого текста и сдвигов вёрстки при загрузке шрифтов. Влияние шрифтов на LCP и CLS.
Введение
Вы заходите на сайт. Видите контент, начинаете читать. И вдруг текст дёргается — подгрузился кастомный шрифт, и всё поехало. Или хуже: первые две секунды вообще нет текста, белый экран, потому что браузер ждёт загрузки шрифта. Это проблемы, вызванные неоптимизированными веб-шрифтами. Они бьют по двум ключевым метрикам Core Web Vitals: LCP (пользователь не видит текст) и CLS (текст сдвигается после загрузки шрифта). Шрифты — это мелочь, о которой часто забывают. А зря: 10 минут оптимизации могут сократить LCP на секунду. В этой статье — конкретные методы ускорения загрузки шрифтов.
font-display: управляем поведением шрифтов
CSS-свойство font-display определяет, что показывать, пока кастомный шрифт загружается. Есть пять значений. Первое: auto — браузер сам решает, обычно прячет текст на 3 секунды. Самое плохое для LCP. Второе: block — браузер ждёт загрузки шрифта до 3 секунд, показывая невидимый текст. Если шрифт не загрузился, показывает запасной. Третье: swap — браузер сразу показывает запасной шрифт, а когда кастомный загрузится — заменяет. Лучший выбор для SEO, потому что текст виден сразу. Но может вызвать сдвиг вёрстки (FOUT — Flash of Unstyled Text). Четвёртое: fallback — браузер ждёт короткое время, если шрифт не загрузился — показывает запасной и больше не пытается заменить. Пятое: optional — браузер ждёт очень короткое время, затем показывает запасной и оставляет его. Для основного текста оптимален swap: текст виден сразу, шрифт подгружается асинхронно и заменяется. Для иконок и декоративных элементов — block или optional, чтобы не было мелькания системных иконок. Чтобы избежать сдвига вёрстки при swap, подберите запасной шрифт с похожими метриками (ширина символов, высота строки) и укажите size-adjust в font-face.
Предзагрузка шрифтов
По умолчанию браузер узнаёт о шрифте, только когда начинает парсить CSS. Это поздно: пока дойдёт до шрифта, пройдёт время. Предзагрузка решает проблему. Добавьте в head страницы link с rel="preload" и указанием пути к файлу шрифта. Браузер начнёт загрузку шрифта немедленно, не дожидаясь CSS. Важные правила предзагрузки. Первое: предзагружайте только критичные шрифты — те, которые используются на первом экране. Предзагрузка 10 шрифтов создаст лишнюю нагрузку. Второе: указывайте crossorigin="anonymous", даже если шрифт лежит на вашем же сервере. Без этого атрибута предзагрузка может не сработать. Третье: указывайте тип файла в as="font" и формат в type. Четвёртое: используйте предзагрузку в комбинации с font-display: swap. Предзагрузка ускоряет появление кастомного шрифта, swap гарантирует, что текст будет виден в любом случае.
Подмножества шрифтов
Полный файл шрифта может весить 200-500 КБ, потому что содержит символы всех языков. Если ваш сайт на русском, вам не нужны китайские иероглифы. Подмножество — это урезанная версия шрифта, содержащая только нужные символы. Как создать подмножество. Возьмите исходный файл шрифта, прогоните через инструмент генерации подмножеств (доступны онлайн-сервисы), укажите нужные языки (кириллица, латиница) и символы. На выходе получите файл в 5-10 раз меньше. Для стандартных шрифтов (Roboto, Open Sans) можно использовать Google Fonts с параметром text. В URL подключения шрифта добавьте text с нужными символами или subset=cyrillic. Это сократит загрузку только до нужного набора символов. Для кастомных шрифтов, загруженных на ваш сервер, создавайте подмножества через специальные инструменты. О том, как ещё ускорить сайт, читайте в статье Скорость загрузки сайта: как проверить и ускорить Core Web Vitals.
Системные шрифты: самый быстрый вариант
Самый быстрый шрифт — тот, который не нужно загружать. Системные шрифты уже установлены на устройстве пользователя: Arial, Helvetica, Times New Roman, Roboto (Android), San Francisco (iOS). Использование системного шрифта исключает загрузку внешних файлов и проблемы с FOIT/FOUT. Минусы: дизайн не уникален, выглядит «как у всех». Для контентных сайтов, блогов и информационных проектов системные шрифты — отличный выбор. Скорость загрузки и читаемость важнее уникальности дизайна. Компромисс: использовать системный шрифт для основного текста и кастомный — для заголовков. Заголовков меньше, шрифтовые файлы для них легче. Можно указать системный шрифт как fallback в font-family, а кастомный — как основной. Браузер сначала попробует загрузить кастомный, но если не успеет — покажет системный без сдвигов.
Локальное хранение шрифтов
Многие подключают шрифты с Google Fonts или других CDN. Это добавляет лишний DNS-запрос и соединение. Разместите файлы шрифтов на своём сервере. Плюсы: контроль над кешированием (ваши заголовки Cache-Control), меньше внешних запросов, не зависите от доступности стороннего сервера. Минусы: трафик идёт через ваш сервер. Для российских сайтов локальное хранение шрифтов особенно актуально: Google Fonts может загружаться медленно из-за санкционных ограничений. Скачайте нужные шрифты в форматах woff2 и woff (для старых браузеров), загрузите на сервер, пропишите font-face в CSS. Разница в скорости может быть заметной.
Часто задаваемые вопросы
Сколько шрифтов можно использовать на сайте? Оптимально — 1-2 семейства. Каждый дополнительный шрифт увеличивает объём загрузки и время отрисовки. Используйте разные начертания одного семейства, а не разные шрифты.
Как проверить, что шрифты замедляют сайт? В PageSpeed Insights посмотрите на рекомендации «Обеспечьте отображение текста во время загрузки веб-шрифтов». В Lighthouse вкладка Performance покажет время загрузки шрифтов. В панели разработчика вкладка Network с фильтром Font покажет все запросы шрифтов и их размер.
Что такое FOIT и FOUT? FOIT — невидимый текст во время загрузки шрифта. FOUT — видимый текст системным шрифтом, который заменяется кастомным. FOIT хуже для пользователя (ничего не видно), FOUT лучше (текст виден сразу). font-display: swap вызывает FOUT, что оптимально.
Можно ли отказаться от кастомных шрифтов ради скорости? Да, для многих проектов это оправдано. Хорошо подобранный системный шрифт не уступает по читаемости, а скорость загрузки растёт. Проведите A/B тест: сравните конверсию с кастомным и системным шрифтом.
Как шрифты влияют на CLS? Когда кастомный шрифт загружается и заменяет системный, размеры символов могут отличаться, и вёрстка сдвигается. Это фиксится через size-adjust в font-face, подбор fallback-шрифта с похожими метриками и резервирование места под текст.
