Шрифты грузятся слишком долго (FOIT/FOUT)
Custom-fonts от Google или подгружаемые отдельно. font-display: swap, preload, локальное хранение.
Симптом
- На странице виден «пустой» текст, который позже заменяется на шрифт после загрузки (FOIT).
- Текст отображается сразу, но «прыгает» в другой шрифт, когда загружается пользовательский (FOUT).
- Время до первого отображения текста (TTFCP) увеличивается на несколько секунд.
- В инструментах разработчика в вкладке Network видны запросы к файлам
*.woff2/*.woffс длительным временем загрузки. - В Lighthouse/Chrome UX Report показатель «Largest Contentful Paint» выше нормы.
Причина
- Отсутствие
font-display– браузер ждёт полной загрузки шрифта, пока не отобразит текст. - Неправильный порядок загрузки – шрифты загружаются после рендеринга, а не в начале.
- Слишком большой размер файлов – отсутствие сжатия (woff2) и неиспользуемые глифы.
- Отсутствие
preload– браузер не приоритизирует шрифты, поэтому они загружаются позже. - Серверные заголовки –
Cache-Controlслишком короткий,Content-Typeневерный,ETagне используется.
Как проверить
| Шаг | Команда/действие | Что искать |
|---|---|---|
| 1 | Открой DevTools → Network → фильтр font |
Время загрузки, статус 200, размер файла |
| 2 | DevTools → Performance → запись | Время до первого рендеринга текста, наличие FOIT/FOUT |
| 3 | Lighthouse → Performance → Fonts | font-display значение, preload статус |
| 4 | В консоли: document.fonts.ready |
Сколько времени занимает загрузка всех шрифтов |
| 5 | Проверка заголовков: curl -I https://example.com/fonts/Roboto.woff2 |
Cache-Control, Content-Type, ETag |
Решение
1. Добавить font-display: swap
@font-face {
font-family: 'Roboto';
src: url('/fonts/Roboto.woff2') format('woff2');
font-display: swap; /* fallback to fallback font immediately */
}
swap гарантирует, что текст отобразится сразу, а пользовательский шрифт заменит его позже.
2. Применить preload в <head>
<link rel="preload" href="/fonts/Roboto.woff2" as="font" type="font/woff2" crossorigin>
crossorigin нужен, если шрифт находится на другом домене.
3. Уменьшить размер файлов
- Использовать
woff2вместоwoff. - Удалить неиспользуемые глифы с помощью
fonttoolsили онлайн‑инструментов. - Настроить
subsettingпри генерации шрифта.
4. Настроить кэширование
Cache-Control: public, max-age=31536000, immutable
Добавьте этот заголовок в конфигурацию сервера (nginx, Apache, CloudFront).
5. Проверить порядок загрузки
Убедитесь, что <link rel="preload"> находится выше всех <link rel="stylesheet">, а CSS-файлы, содержащие @font-face, загружаются после preload.
6. Минимизировать количество запросов
Если используете несколько шрифтов, объедините их в один файл (если это возможно) или используйте @font-face только для необходимых весов.
7. Использовать font-display: optional для критических шрифтов
Если шрифт не критичен, можно применить optional, чтобы браузер мог отказаться от него, если загрузка занимает слишком много времени.
Связанные
Не хотите разбираться сами?
Запустите технический аудит сайта за 5 минут — получите PDF-отчёт с разбором всех 64 параметров и конкретными точками роста. Или закажите комплексное SEO-продвижение сайта — починим всё это и возьмём на себя дальнейшую оптимизацию.