Cumulative Layout Shift (CLS)

Cumulative Layout Shift

Cumulative Layout Shift (CLS) — это метрика, измеряющая общую стабильность макета вашего сайта. Неожиданные смещения макета во время загрузки страницы могут привести к случайным ошибкам пользователей и отвлечь их внимание.

Cumulative Layout Shift (CLS) возникает, когда элементы смещаются после первоначального рендеринга в DOM. На примере кнопка отобразилась на экране после текстового блока, что вызвало смещение блока вниз. При расчёте CLS учитывается комбинация влияния и расстояния смещения.

Пример Cumulative Layout Shift

Элементы, которые меняют позицию при появлении новых элементов на экране, влияют на CLS.

Индивидуальный показатель смещения каждого элемента учитывается в CLS только при неожиданном движении. Если новый элемент добавляется в DOM или существующий элемент меняет размер, это не считается смещением макета, если загруженные элементы сохраняют свою позицию.

Дополнительные материалы