Cumulative Layout Shift (CLS)
Cumulative Layout Shift (CLS) - это метрика Core Web Vitals, которая количественно оценивает, насколько сильно видимый контент неожиданно меняет положение в течение жизненного цикла страницы. Она фиксирует проблему "прыгающего контента", когда пользователь пытается нажать на кнопку, которая в последний момент смещается.
Cumulative Layout Shift (CLS) - это метрика Core Web Vitals, которая количественно оценивает, насколько сильно видимый контент неожиданно меняет положение в течение жизненного цикла страницы. Она фиксирует проблему "прыгающего контента", когда пользователь пытается нажать на кнопку, которая в последний момент смещается.
Почему это важно
CLS - это подтвержденный сигнал ранжирования Google и один из трех Core Web Vitals. Пороговые значения Google: хорошее значение - ≤ 0,1, требует улучшения - 0,1-0,25, плохое - > 0,25. Высокий CLS подрывает доверие пользователей: исследование Google показывает, что у страниц с CLS > 0,15 показатель отказов на 24% выше. Это также самый дешевый для исправления показатель Core Web Vitals, потому что почти у каждой причины есть простое решение.
Как рассчитывается CLS
Оценка CLS = доля воздействия × доля расстояния, суммированная по всем неожиданным сдвигам макета в течение жизненного цикла страницы.
- Доля воздействия: часть области просмотра (viewport), затронутая смещающимся элементом (объединение до + после).
- Доля расстояния: наибольшее расстояние, на которое сместился любой элемент, как доля области просмотра.
С 2021 года Chrome использует "оконный CLS" - засчитывается только худшее 5-секундное окно, поэтому долгоживущее SPA не наказывается вечно за один неудачный момент.
Распространенные причины
Изображения без размеров: <img> без атрибутов width/height вынуждает браузер перекомпоновывать макет при загрузке изображения.
Реклама и встраиваемые блоки без зарезервированного места: сторонние рекламные слоты, вставленные после первоначальной отрисовки, сдвигают контент вниз.
Веб-шрифты, вызывающие FOIT/FOUT: при загрузке кастомного шрифта текст перекомпоновывается, потому что у резервного шрифта другие метрики.
Динамически внедряемый контент: виджеты "Вам также может понравиться", баннеры с cookie и уведомления, появляющиеся над существующим контентом.
Анимации не на основе transform: анимация свойств top или left запускает пересчет макета; анимация transform - нет.
Как исправить CLS
Задавайте явные размеры для изображений и видео: <img width="800" height="600"> - браузер резервирует место до загрузки файла.
Резервируйте место для рекламных слотов: задавайте рекламным контейнерам фиксированный min-height, чтобы вставленная реклама не сдвигала контент.
Используйте font-display: optional или предзагружайте веб-шрифты, чтобы минимизировать FOUT.
Вставляйте новый контент ниже области первого экрана или при взаимодействии пользователя, а не над существующим контентом.
Анимируйте только с помощью transform и opacity - они не запускают пересчет макета.
Используйте CSS-свойство aspect-ratio для адаптивного медиаконтента без явных размеров.
Измерение CLS
Полевые данные: CrUX, отчет Core Web Vitals в Search Console, полевой раздел PageSpeed Insights.
Лабораторные данные: Lighthouse, панель Performance в Chrome DevTools. Учтите, что лабораторный CLS может отличаться от полевого, потому что реальные пользователи запускают разные позиции прокрутки и взаимодействия.
CLS оценивается по 75-му процентилю данных реальных пользователей, поэтому для SEO имеют значение именно полевые данные.
Источники: