CLS — суммарный сдвиг раскладки за время визита: насколько элементы прыгают, пока страница догружается. Цель — 0. Хороший CLS до 0,1, плохой больше 0,25.
Главные причины: картинки без width/height, шрифты, подгружаемые после рендера (FOUT), баннеры, всплывающие cookie-уведомления, поздно загружающаяся реклама. Решения: ставить размеры на медиа, использовать font-display: swap с резервом, держать заранее зарезервированные слоты под баннеры.
Пример из практики
Реклама подгрузилась через 2 секунды после рендера и сдвинула весь контент вниз на 200 пикселей. CLS подскочил до 0,32 — пользователь успел кликнуть не туда.
Бенчмарк
CLS (сдвиг макета)
<0,05Топ
0,05–0,1Хорошо
0,1–0,25Плохо
>0,25Очень плохо