CLS (Cumulative Layout Shift) — это метрика Core Web Vitals, которая простыми словами показывает, насколько сильно прыгают элементы страницы во время загрузки. Google ввёл показатель в мае 2020 года, а с июня 2021 года CLS стал фактором ранжирования в Page Experience Update.
Накопленный сдвиг макета влияет на удобство мобильных пользователей: баннер, подгружаемый с задержкой, сдвигает текст и провоцирует ошибочные клики. Что это значит на практике — порог 0,1 разделяет сайты на удобные и проблемные, а данные собираются в отчёте Core Web Vitals в Search Console на основе CrUX за последние 28 дней.
§ 01Как считается
Накопленный визуальный сдвиг считается как сумма произведений impact fraction на distance fraction для каждого неожиданного смещения. С августа 2021 года Google перешёл на сессионные окна: учитывается худшее окно длиной до 5 секунд с паузами не более 1 секунды между сдвигами. Сдвиги по действию пользователя (клик, ввод) в течение 500 мс не засчитываются. Что делает эту схему честнее — CLS уже не растёт бесконечно на длинных лентах.
§ 02Зачем нужно
Зачем нужен CLS — он отражает реальное раздражение пользователя, когда кнопка "Купить" уезжает вниз и палец попадает в рекламу. Исследование Google 2020 года показало, что сайты, прошедшие пороги Core Web Vitals, на 24% реже теряют посетителя до загрузки. Накопленный сдвиг макета входит в тройку CWV вместе с LCP и INP (заменил FID в марте 2024). Хороший CLS — менее 0,1, требует улучшения — 0,1–0,25, плохой — выше 0,25.
CLS 0.32 → 0.04 — Маркетплейс одежды на Shopify Plus зарезервировал размеры под баннеры и lazy-блоки через aspect-ratio и width/height в img. CLS упал с 0.32 до 0.04 за 4 недели. Замер по CrUX-75th и PSI, конверсия мобайла выросла на 9%.
CLS 0.18 → 0.07 — Издание о финансах на WordPress вынесло AdSense-блоки в контейнеры фиксированной высоты и подгрузило шрифты через font-display: optional. CLS снизился с 0.18 до 0.07 за 3 недели. Контроль через Search Console Core Web Vitals и Web Vitals JS.
§ 03Как измерить
Лабораторные данные смотрят в PageSpeed Insights, Lighthouse и DevTools во вкладке Performance — там подсвечиваются конкретные сдвинутые элементы. Полевые данные по реальным пользователям Chrome берутся из CrUX и отчёта Core Web Vitals в Search Console: группировка идёт по URL-паттернам. Для постоянного мониторинга подойдут web-vitals.js от Google, GA4 с кастомным событием или сервисы вроде SpeedCurve и Treo.
§ 04Что делать дальше
Чтобы снизить CLS, задавайте width и height для img и video — браузер зарезервирует место. Для шрифтов используйте font-display: optional или предзагрузку через <link rel=preload>, чтобы избежать FOUT. Резервируйте место под рекламные блоки фиксированной высотой, а динамический контент вставляйте над вьюпортом или после действия пользователя. Накопленный визуальный сдвиг также режут CSS transform вместо изменения top/left — анимации не вызывают reflow.