Страница загружается быстро, но текст появляется с задержкой. Или пользователи видят пустой экран, пока не загрузятся шрифты. Это классическая проблема блокировки рендера веб-шрифтами. Разберём, почему шрифты блокируют отрисовку, как найти проблему и как настроить загрузку так, чтобы текст появлялся мгновенно.
Почему шрифты блокируют рендер
Когда браузер встречает в CSS правило @font-face, он должен загрузить файл шрифта, прежде чем отрисовать текст. Пока шрифт не загружен, браузер может:
— скрыть текст (FOIT — Flash of Invisible Text);
— показать текст системным шрифтом (FOUT — Flash of Unstyled Text);
— показать пустое место до загрузки.
По умолчанию поведение зависит от браузера. Chrome и Firefox скрывают текст на время до 3 секунд, потом показывают fallback. Это означает, что при медленной загрузке шрифта пользователь видит пустую страницу. Именно это называют блокировкой рендера.
Чем больше шрифтов и начертаний, тем дольше загрузка. Один шрифт с четырьмя начертаниями — это четыре отдельных файла, каждый из которых может блокировать рендер.
Как найти блокирующие шрифты
Проверку удобно вести по шагам:
— откройте инструменты разработчика, вкладка Network;
— отфильтруйте запросы по типу Font;
— посмотрите, сколько шрифтов загружается;
— проверьте размер каждого файла;
— проверьте, блокируют ли они рендер;
— проверьте, есть ли preload для критичных шрифтов.
Для быстрой проверки используйте проверка HTTP-запросов — инструмент покажет, сколько запросов делает страница и какие из них могут задерживать загрузку. Если шрифтов много и они крупные, это влияет на скорость.
Также полезно проверить, не загружаются ли шрифты, которые не используются. Часто после редизайна в CSS остаются @font-face для старых начертаний, которые больше не применяются.
Что такое font-display и как он помогает
Свойство font-display управляет поведением текста во время загрузки шрифта. Основные значения:
— auto — поведение по умолчанию, зависит от браузера;
— block — текст скрыт до загрузки шрифта (до 3 секунд), затем fallback;
— swap — текст сразу показывается fallback-шрифтом, затем заменяется на загруженный;
— fallback — короткий период скрытия (до 100 мс), затем fallback, затем замена;
— optional — шрифт загружается в фоне, но не заменяет fallback, если не успел.
Для большинства сайтов оптимально font-display: swap. Текст появляется мгновенно системным шрифтом, а затем заменяется на кастомный. Это устраняет блокировку рендера, хотя и создаёт кратковременное изменение внешнего вида.
Если важна точность отображения (например, для логотипа), можно использовать font-display: optional — шрифт загружается, но не заменяет fallback, если не успел вовремя.
Preload для критичных шрифтов
Preload сообщает браузеру, что шрифт нужно загрузить как можно раньше. Это особенно полезно для шрифтов, которые используются в первом экране.
Пример:
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>
Важные моменты:
— preload нужно указывать только для действительно критичных шрифтов;
— обязательно указывать crossorigin, иначе браузер загрузит шрифт дважды;
— не стоит preload-ить все шрифты — это создаст конкуренцию за带宽;
— preload не заменяет font-display, а дополняет его.
Если preload указан для шрифта, который не используется на первом экране, это только замедлит загрузку других ресурсов.
Fallback-шрифты и метрики
Даже с font-display: swap замена шрифта может вызвать сдвиг текста (layout shift). Это влияет на CLS — одну из метрик Core Web Vitals.
Чтобы уменьшить сдвиг:
— подберите fallback-шрифт, близкий по метрикам к основному;
— используйте свойство size-adjust, чтобы выровнять размеры;
— используйте ascent-override, descent-override, line-gap-override;
— проверьте CLS после настройки.
Современные инструменты позволяют автоматически подобрать fallback-шрифт с близкими метриками. Это снижает визуальный сдвиг при замене шрифта.
Как исправить блокировку рендера
Пошаговый план:
— определите, какие шрифты реально используются;
— удалите неиспользуемые @font-face;
— добавьте font-display: swap для основных шрифтов;
— добавьте preload для критичных шрифтов первого экрана;
— подберите fallback-шрифт с близкими метриками;
— проверьте CLS и скорость загрузки;
— проверьте результат на мобильных.
Если шрифтов много, рассмотрите переход на variable fonts — один файл вместо нескольких начертаний. Это уменьшает количество запросов и размер загрузки.
Как проверить результат
Чек-лист:
— текст появляется мгновенно, без пустого экрана;
— шрифты не блокируют рендер;
— preload указан только для критичных шрифтов;
— CLS в пределах нормы;
— количество запросов шрифтов уменьшилось;
— на мобильных текст отображается корректно.
Если нужно проверить сразу несколько параметров скорости — шрифты, сжатие, TTFB, запросы — логично перейти к SEO-аудиту.
Частые ошибки при работе со шрифтами
— отсутствие font-display;
— preload для всех шрифтов;
— preload без crossorigin;
— неиспользуемые @font-face в CSS;
— слишком много начертаний;
— fallback-шрифт с другими метриками;
— отсутствие проверки на мобильных;
— загрузка шрифтов с внешнего CDN без необходимости.
FAQ
Что такое блокировка рендера шрифтами?
Это ситуация, когда браузер не отрисовывает текст, пока не загрузит шрифт. Пользователь видит пустой экран или задержку появления текста.
Какое значение font-display использовать?
Для большинства сайтов оптимально swap. Для логотипов и критичных элементов — optional. Значение block использовать не рекомендуется.
Нужен ли preload для шрифтов?
Да, но только для критичных шрифтов первого экрана. Preload для всех шрифтов замедлит загрузку других ресурсов.
Почему preload без crossorigin не работает?
Шрифты загружаются в режиме CORS. Без атрибута crossorigin браузер загрузит шрифт дважды — один раз для preload, второй раз для использования.
Как уменьшить сдвиг текста при замене шрифта?
Подберите fallback-шрифт с близкими метриками и используйте size-adjust, ascent-override, descent-override.
Влияют ли шрифты на SEO?
Косвенно. Блокировка рендера ухудшает Core Web Vitals, а это фактор ранжирования. Медленная загрузка снижает пользовательский опыт.
Сколько шрифтов можно загружать?
Чем меньше, тем лучше. Один-два шрифта с двумя-тремя начертаниями — разумный минимум. Variable fonts позволяют сократить количество файлов.
Что делать, если шрифт загружается с внешнего CDN?
Проверьте, действительно ли он нужен. Если да, убедитесь, что CDN быстрый и поддерживает HTTP/2. Иногда лучше разместить шрифт локально.
Как проверить, блокируют ли шрифты рендер?
Откройте инструменты разработчика, вкладка Performance, и посмотрите, когда появляется первый текст. Если текст появляется после загрузки шрифтов — они блокируют рендер.
Можно ли вообще не использовать кастомные шрифты?
Можно. Системные шрифты загружаются мгновенно и не блокируют рендер. Если кастомный шрифт не критичен для бренда, отказ от него ускорит сайт.
