Оптимизация рендеринга страницы с опциональными шрифтами
Хуссейн Джирде в блоге web.dev рассказал, как можно предотвратить сдвиг контента из-за загрузки web-шрифтов — "Prevent layout shifting and flashes of invisibile text (FOIT) by preloading optional fonts".
В черновике спецификации CSS Fonts Module Level 4, есть раздел, который говорит о том, что загрузка опциональных шрифтов (font-display: optional) не должна приводить к перерасчёту лайаута. Браузеры в этом случае могут блокировать отрисовку страницы на небольшой промежуток времени, пока загружается необходимый web-шрифт. Чтобы избежать блокировки с версии Chrome 83, можно использовать комбинацию font-display: optional и <link rel="preload"> для загружаемого шрифта. Браузер с большой вероятностью загрузит шрифт до первой отрисовки, и в результате страница отобразится сразу с необходимым шрифтом без сдвига контента.
Так как эта фича ещё не в официальном стандарте, команда Chrome ждёт обратной связи.