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