Что такое Cumulative Layout Shift (CLS)?

Что такое Cumulative Layout Shift (CLS)?

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

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

CLS вычисляется как сумма всех неожиданных смещений видимых элементов. Для каждого смещения рассчитывается score = impact fraction * distance fraction. Impact fraction — это доля области просмотра, затронутая смещением, а distance fraction — расстояние, на которое сместился элемент, относительно области просмотра. Итоговый CLS — это сумма всех таких score за время жизни страницы.

Примеры и причины высокого CLS

Основные причины высокого CLS:

• Изображения и видео без явно заданных размеров (width/height).
• Динамически загружаемые шрифты, которые меняют размер текста.
• Рекламные блоки, которые вставляются после загрузки основного контента.
• Анимации, которые изменяют положение элементов.

Практический пример

Рассмотрим HTML-код, который вызывает смещение:

<div>
  <img src="image.jpg" alt="Example">
  <p>Some text</p>
</div>

Если у изображения не заданы размеры, браузер сначала отобразит текст, а затем, когда изображение загрузится, текст сместится вниз. Чтобы избежать этого, нужно явно указать размеры:

<div>
  <img src="image.jpg" alt="Example" width="400" height="300">
  <p>Some text</p>
</div>

Или использовать CSS-контейнеры с фиксированным соотношением сторон.

Вывод

CLS — важная метрика для обеспечения комфортного пользовательского опыта. Её следует оптимизировать, особенно на страницах с динамическим контентом, изображениями и рекламой. Рекомендуется всегда задавать размеры медиа-элементов и избегать вставки контента после загрузки основного макета.