CLS (Cumulative Layout Shift)

CLS (Cumulative Layout Shift, совокупное смещение макета) – это метрика Core Web Vitals, которая показывает, насколько сильно элементы страницы неожиданно сдвигаются, пока человек с ней работает. Хорошим Google считает значение 0,1 и ниже.

Знакомая ситуация: вы читаете статью с телефона, и вдруг текст уезжает вниз, потому что сверху загрузился баннер. Или целитесь в кнопку «Оформить заказ», а под палец в последний момент подъезжает «Удалить из корзины». Именно такие сдвиги и считает CLS. Чем их больше и чем они крупнее, тем выше значение метрики и тем хуже.

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

Оценивают не одно открытие страницы, а 75-й процентиль по реальным посетителям, отдельно для мобильных и компьютеров. То есть у трёх посетителей из четырёх сдвиги должны укладываться в норму. CLS входит в набор Core Web Vitals вместе с LCP и INP.

Как считается CLS

Каждый сдвиг получает оценку по формуле: доля экрана, которую задел сдвиг, умноженная на расстояние сдвига в долях экрана. Пример на условных данных: блок занимает половину экрана и съезжает вниз на четверть высоты. Вместе со своим новым положением он задевает три четверти экрана, значит, первый множитель 0,75, второй 0,25, а оценка сдвига 0,1875. Один такой сдвиг уже выводит страницу из зелёной зоны.

Сдвиги, которые идут друг за другом с паузой меньше секунды, объединяются в «окно» длиной не больше пяти секунд. CLS страницы равен самому тяжёлому окну за всё время, пока страница открыта. Не учитываются сдвиги в течение 500 мс после клика или нажатия клавиши: если человек раскрыл блок кнопкой, он этого ждёт. Анимации через CSS-свойство transform тоже не считаются сдвигами.

Откуда берутся сдвиги и как их убрать

Одна из самых частых причин: картинки без размеров. Лечится она двумя атрибутами:

<img src='/upload/sofa.jpg' width='800' height='600' alt='Угловой диван'>

/* или в CSS для адаптивного блока */
.banner { aspect-ratio: 16 / 9; }

Браузер сразу резервирует нужную высоту, и текст под картинкой остаётся на месте.

Как измерить CLS

Данные бывают двух видов, и путать их нельзя. Полевые данные собираются у реальных посетителей Chrome, лабораторные получают в тестовом прогоне.

• PageSpeed Insights показывает оба вида: полевые данные сверху, если у страницы хватает трафика, и лабораторный прогон Lighthouse ниже.
• Отчёт об основных интернет-показателях в Google Search Console группирует страницы сайта с плохим CLS.
• В Chrome DevTools на вкладке Performance видно, какой именно элемент сдвинулся и когда.

Lighthouse меряет только загрузку, а реальные посетители ещё прокручивают страницу, открывают блоки, ждут ленивую подгрузку. Поэтому полевой CLS часто выше лабораторного. Если лаборатория показывает ноль, а Search Console жалуется, ищите сдвиги после загрузки: при прокрутке и подгрузке товаров.

Плашка «Купить в рассрочку» сдвигает цену в карточке товара

В Search Console у интернет-магазина появилась группа из нескольких сотен карточек товаров с CLS около 0,3 на мобильных. На компьютерах всё зелёное. Открываем одну карточку в Chrome DevTools в режиме телефона и записываем загрузку с прокруткой. Видно, что после загрузки над ценой появляется плашка «Купить в рассрочку», которую подгружает скрипт банка. Цена и кнопка покупки уезжают вниз на высоту плашки.

Решение простое: оставить под плашку место заранее, задав блоку минимальную высоту, или вывести её ниже кнопки. После правки проверяем лабораторный результат сразу, а полевые данные в Search Console обновятся примерно через месяц.

Насколько CLS важен для SEO

Core Web Vitals входят в сигналы удобства страницы, которые учитывает Google. Но это не главный фактор: страница с отличным CLS и слабым ответом на запрос не обгонит полезную страницу с посредственной вёрсткой. Исправлять сдвиги стоит прежде всего ради людей: они реже промахиваются мимо кнопок и реже уходят с раздражением. Про общую картину скорости читайте в статье Скорость сайта.

Почему CLS не уходит из красной зоны после правок

• Проверять только главную. Сдвиги чаще живут в карточках товаров и статьях с баннерами.
• Смотреть только на лабораторный результат и считать, что всё в порядке.
• Резервировать место под рекламу, которая потом показывается другого размера.

CLS и другие показатели Core Web Vitals проверяем на техническом аудите сайта, а исправления входят в работы по SEO-продвижению.

Как найти, исправить и проверить сдвиги на странице

Документация Google и web.dev

• web.dev: Cumulative Layout Shift (CLS)
• web.dev: Optimize Cumulative Layout Shift
• Справка Google Search Console: отчёт об основных интернет-показателях