Продолжу рассказывать про показатели Core Web Vitals. Сегодня — о Cumulative Layout Shift (CLS).

Cumulative Layout Shift (CLS) отражает визуальную стабильность страницы. Метрика замеряет неожиданные смещения на странице при загрузке или взаимодействии с ней пользователя. Хорошо, когда <= 0.1.

Замер показателя начинается после начала навигации, по аналогии с LCP. Первый замер происходит между первым и вторым Paint. Замер продолжается на протяжении всей жизни страницы.

👉 При расчете метрики учитываются сдвиги макета, которые не связаны с действиями пользователя на странице браузера. То есть сдвиги макета, которые произошли в пределах ~500 мс после click, mousedown, pointerdown, touchstart, keydown, не попадают в CLS. Сдвиги при загрузке страницы или после действий пользователя, но за пределами 500 мс, попадают в CLS.

👉 Как рассчитывается CLS?

Расчёт происходит в два основных этапа:

1. Расчёт одного сдвига (Layout Shift Score)

Каждый отдельный неожиданный сдвиг оценивается по формуле: Layout Shift Score = Impact Fraction * Distance Fraction

Impact Fraction (доля воздействия) — какая часть видимой области экрана (viewport) была затронута сдвигом. Браузер берёт объединённую площадь всех сдвинувшихся элементов до и после сдвига и делит на площадь viewport. Distance Fraction (доля расстояния) — насколько далеко максимально сдвинулся самый «подвижный» элемент. Измеряется относительно размера viewport (обычно по большей стороне).

Пример: Если сдвиг затронул 60% экрана (Impact = 0.6), а элемент сдвинулся на 30% высоты viewport (Distance = 0.3), то оценка сдвига = 0.18.

2. Учёт интервалов — Session Window (оконный подход)

Это самая важная часть алгоритма CLS. Браузер не суммирует все сдвиги подряд за всю жизнь страницы. Вместо этого он использует интервальный подход:

Когда происходит первый неожиданный сдвиг — открывается сессионное окно. В это окно попадают все последующие неожиданные сдвиги, между которыми менее 1 секунды. Максимальная длина одного окна — 5 секунд. Внутри окна суммируются оценки всех сдвигов. После закрытия окна (разрыв больше 1 секунды или превышено 5 секунд) может открыться новое окно.

Итоговый CLS страницы = максимальное значение (самая большая сумма), полученное в любом из этих сессионных окон за всю сессию пользователя.

Сдвиги считаются только для элементов в видимой области (viewport).

👉 Измерения заканчиваются, когда страница переходит в фоновый режим, а также всякий раз, когда она выгружается (событие visibilitychange охватывает оба этих сценария). То есть, простыми словами, когда пользователь закрывает вкладку, переходит на другую вкладку, сворачивает браузер и т. д.

Подробнее здесь: 👉 1. https://web.dev/articles/cls; 2. https://web.dev/blog/cls-web-tooling;