CLS (Cumulative Layout Shift)

Автор

Что такое CLS?

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

Согласно стандартам Google на 2026 год, пороговое значение «хорошего» CLS составляет ≤ 0,1. Страницы, превышающие показатель 0,25, классифицируются как имеющие «плохую» визуальную стабильность, что коррелирует с потерей до 15% конверсий на мобильных устройствах из-за ложных кликов и раздражения пользователей.

Как это работает?

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

Основные причины высокого CLS: изображения и видео без зарезервированного места (отсутствуют атрибуты width и height), динамически подгружаемые веб-шрифты, вызывающие «мигание» текста, а также инжектируемая реклама, всплывающие баннеры и виджеты, которые вставляются в DOM асинхронно и сдвигают уже отрендеренный контент.

Метрики и стандарты

Пороговые значения CLS на 2026 год: ≤ 0,1 — хорошо (зелёный), 0,1–0,25 — требует улучшения (оранжевый), > 0,25 — плохо (красный). Ключевым требованием Google является прохождение 75-м перцентилем реальных пользователей (данные CrUX) порога 0,1. Лабораторно метрика замеряется в Lighthouse и Chrome DevTools, однако итоговый сигнал ранжирования формируется только на основе полевых данных.

Инженерным стандартом устранения CLS считается обязательное указание размеров для всех медиа-элементов и резервирование пространства под динамические блоки с помощью CSS (например, min-height для контейнеров шрифтов и баннеров).

Почему это важно для бизнеса?

CLS является прямым фактором ранжирования Google в составе Core Web Vitals, и его несоответствие напрямую ухудшает позиции в мобильной выдаче. С практической точки зрения, нестабильный интерфейс ломает пользовательский опыт: внезапно сместившаяся кнопка «Купить» или «Оплатить» ведёт к ложному клику, ошибке оформления заказа и, как следствие, потере дохода. Исследования 2026 года показывают, что на сайтах с плохим CLS до 13% кликов совершаются мимо целевых элементов, что эквивалентно прямой утечке конверсии из уже привлечённого трафика.

Пример применения

Интернет-магазин косметики запускает акцию с баннером над шапкой, который загружается асинхронно через GTM. При рендеринге баннер сдвигает весь контент страницы вниз на 200 пикселей, и кнопка «Добавить в корзину» уезжает из-под пальца пользователя. CLS достигает 0,4, и коэффициент конверсии падает. Решение: CSS-контейнеру баннера задаётся фиксированная высота через min-height, и даже при пустом блоке место резервируется, CLS снижается до 0,08.

Как это реализуется в WordPress?

Борьба с CLS в WordPress начинается с нативных механизмов: начиная с версии 5.5, CMS автоматически добавляет width и height ко всем вставленным изображениям, предотвращая их сдвиг. Для дополнительной оптимизации плагины WP Rocket и LiteSpeed Cache включают режимы оптимизации шрифтов (предзагрузка и font-display: swap), а также позволяют фиксировать размеры iframe и медиа.

Плагин Perfmatters точечно отключает всплывающие окна и асинхронные виджеты на мобильных устройствах, где CLS наиболее критичен. Разработчики тем через theme.json или дочерние темы устанавливают min-height для динамических контейнеров (например, шапки и сайдбаров), а плагины вроде Ad Inserter добавляют зарезервированные слоты под рекламу, не допуская сдвигов основного контента. Аудит CLS ведётся через Google Site Kit и PageSpeed Insights.

Связанные понятия

Core Web Vitals — набор метрик Google (LCP, INP, CLS), оценивающих пользовательский опыт и являющихся сигналами ранжирования.
Визуальная стабильность (Visual Stability) — общее понятие предсказуемости интерфейса, измеряемое CLS.
LCP (Largest Contentful Paint) — метрика скорости загрузки основного контента, в паре с CLS формирующая восприятие качества страницы.
INP (Interaction to Next Paint) — метрика отзывчивости, дополняющая CLS в оценке интерактивного опыта.
Impact Fraction — доля площади видимой области, затронутая сдвигом, ключевая переменная в формуле расчёта CLS.
CrUX (Chrome User Experience Report) — источник полевых данных, на основе которых Google вычисляет CLS для ранжирования.