+7 (925) 507-98-19
к.э.н. Лавлинский Николай Евгеньевич, технический директор ООО «Метод Лаб»
Веб-шрифты значительно влияют на скорость на скорость загрузки сайтов. Сложно найти современный дизайн, не использующий дополнительных (подключаемых) шрифтов. Оптимизация веб-шрифтов важна потому, что файлы шрифтов относятся к частично блокирующим ресурсам. То есть, до загрузки этих файлов, часть текста может не показываться вообще. О том, как работают браузеры сейчас и как можно управлять их поведением с помощью font-display, мы поговорим в этой статье.
По умолчанию различные браузеры имеют свой алгоритм ожидания шрифтов и рендеринга текста. Существует понятие задержки (timeout), это время которое браузер готов подождать до получения шрифта. Далее происходит показ подменного шрифта (fallback). После этого браузер может получить шрифт и произвести замену на нужный шрифт (swap). В таблице ниже показано поведение различных браузеров по умолчанию.
| Браузер | Задержка | Подмена (fallback) | Замена на нужный (swap) |
|---|---|---|---|
| Chrome 35+ | 3 сек | Да | Да |
| Opera | 3 сек | Да | Да |
| Firefox | 3 сек | Да | Да |
| Internet Explorer | 0 сек | Да | Да |
| Safari | — | — | — |
Как видно из таблицы, у большинства браузеров стоит задержка 3 секунды на ожидание загрузки веб-ширфтов, по истечении которой происходит рендеринг подменного шрифта, который потом заменяется на настоящий после загрузки.
Однако, ожидание трёх секунд для отображения текста на странице сложно назвать приемлемым (особенно в рамках цели отрисовки странинцы за одну секунду). Хочется отдельно контролировать каждый стиль шрифта по режиму ожидания его загрузки.
И здесь нам на помощь приходит новое свойство 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.
Таким образом, наиболее интересные варианты для широкого использвоания это fallback и swap. При этом fallback можно рекомендовать для основого текста, так как нежелательно менять значительный массив текста после начального рендеринга. Второй вариант, swap, можно использовать для заголовков, потому что их важно показать максимально быстро, а потом можно безболезненно перерисовать.
Использование свойства font-display позволяет тонко регулировать поведение браузера и по сути обходить ограничения по скорости сети для максимально быстрой отрисовки полезного контента. Конечно, это не отменяет использования всех остальных методов оптимизации веб-шрифтов, но позволяет по-другому взглянуть на приритет загрузки ресурсов. Например, если шрифт загружается в режиме swap, то его можно не указывать с помощью механизма preload (подробнее о preload в этой статье).
На момент написания статьи свойство font-display поддерживается в браузере Chrome 60+, в Firefox закрыто флагом. Актуальное состояние поддержки можно посмотреть на сервисе Caniuse.com. Мы прогнозируем расширение поддержки по мере распространения этого стандарта среди разработчиков сайтов.
