В современном вебе скорость загрузки страницы — один из ключевых факторов успеха. Google сделал Core Web Vitals (LCP, CLS, FID) официальными сигналами ранжирования. И хотя многие разработчики сосредотачиваются на оптимизации изображений и JavaScript, шрифты часто остаются недооцененной, но критически важной частью пазла. Неправильная загрузка шрифтов может вызывать смещение макета (CLS) и задержку отображения текста (LCP), что напрямую ухудшает пользовательский опыт и позиции в поиске.
Когда браузер загружает веб-шрифт, он сталкивается с дилеммой: пока шрифт не загружен, текст может быть невидимым (Flash of Invisible Text — FOIT) или отображаться запасным шрифтом (Flash of Unstyled Text — FOUT). Оба сценария негативно сказываются на метриках. FOIT увеличивает LCP, так как контент задерживается. FOUT может вызвать CLS, если загруженный шрифт имеет другую ширину символов, что приводит к перерисовке макета. По данным Google, до 30% проблем с CLS связаны именно с неправильной загрузкой шрифтов.
Первый шаг — выбор стратегии подключения. Self-hosting (хранение шрифтов на своем сервере) предпочтительнее, чем использование CDN Google Fonts, так как это устраняет лишний DNS-запрос и дает полный контроль над кэшированием. Используйте современные форматы: WOFF2 обеспечивает лучшее сжатие (до 50% меньше, чем TTF). Также применяйте subsetting — удаление неиспользуемых символов (например, кириллицы для англоязычного сайта). Инструменты типа glyphhanger или fonttools помогут создать минимальный набор глифов.
CSS-свойство font-display контролирует поведение браузера во время загрузки шрифта. Рекомендуемое значение для большинства сайтов — swap. Оно показывает текст сразу системным шрифтом, а затем заменяет его на загруженный. Это предотвращает FOIT и уменьшает LCP. Однако swap может вызвать FOUT. Если дизайн требует минимального мерцания, используйте optional — браузер загрузит шрифт, только если он успеет за короткий таймаут (около 100 мс), иначе останется системный шрифт. Пример: @font-face { font-family: 'MyFont'; src: url('myfont.woff2'); font-display: swap; }.
Чтобы шрифт для заголовка (часто являющегося LCP-элементом) загружался максимально быстро, используйте preload. Добавьте в <head>: <link rel="preload" href="fonts/myfont.woff2" as="font" type="font/woff2" crossorigin>. Это заставит браузер начать загрузку шрифта до того, как CSS будет полностью обработан. Важно: предзагружайте только 1-2 критических шрифта, иначе это может ухудшить производительность из-за конкуренции за пропускную способность. Также убедитесь, что атрибут crossorigin присутствует, если шрифт загружается с другого домена.
Вот простой чеклист для быстрой проверки:
swap или optional в @font-face.Оптимизация загрузки шрифтов — это не просто техническая деталь, а важный шаг к улучшению Core Web Vitals и пользовательского опыта. Правильное использование font-display, предзагрузка критических шрифтов, self-hosting и subsetting могут значительно сократить LCP и CLS. Начните с аудита текущей загрузки шрифтов с помощью Lighthouse или PageSpeed Insights, затем примените описанные техники. Результат не заставит себя ждать: более быстрый сайт, довольные пользователи и улучшенные позиции в поиске.
