Предотвращение сдвига контента из-за загрузки web-шрифтов
Саймон Харн рассказал о том, как предотвратить сдвиг контента из-за загрузки web-шрифтов — "How to avoid layout shifts caused by web fonts".
Сдвиг контента (CLS) — это метрика Web Vitals, в будущем она будет влиять на алгоритм ранжирования результатов Google. Самый железный вариант предотвращения сдвига из-за загрузки шрифтов — использование font-display: optional. В этом случае браузер будет ждать загрузки шрифта 100мс, делая фоллбек на системный шрифт после истечения этого времени. Таким образом при первом посещении сайта пользователи с большой вероятностью увидят страницу с фоллбек-шрифтом без сдвига контента; при переходах на другие страницы сайта шрифт будет уже находится в кэше браузера и будет применяться к тексту на странице без задержек.
Если font-display: optional использовать невозможно, тогда нужно оптимизировать время доставки шрифта. Для этого можно использовать сабсеттинг, отказаться от формата woff и использовать woff2, делать предзагрузку шрифтов. Если используется font-display: swap, тогда нужно настроить метрики шрифта фоллбека так, чтобы они совпадали с загружаемым шрифтом, в этом могут помочь font-display modifiers (f-mods) — новые свойства @font-face.