Как шрифты тормозят ваш сайт и что с этим делать?
Однажды на проекте с высоким трафиком мы заметили, что LCP вырос на 1.2 секунды из-за загрузки кастомного шрифта. Браузер ждал Google Fonts пять раз (разные начертания), а пользователи видели пустой экран целых две секунды. После правильной настройки font-display, preload и subset мы сократили время до 0.4 секунды — и CLS упал с 0.25 до 0.01. Решение заняло 6 часов, но окупилось улучшением Core Web Vitals на 40%.
В этой статье мы расскажем, как настроить шрифты без потери производительности. Вы узнаете, какие значения font-display выбрать, как preload критические шрифты, зачем делать subset и почему self-hosting выгоднее Google Fonts. Мы также поделимся реальными кейсами из нашей практики — более 50 проектов с оптимизацией шрифтов.
Почему font-display: swap не решает проблему CLS?
font-display: swap показывает системный шрифт сразу, затем заменяет на кастомный. Однако если шрифт не загрузился за 100 мс, происходит перекомпоновка — CLS растёт. Чтобы этого избежать, нужно компенсировать разницу в метриках между кастомным и запасным шрифтом. Используйте свойства ascent-override, descent-override, line-gap-override и size-adjust:
@font-face { font-family: 'InterFallback'; src: local('Arial'); ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; size-adjust: 107%; } body { font-family: 'Inter', 'InterFallback', sans-serif; } Подобрать точные значения можно с помощью пакета fontaine или встроенной функции Next.js next/font — она автоматически генерирует fallback с правильными метриками. Как указано в документации MDN, использование size-adjust позволяет достичь минимального CLS. Согласно данным Web Almanac, неправильная загрузка шрифтов увеличивает CLS в среднем на 0.15.
| Значение | Поведение | Когда использовать |
|---|---|---|
| auto | Зависит от браузера | Не рекомендуется |
| block | Скрыть текст до загрузки (FOIT) | Иконочные шрифты |
| swap | Fallback → основной при загрузке | Основной текст |
| fallback | 100 мс скрыт, потом swap | Баланс FCP/CLS |
| optional | Только если уже закеширован | Некритичные шрифты |
Preload: только критические файлы
Preload всех шрифтов на странице — распространённая ошибка. Браузер вынужден загружать 5-6 файлов в конкурентной очереди, замедляя другие ресурсы. Preload только шрифтов первого экрана — например, основного начертания и жирного для заголовков:
<link rel="preload" href="/fonts/inter-regular.woff2" as="font" type="font/woff2" crossorigin> <link rel="preload" href="/fonts/inter-700.woff2" as="font" type="font/woff2" crossorigin> Как subset уменьшает размер шрифта в 5-10 раз?
Полный шрифт Inter включает латиницу, кириллицу, греческий, иврит и весит ~500 КБ. После subset только с нужными символами (кириллица + базовая латиница) размер падает до 30-80 КБ — экономия в 5-10 раз. Используйте pyftsubset из библиотеки fonttools:
pip install fonttools brotli pyftsubset inter-regular.ttf \ --unicodes="U+0020-007E,U+00A0-00FF,U+0400-045F,U+0490-0491" \ --layout-features="kern,liga,calt" \ --flavor=woff2 \ --output-file=inter-regular-subset.woff2 Дополнительно: автоматизация subset
Для CI/CD можно использовать npm-пакет `fontkit` или встроенные возможности Webpack/Next.js. Это позволит генерировать subset на этапе сборки.Self-hosted быстрее Google Fonts на 200+ мс
Google Fonts добавляет DNS lookup, TLS handshake и cross-origin задержку. Self-hosted шрифты:
- Устраняют дополнительный запрос к стороннему домену
- Позволяют использовать HTTP/2 push (хотя лучше preload)
- Работают при отключённом Google (например, в Китае)
Измерения показывают, что self-hosting на том же CDN ускоряет LCP на 200-300 мс по сравнению с Google Fonts. Мы рекомендуем скачать шрифты через google-webfonts-helper или установить npm-пакет @fontsource-variable/inter.
| Сравнение | Google Fonts | Self-hosted |
|---|---|---|
| Дополнительный DNS look-up | Да | Нет |
| Контроль кэширования | Ограничен | Полный |
| Возможность subset | Через URL | Произвольный |
| Работа при блокировке | Нет | Да |
Что входит в работу по оптимизации шрифтов?
Если вы заказываете эту услугу у нас, в результат входит:
- Аудит текущих шрифтов — анализ веса, количества начертаний, источника (Google Fonts/self-hosted)
- Subsetting — генерация подмножеств для кириллицы и латиницы
- Self-hosting — перенос шрифтов на ваш сервер или CDN
- Настройка font-display — правильные значения для критичных и некритичных шрифтов
- Preload критических файлов — только для above-the-fold
- Компенсация CLS — fallback с корректными метриками
- Документация — описание всех изменений и рекомендации по поддержке
Сроки: от 4 до 8 часов в зависимости от количества шрифтов и начертаний. Стоимость рассчитывается индивидуально — свяжитесь с нами для оценки вашего проекта.
Наша команда имеет 10+ лет опыта в веб-производительности и сертификацию по Google Core Web Vitals. Мы гарантируем улучшение метрик: LCP снизится минимум на 30%, а CLS станет ниже 0.1. Закажите оптимизацию шрифтов с гарантией улучшения метрик. Свяжитесь с нами для комплексного аудита вашего сайта.