CLS

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

Простыми словами: ты целишься пальцем в кнопку, а тут сверху подгрузилась картинка — и кнопка уехала вниз. Палец бьёт не туда. Вот этот неприятный рывок CLS и считает.

Что такое CLS и зачем он нужен

CLS — одна из трёх ключевых метрик Core Web Vitals наряду с LCP и INP. Она отвечает за визуальную стабильность: насколько предсказуемо ведёт себя страница, пока грузится. Google официально учитывает Core Web Vitals в сигналах Page Experience, так что высокий Cumulative Layout Shift бьёт и по удобству, и косвенно по ранжированию.

Показатель считается как произведение доли экрана, которая сдвинулась, на расстояние сдвига — и суммируется за всё время загрузки. Отсюда и «cumulative»: учитываются все неожиданные рывки, а не один.

Какое значение считается хорошим

Ориентир простой: норма — CLS ≤ 0.1. Всё, что выше 0.25, Google трактует как плохой результат.

Из-за чего растёт CLS и как улучшить

• Изображения без размеров. Задавайте width и height (или aspect-ratio), чтобы браузер заранее резервировал место.
• Реклама и встроенные блоки. Резервируйте контейнеры фиксированной высоты под баннеры и виджеты.
• Шрифты. Мерцание текста (FOUT/FOIT) сдвигает макет — используйте font-display и прелоад.
• Динамические вставки. Не добавляйте контент над уже видимым, кроме как в ответ на действие пользователя.

Пример

Статья загрузилась, читатель начал читать первый абзац — и тут сверху «раскрылись» баннер и неподгруженное фото без заданных размеров. Текст прыгнул вниз на пол-экрана. Это типичный кейс плохого CLS: стоило зарезервировать место под баннер и изображение заранее.

Часто путают с…

• FCP / LCP — о скорости появления контента; CLS — о его стабильности после появления.
• PageSpeed-балл — это общая оценка; CLS — лишь одна метрика внутри неё.

Вопросы и ответы

Какая норма CLS?

Хороший результат — CLS ≤ 0.1. Диапазон 0.1–0.25 требует улучшения, свыше 0.25 — плохо. Эти границы задаёт Google для Core Web Vitals.

Влияет ли CLS на позиции в Google?

Да, косвенно. Cumulative Layout Shift — часть Core Web Vitals, которые входят в сигналы Page Experience. Это не главный фактор, но при прочих равных может дать преимущество.

Чем измерить CLS?

PageSpeed Insights, Lighthouse, раздел Core Web Vitals в Google Search Console и вкладка Performance в Chrome DevTools.

Страницы «прыгают» и заваливают Core Web Vitals? Продиагностируем и исправим — начните с SEO-аудита.

Похожие термины: FCP, PageSpeed, Адаптивный дизайн, Юзабилити.