Подробнее
CLS (Cumulative Layout Shift) — одна из трёх метрик Core Web Vitals, которая измеряет неожиданные сдвиги контента при загрузке страницы. Когда картинка догружается и «толкает» текст вниз, а пользователь промахивается по кнопке — это и есть высокий CLS. Метрика входит в факторы ранжирования Google и напрямую влияет на удобство и конверсию. Стабильность макета — обязательный пункт грамотной технической оптимизации сайта.
Как считается CLS и каким он должен быть
CLS — это сумма баллов всех неожиданных сдвигов макета за время жизни страницы. Каждый сдвиг оценивается как произведение доли затронутой области экрана (impact fraction) на дистанцию смещения (distance fraction). Google задаёт три порога: хорошо — до 0,1; требует улучшения — от 0,1 до 0,25; плохо — выше 0,25. В отличие от LCP и INP, CLS не измеряется в секундах — это безразмерный показатель. Измеряют его в Lighthouse, PageSpeed Insights и по полевым данным реальных пользователей в Google Search Console, где данные собираются из отчёта Chrome UX Report.
- До 0,1 — хорошо (зелёная зона)
- 0,1–0,25 — требует улучшения
- Выше 0,25 — плохо, страница нуждается в доработке
Отладка: как найти виновника сдвига
CLS редко чинится вслепую — нужен конкретный элемент. В DevTools: Performance-запись с чекбоксом Layout Shifts покажет каждый сдвиг с виновным узлом и вкладом в метрику; в PageSpeed Insights раздел «Избегайте больших смещений» перечисляет элементы по вкладу. Типовые виновники по убыванию: изображения и iframe без width/height, баннеры и виджеты, вставляемые скриптом после отрисовки, веб-шрифт с поздней подменой (скачок высоты строк), динамические блоки «согласия» и промо-полосы, толкающие контент. Важно проверять оба вьюпорта отдельно: сдвиг бывает только мобильным (другая раскладка) — и реальный CLS у аудитории не совпадает с десктопной проверкой разработчика.
Главные причины сдвигов и как их устранить
Чаще всего CLS портят изображения и видео без заданных размеров: браузер не резервирует под них место и сдвигает контент при догрузке. Решение — указывать атрибуты width и height или CSS aspect-ratio. Вторая частая причина — рекламные блоки, баннеры и виджеты, для которых не зарезервирована высота. Третья — веб-шрифты: при подмене системного шрифта на кастомный текст «прыгает» (эффект FOUT/FOIT), помогает font-display и preload. Также сдвиги вызывают элементы, вставляемые через JavaScript над уже отрисованным контентом. Системная работа над этими причинами — часть технического SEO и общего ускорения, которое мы проводим в рамках SEO-аудита сайта.
- Задавайте размеры для всех изображений, видео и iframe
- Резервируйте место под рекламу и динамические блоки
- Используйте font-display: swap и preload для шрифтов
- Не вставляйте контент над видимой областью после загрузки
Зачем бизнесу следить за CLS
Высокий CLS — это не абстрактная техническая цифра, а прямые потери: пользователь промахивается по кнопке «Купить», случайно жмёт не ту ссылку, раздражается и уходит. Это бьёт по поведенческим факторам и снижает конверсию. Поскольку CLS входит в Core Web Vitals и учитывается при ранжировании в мобильной выдаче, его улучшение даёт двойной эффект: рост позиций и больше дохода с того же поискового трафика. Особенно критична визуальная стабильность для интернет-магазинов и сервисов с формами заказа, где каждый ошибочный клик стоит денег. Контроль метрики стоит встроить в постоянное SEO-сопровождение.