Кастомные шрифты - одна из главных причин плохого LCP. Браузер не рендерит текст, пока не загрузит шрифт. Вот как оптимизировать.
Основные методы
1. font-display: swap. Браузер сразу показывает текст системным шрифтом, потом подменяет на кастомный после загрузки. Минус: заметна «подмена» (FOUT).
2. Preload основного шрифта.
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>
Браузер начинает загрузку шрифта до парсинга CSS.
3. Формат WOFF2. На 30% компактнее WOFF. Поддерживается всеми современными браузерами.
4. Подмножество (subsetting). Если используете только кириллицу - вырежьте латиницу, греческий и другие символы. Размер файла уменьшится на 50-70%.
Продвинутые методы
- Inline критический CSS с @font-face: шрифт начинает загружаться максимально рано
- Self-hosted вместо Google Fonts: один запрос к своему серверу вместо двух к Google (CSS + шрифт)
- Ограничьте количество: 1-2 шрифта × 2 начертания (regular + bold) - максимум 4 файла
Если скорость критична
Используйте системный стек: font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif. Ноль загрузки, отличная читаемость.
Для оптимизации кастомных шрифтов также рекомендую использовать инструменты вроде Font Subsetter или Glyphhanger, которые помогают автоматически создавать подмножества шрифтов, оставляя только необходимые символы. Это значительно уменьшает размер файла. Ещё один лайфхак - подключение шрифтов через Google Fonts с параметром &display=swap, что автоматически включает стратегию замены. Если вы используете локальные шрифты, убедитесь, что они сжаты в формате WOFF2 и загружаются через preload. Также проверьте, что шрифты не блокируют рендеринг, используя инструменты вроде Lighthouse или WebPageTest, чтобы отследить их влияние на производительность.
Важно помнить, что не всегда кастомные шрифты - лучшее решение. Если сайт критичен к скорости, рассмотрите использование системных шрифтов или ограничьтесь одним-двумя кастомными. Это снизит количество HTTP-запросов и улучшит общую производительность. Также не забывайте про кэширование шрифтов через заголовки Cache-Control, чтобы повторные посещения были быстрее.