CLS (Cumulative Layout Shift) — одна из трёх метрик Core Web Vitals, введённых Google как сигналы качества пользовательского опыта. Измеряет суммарное визуальное смещение элементов страницы в процессе загрузки: когда блок текста «прыгает» вниз из-за подгруженного изображения или шрифта — это layout shift. CLS суммирует все такие смещения и выражает итог в безразмерном балле.
Как вычисляется CLS
Каждый отдельный layout shift вычисляется по формуле: impact_fraction × distance_fraction.
- impact_fraction — доля видимой области (viewport), которую занимал нестабильный элемент до и после смещения (объединение двух прямоугольников).
- distance_fraction — максимальное расстояние, на которое сдвинулся элемент, делённое на высоту viewport.
Пример: картинка занимает 50% viewport по высоте и сдвигается на 25% высоты экрана → 0,50 × 0,25 = 0,125. Сдвиги объединяются в «сессии» с перерывом не более 1 секунды и максимальной длительностью 5 секунд. Финальный CLS — максимальное значение среди всех сессий сдвигов (Session Window). Алгоритм Session Window введён в марте 2021 года — до этого CLS был простой суммой, что наказывало длинные страницы.
Пороговые значения
- ≤ 0,1 — Хорошо (Good). Страница визуально стабильна.
- 0,1–0,25 — Требует улучшения (Needs Improvement).
- ≥ 0,25 — Плохо (Poor). Серьёзные проблемы со стабильностью.
Google оценивает CLS по 75-му перцентилю реальных посещений (данные CrUX). Если 75% визитов дают CLS ≤ 0,1 — страница считается «хорошей» для этой метрики.
Частые причины высокого CLS
- Изображения без явного размера — браузер не резервирует место под картинку до её загрузки. Решение: задать атрибуты
widthиheightв HTML или использовать CSSaspect-ratio. - Рекламные блоки без фиксированных размеров — AdSense и другие сети подгружают баннеры непредсказуемых размеров. Решение: задать min-height или использовать
<ins>с явными размерами. - Веб-шрифты (FOUT/FOIT) — текст меняет размер при подгрузке кастомных шрифтов. FOUT (Flash of Unstyled Text) — текст отображается системным шрифтом, затем заменяется. Решение:
font-display: optionalилиfont-display: swapс предзагрузкой шрифтов через<link rel="preload">. - Динамически вставляемый контент — cookie-баннеры, уведомления, чат-виджеты, которые появляются поверх контента и сдвигают его. Решение: зарезервировать место через min-height или вставлять элементы не поверх, а в отведённые слоты.
- Анимации через свойства top/left/margin — изменение этих свойств вызывает layout reflow. Решение: использовать
transform: translate()— изменение через transform не влияет на layout.
История
Google анонсировал CLS в мае 2020 года как часть Core Web Vitals. В мае 2021 года CWV стали официальным сигналом ранжирования в Google Search. В марте 2024 года Google заменил FID (First Input Delay) на INP (Interaction to Next Paint) в составе Core Web Vitals. CLS и LCP остались неизменными.
CLS и хостинг
Хостинг влияет на CLS косвенно через скорость загрузки ресурсов. Медленный сервер с высоким TTFB растягивает временное окно, в котором могут происходить layout shifts: шрифты, изображения и скрипты загружаются дольше, и браузер дольше перерисовывает страницу. Использование CDN ускоряет загрузку шрифтов и изображений из ближайшей точки, сокращая вероятность сдвигов. Включение HTTP/2 на Nginx позволяет параллельно загружать ресурсы, что снижает время, в течение которого DOM нестабилен.
Анализ CLS доступен через Lighthouse (лабораторные данные), Chrome DevTools → Performance tab (запись реального рендеринга с подсветкой смещений) и PageSpeed Insights с реальными данными из Chrome UX Report. В DevTools экспериментальный режим «Layout Shift Regions» подсвечивает синим области, где произошли сдвиги.