• +7 910 970 18 67
  • mistifikat89@gmail.com

Оптимизируем загрузку шрифтов

Определение поведения для веб-шрифта во время загрузки может быть важной настройкой производительности вашего сайта.Новый дескриптор font-display для правила @font-face позволяет разработчикам решать, как будут отображаться их веб-шрифты, в зависимости от того, сколько времени потребуется для их загрузки.

https://developer.mozilla.org/ru/docs/Web/CSS/@font-face
https://developer.mozilla.org/ru/docs/Web/CSS/@font-face/font-display

Веб-шрифты дают разработчикам возможность включить богатую типографику в свои проекты с одним  компромиссом, заключающимся в том, что если пользователь еще не имеет указанных шрифтов, браузер должен потратить некоторое время на их загрузку.
Поскольку сети могут быть нестабильными, это время загрузки может отрицательно повлиять на работу пользователя.В конце концов, никого не волнует, насколько хорош ваш текст, если на его отображение требуется слишком много времени!

Чтобы снизить риск медленной загрузки шрифта, большинство браузеров используют тайм-аут, после которого будет использоваться запасной шрифт. Это полезный метод, но, к сожалению, не все браузеры его поддерживают.
https://caniuse.com/#feat=css-font-rendering-controls

Что еще хуже, разработчики имеют ограниченный контроль при принятии решения о том, как эти правила повлияют на их приложение. Разработчик, ориентированный на производительность, может предпочесть быструю начальную загрузку, использующую запасной шрифт, и использовать лучший веб-шрифт только при последующих посещениях после того, как его удастся загрузить.
Используя такие инструменты, как Font Loading API, можно изменить некоторые из поведений браузера по умолчанию и добиться увеличения производительности, но это происходит за счет необходимости писать нетривиальные объемы JavaScript, которые затем должны быть встроены в страницу или запрашивается из внешнего файла.
https://developer.mozilla.org/en-US/docs/Web/API/CSS_Font_Loading_API

Чтобы помочь исправить эту ситуацию, CSS Working Group предложила новый дескриптор @font-face, font-display и соответствующее свойство для управления отображением загружаемого шрифта до его полной загрузки.

Сроки загрузки шрифтов.
По аналогии с существующим поведением времени ожидания шрифта, которое некоторые браузеры реализуют сегодня, отображение шрифта делит время загрузки шрифта на три основных периода.

1. font block period(период блока шрифта). В течение этого периода, если  шрифт не загружен, любой элемент, пытающийся его использовать, должен вместо этого визуализироваться с невидимой резервным шрифтом. Если шрифт успешно загружен в этот период, то шрифт используется нормально.
2.font swap period(период подкачки шрифта). В течение этого периода, если шрифта не загружен, любой элемент, пытающийся его использовать, должен вместо этого использовать резервный шрифт. Если шрифт успешно загружается в течение этого периода, тогда шрифт используется нормально.
3.font failure period(период сбоя шрифта). Если шрифт еще не загружен, когда начинается этот период, он помечается как неудачная загрузка, вызывая нормальный откат шрифта. В противном случае, шрифт используется нормально.
    
Понимание этих периодов поможет вам использовать font-display для определения того как ваш шрифт должен отображаться в зависимости от того, когда он был загружен
Какой font-display вам подходит?

Чтобы работать с font-display , добавьте его в свои правила @font-face:
-----------------------------------------------------------------------
@font-face {
  font-family: 'Arvo';
  font-display: auto;
  src: local('Arvo'), url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
}

-----------------------------------------------------------------------
font-display может иметь следующие значения auto | block | swap | fallback | optional.

auto
auto использует любую стратегию отображения шрифтов, которую использует пользовательский агент. Большинство браузеров в настоящее время имеют стратегию по умолчанию, похожую на block

block
Блок дает шрифту короткий период block (в большинстве случаев рекомендуется 3 с) и бесконечный период подкачки. Другими словами, браузер сначала рисует «невидимый» текст, если шрифт не загружен, но меняет его шрифт сразу после загрузки. Для этого браузер создает анонимный шрифт с метриками, похожими на выбранный шрифт. Это значение следует использовать только в том случае, если для использования страницы требуется отрисовка текста в определенном шрифте.


swap

swap дает шрифту нулевой второй период блока и бесконечный период подкачки. Это означает, что браузер немедленно рисует текст с отступлением, если шрифт не загружен, но меняет шрифт, как только он загружается. Как и в случае с block, это значение следует использовать только тогда, когда отрисовка текста определенным шрифтом важна для страницы, но рендеринг с использованием любого шрифта все равно даст правильное сообщение. Текст логотипа является хорошим кандидатом для swap, так как при отображении названия компании с использованием разумного запасного варианта вы получите сообщение, но в конечном итоге вы будете использовать официальный шрифт.


fallback
fallback дает шрифту очень малый период блока (100 мс или меньше рекомендуется в большинстве случаев) и короткий период подкачки (в большинстве случаев рекомендуется три секунды). Другими словами, шрифт сначала отображается с запасным вариантом, но шрифт заменяется, как только он загружается. Однако, если пройдет слишком много времени, запасной вариант будет использоваться до конца жизни страницы. Fallback - хороший кандидат для таких вещей, как основной текст, где вы хотите, чтобы пользователь начал читать как можно скорее, и не хотите мешать его работе, перемещая текст по мере загрузки нового шрифта.

optional
optional дает шрифту чрезвычайно малый период блока (в большинстве случаев рекомендуется 100 мс или меньше) и период подкачки с нулевой секундой. Подобно fallback, это хороший выбор, когда загружаемый шрифт более «приятен», но не критичен для пользователя. optional оставляет браузеру право решать, начинать ли загрузку шрифта, что он может не делать или может делать это с низким приоритетом в зависимости от того, что, по его мнению, будет лучше для пользователя. Это может быть полезно в ситуациях, когда пользователь находится в слабом соединении, и загрузка шрифта может быть не лучшим использованием ресурсов.