Исправление нестабильности раскладки элементов
Пару дней назад Рик Вискоми в блоге web.dev написал пост про то, как измерять и исправлять нестабильность раскладки элементов на странице — "Fixing layout instability".
С версии Chrome 77 появилась возможность измерять смещение отображаемого контента во время его загрузки с помощью нового Layout Instability API. Это не критичная, но важная для UX метрика, с помощью которой можно измерить "приятность" загрузки данных.
В статье на примере тестового сайта рассматривается, как собрать эту метрику с помощью WebPageTest, и что можно сделать, чтобы контент не прыгал. Например, при загрузке веб-шрифтов стоит использовать font-display: swap, чтобы до загрузки кастомного шрифта отображался шрифт, использующийся в системе. Также можно использовать плейсхолдеры, если известно, какой тип контента будет загружен.
В статье про это не написано, но хочу добавить, что для предварительной оценки масштаба проблемы со смещением контента необязательно собирать метрику. Достаточно загрузить страницу с троттлингом соединения.