Cumulative Layout Shift (CLS)

Cumulative Layout Shift: насколько страница дёргается, пока грузится. Хорошо — меньше 0,1; обычная причина — картинки и реклама, под которые не зарезервировано место.

• Помощь

Cumulative Layout Shift измеряет визуальную стабильность: насколько видимое содержимое прыгает, пока страницей пользуются. Ноль значит, что ничего не сдвинулось; каждый неожиданный сдвиг — текст, который съехал вниз из-за подгрузившейся картинки, кнопка, уехавшая из-под пальца, когда открылся баннер, — добавляет к сумме. CLS — одна из трёх метрик Core Web Vitals.

Пороги

SiteScan использует границы Google: до 0,1 — хорошо, до 0,25 — требует улучшения, выше — плохо. Лабораторное значение берётся из прогона Lighthouse по главной странице и охватывает только загрузку; значение реальных пользователей, если в Chrome UX Report оно есть, — 75-й процентиль за 28 дней и учитывает сдвиги, случившиеся позже, при прокрутке и кликах. Поэтому две цифры могут заметно расходиться.

Частые причины и решения

• Изображения, видео и iframe без размеров — добавьте атрибуты width и height или CSS aspect-ratio, чтобы браузер зарезервировал место.
• Реклама, виджеты и cookie-баннеры, вставляемые над уже показанным содержимым, — отведите им фиксированное место или показывайте поверх, а не сдвигая.
• Веб-шрифты с другими метриками — используйте font-display: optional или подгоните запасной шрифт через size-adjust.
• Анимация top или height — анимируйте transform.

Подробный разбор — в статье о Core Web Vitals.