Веб-шрифты стали неотъемлемой частью современного веб-дизайна, но их неправильное использование может значительно замедлить загрузку страниц. В этой статье мы рассмотрим практические методы оптимизации загрузки шрифтов без ущерба для дизайна.
Проблема FOIT и FOUT
При загрузке веб-шрифтов пользователи могут столкнуться с двумя основными проблемами:
- FOIT (Flash of Invisible Text) - текст не отображается, пока шрифт не загрузится полностью
- FOUT (Flash of Unstyled Text) - текст сначала отображается системным шрифтом, а затем переключается на веб-шрифт
Обе ситуации ухудшают пользовательский опыт. Оптимизация позволяет свести эти проблемы к минимуму.
Стратегии оптимизации
1. Выбор правильного формата
Современные браузеры поддерживают несколько форматов веб-шрифтов:
| Формат | Преимущества | Недостатки | Когда использовать |
|---|---|---|---|
| WOFF2 | Наилучшее сжатие, поддержка в 95% браузеров | Не поддерживается в IE11 | Основной формат для всех современных браузеров |
| WOFF | Хорошее сжатие, широкая поддержка | Больше размер файла, чем WOFF2 | Для старых браузеров как fallback |
| TTF/OTF | Поддержка в очень старых браузерах | Большой размер файла | Только если требуется поддержка древних систем |
@font-face {
font-family: 'Roboto';
src: url('roboto.woff2') format('woff2'),
url('roboto.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
2. Подзагрузка шрифтов
Используйте атрибут rel="preload" для критически важных шрифтов:
Результат: Предзагрузка шрифтов может сократить время их загрузки на 500-1000мс
3. Стратегия font-display
Свойство CSS font-display позволяет контролировать поведение загрузки шрифта:
| Значение | Поведение | Использование |
|---|---|---|
| auto | Браузер определяет поведение (обычно как block) | Не рекомендуется |
| block | Короткий период невидимого текста (FOIT) | Для важных текстовых элементов |
| swap | Системный шрифт показывается сразу (FOUT) | Основной вариант для большинства случаев |
| fallback | Короткий FOIT (100ms), затем FOUT | Баланс между FOUT и FOIT |
| optional | Шрифт используется только если загрузился быстро | Когда шрифт не критичен |
Важно: Для кириллических шрифтов всегда используйте font-display: swap из-за их большего размера
4. Уменьшение количества вариантов шрифта
Каждый начертание (Regular, Bold, Italic) — это отдельный файл. Стратегии:
- Используйте только необходимые начертания
- Рассмотрите синтетическое жирное начертание (font-synthesis)
- Для кириллицы используйте подмножество глифов
pyftsubset Roboto-Regular.ttf \
--output-file=Roboto-Cyrillic.woff2 \
--flavor=woff2 \
--text-file=cyrillic-chars.txt
5. Кэширование шрифтов
Настройте долгосрочное кэширование для шрифтовых файлов:
<FilesMatch "\.(woff2|woff)$">
Header set Cache-Control "public, max-age=31536000, immutable"
</FilesMatch>
Практический пример
Оптимизированная загрузка шрифта Roboto:
<link rel="preload" href="roboto-regular.woff2" as="font" type="font/woff2" crossorigin>
/* CSS */
@font-face {
font-family: 'Roboto';
src: url('roboto-regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Roboto';
src: url('roboto-bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
body {
font-family: system-ui, -apple-system, sans-serif;
}
.font-loaded body {
font-family: 'Roboto', sans-serif;
}
Результат оптимизации: Сокращение времени загрузки шрифтов с 1200мс до 300мс, устранение FOIT
Применяя эти техники, вы сможете значительно улучшить производительность загрузки веб-шрифтов и обеспечить плавный визуальный опыт для пользователей.
← Назад к статьям