Современные стратегии загрузки шрифтов для веб-производительности

Веб-шрифты могут как улучшить, так и испортить производительность вашего сайта. Плохо реализованная стратегия шрифтов приводит к невидимому тексту, сдвигам макета и разочарованным пользователям. Тем не менее, большинство разработчиков до сих пор загружают шрифты как в 2015 году — отправляя массивные файлы, игнорируя современные возможности CSS и надеясь на лучшее.

Эта статья охватывает практические стратегии загрузки шрифтов, которые вы можете внедрить уже сегодня: использование сжатия WOFF2, управление рендерингом с помощью font-display, интеллектуальное подмножество шрифтов, использование стеков системных шрифтов в качестве запасных вариантов, предварительная загрузка критически важных шрифтов и внедрение вариативных шрифтов там, где это имеет смысл. Вы узнаете, как сбалансировать производительность с типографикой, улучшая при этом Core Web Vitals.

Выбирайте WOFF2 и исключайте устаревшие форматы

Прекратите поставлять множественные форматы шрифтов. WOFF2 обеспечивает на 30% лучшее сжатие, чем WOFF, и имеет универсальную поддержку браузеров. Если вы не поддерживаете IE11, WOFF2 — это все, что вам нужно.

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-display: swap;
}

Поставка TTF, OTF или WOFF вместе с WOFF2 расходует пропускную способность впустую. Каждый посетитель платит налог производительности за браузеры, которые практически не существуют. Конвертируйте существующие шрифты с помощью FontSquirrel или CloudConvert.

Управляйте рендерингом с помощью font-display

Дескриптор font-display определяет, как браузеры обрабатывают промежуток между запросом шрифта и рендерингом:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-display: swap; /* Показать запасной вариант немедленно */
}

Ваши варианты:

• swap: Показывает запасной текст немедленно, меняет местами когда готов (предотвращает FOIT)
• fallback: Краткий невидимый период (~100мс), затем запасной вариант
• optional: Использует шрифт только если доступен немедленно
• block: Скрывает текст до 3 секунд (избегайте этого)

Для основного текста используйте swap. Для декоративных шрифтов рассмотрите optional. Эта единственная строка может устранить проблему невидимого текста.

Внедряйте умное подмножество шрифтов

Большинство сайтов поставляют целые наборы символов, которые никогда не будут использоваться. Полный шрифт Latin Extended может превышать 100KB, в то время как ваш англоязычный сайт может нуждаться только в 30KB глифов.

Используйте unicode-range для разделения шрифтов по скриптам:

/* Latin */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153;
}

/* Latin Extended */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF;
}

Инструменты вроде Glyphhanger анализируют ваш контент и генерируют оптимальные подмножества. Для Google Fonts google-webfonts-helper предоставляет предварительно разделенные файлы.

Проектируйте надежные стеки системных шрифтов

Системные шрифты загружаются мгновенно и обеспечивают отличные запасные варианты. Хорошо составленный стек обеспечивает читаемый текст даже если пользовательские шрифты не загрузились:

body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, 
               'Segoe UI', Roboto, sans-serif;
}

Сопоставьте метрики между пользовательскими и запасными шрифтами, используя CSS дескрипторы:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-display: swap;
  size-adjust: 100.5%; /* Сопоставить метрики запасного варианта */
  ascent-override: 95%;
  descent-override: 25%;
}

Используйте Font Style Matcher для вычисления этих значений и минимизации сдвига макета.

Предварительно загружайте критически важные шрифты

Предварительная загрузка сообщает браузерам о необходимости немедленно получить шрифты, до их обнаружения в CSS:

<link rel="preload" href="/fonts/inter-latin.woff2" 
      as="font" type="font/woff2" crossorigin>

Ключевые соображения:

• Предварительно загружайте только шрифты выше сгиба
• Включайте атрибут crossorigin (обязательно для шрифтов)
• Сопоставьте точный URL из вашего объявления @font-face
• Избегайте предварительной загрузки каждого подмножества — это сводит на нет цель разделения

Комбинируйте с встроенным критическим CSS для максимального эффекта:

<style>
  @font-face {
    font-family: 'Inter';
    src: url('/fonts/inter-latin.woff2') format('woff2');
    font-display: swap;
  }
</style>

Рассматривайте вариативные шрифты стратегически

Вариативные шрифты могут заменить множественные файлы одним, но они не всегда меньше. Вариативный шрифт, поддерживающий начертания 100-900, может быть 50KB, в то время как два статических начертания составляют в общей сложности 30KB.

@font-face {
  font-family: 'Inter Variable';
  src: url('/fonts/inter-variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

/* Используйте любое начертание в диапазоне */
h1 { font-weight: 750; }
p  { font-weight: 425; }

Вариативные шрифты превосходны, когда вам нужны:

• Множественные начертания или ширины
• Плавные анимации между начертаниями
• Адаптивная типографика, масштабирующаяся с областью просмотра

Для простых сайтов, использующих 2-3 начертания, статические шрифты часто работают лучше.

Влияние на Core Web Vitals

Правильная загрузка шрифтов напрямую улучшает ключевые метрики:

Largest Contentful Paint (LCP): Предварительная загрузка и font-display: swap обеспечивают быстрый рендеринг текста, предотвращая задержки в измерении LCP.

Cumulative Layout Shift (CLS): Сопоставление метрик шрифтов и использование size-adjust устраняет резкие перекомпоновки текста при загрузке шрифтов.

First Input Delay (FID): Уменьшение нагрузки шрифтов и избежание блокирующего рендеринг поведения поддерживает отзывчивость основного потока.

Заключение

Современная загрузка шрифтов — это не выбор одной идеальной стратегии, а комбинирование техник, которые работают для ваших конкретных потребностей. Начните с WOFF2 и font-display: swap. Добавьте подмножество и предварительную загрузку для критически важных шрифтов. Используйте стеки системных шрифтов как надежные запасные варианты. Рассматривайте вариативные шрифты только когда они предоставляют четкие преимущества.

Самое важное — измеряйте влияние. Используйте WebPageTest или Lighthouse для проверки того, что ваша стратегия шрифтов улучшает фактические метрики производительности. Красивая типографика не должна идти в ущерб пользовательскому опыту.

Часто задаваемые вопросы

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.