Cumulative Layout Shift (CLS) — это метрика, которая показывает, насколько часто и насколько сильно элементы страницы неожиданно смещаются после первого рендера. Браузер для каждого такого сдвига оценивает, какая часть экрана была затронута и как далеко элементы уехали, а затем суммирует эти значения. В итоге CLS отражает не скорость загрузки, а стабильность интерфейса во времени.
📚 Откуда берётся CLS
Почти всегда причина одна и та же — неопределённость размеров.
Если в момент первого расчёта layout браузер не знает, сколько места займёт элемент, он не резервирует пространство. Когда элемент появляется или меняет свои размеры, браузеру приходится перестраивать макет, и пользователь видит «прыжок».
На практике чаще всего виноваты изображения, но не только они. 😁 Подробности на картинках выше!
Как итог, CLS возникает не потому, что ресурсы загружаются медленно, а потому что браузеру слишком поздно сообщают геометрию интерфейса.
➡️
width/height для <img>, aspect-ratio для контейнеров, резервирование слотов под шрифты, рекламу и динамическое изменение превращают догадки браузера в знание. А когда браузер знает размеры заранее, странице просто некуда прыгать. 👍