Ускоряем веб-шрифты за счет свойства font-display
к.э.н. Лавлинский Николай Евгеньевич, технический директор ООО «Метод Лаб»
Веб-шрифты значительно влияют на скорость на скорость загрузки сайтов. Сложно найти современный дизайн, не использующий дополнительных (подключаемых) шрифтов. Оптимизация веб-шрифтов важна потому, что файлы шрифтов относятся к частично блокирующим ресурсам. То есть, до загрузки этих файлов, часть текста может не показываться вообще. О том, как работают браузеры сейчас и как можно управлять их поведением с помощью font-display, мы поговорим в этой статье.
Как отрисовывают шрифты браузеры
По умолчанию различные браузеры имеют свой алгоритм ожидания шрифтов и рендеринга текста. Существует понятие задержки (timeout), это время которое браузер готов подождать до получения шрифта. Далее происходит показ подменного шрифта (fallback). После этого браузер может получить шрифт и произвести замену на нужный шрифт (swap). В таблице ниже показано поведение различных браузеров по умолчанию.
| Браузер | Задержка | Подмена (fallback) | Замена на нужный (swap) |
|---|---|---|---|
| Chrome 35+ | 3 сек | Да | Да |
| Opera | 3 сек | Да | Да |
| Firefox | 3 сек | Да | Да |
| Internet Explorer | 0 сек | Да | Да |
| Safari | — | — | — |
Как видно из таблицы, у большинства браузеров стоит задержка 3 секунды на ожидание загрузки веб-ширфтов, по истечении которой происходит рендеринг подменного шрифта, который потом заменяется на настоящий после загрузки.
Однако, ожидание трёх секунд для отображения текста на странице сложно назвать приемлемым (особенно в рамках цели отрисовки странинцы за одну секунду). Хочется отдельно контролировать каждый стиль шрифта по режиму ожидания его загрузки.
И здесь нам на помощь приходит новое свойство font-display.
Свойство font-display
Это новое свойство контролирует поведение браузера по поводу рендеринга шрифтов. Всего существует пять вариантов значений: auto, block, swap, fallback, optional. Указывается оно в блоке @font-face, как одно из свойств.
Например:
@font-face {
font-family: 'Text';
font-display: auto;
src: local('Test'), url(/1.woff2) format('woff2');
}
Варианты свойства font-display.
- auto — поведение браузера по умолчанию, обычно это то же самое, что и block.
- block — ожидание шрифта в течение трёх секунд и бесконечный период для замены на подгружаемый шрифт.
- swap — мнговенная отрисовка подменного шрифта и бесконечный период для замены на подгружаемый шрифт.
- fallback — почти мнговенная отрисовка подменного шрифта (задержка около 100 мс) и короткий период для замены на подгружаемый шрифт (около трёх секунд).
- optional — почти мнговенная отрисовка подменного шрифта (задержка около 100 мс) и нулевой период для замены на подгружаемый шрифт.
Таким образом, наиболее интересные варианты для широкого использвоания это fallback и swap. При этом fallback можно рекомендовать для основого текста, так как нежелательно менять значительный массив текста после начального рендеринга. Второй вариант, swap, можно использовать для заголовков, потому что их важно показать максимально быстро, а потом можно безболезненно перерисовать.
Использование свойства font-display позволяет тонко регулировать поведение браузера и по сути обходить ограничения по скорости сети для максимально быстрой отрисовки полезного контента. Конечно, это не отменяет использования всех остальных методов оптимизации веб-шрифтов, но позволяет по-другому взглянуть на приритет загрузки ресурсов. Например, если шрифт загружается в режиме swap, то его можно не указывать с помощью механизма preload (подробнее о preload в этой статье).
Поддержка браузерами
На момент написания статьи свойство font-display поддерживается в браузере Chrome 60+, в Firefox закрыто флагом. Актуальное состояние поддержки можно посмотреть на сервисе Caniuse.com. Мы прогнозируем расширение поддержки по мере распространения этого стандарта среди разработчиков сайтов.
