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