Что такое CLS (Cumulative Layout Shift)

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

Какие значения считаются нормальными

CLS — не время, а безразмерное число. Оно учитывает, какую часть экрана занимает сдвинувшийся элемент и как далеко он уехал.

• до 0,1 — хорошо;
• от 0,1 до 0,25 — требует улучшения;
• больше 0,25 — плохо.

Откуда берутся смещения

• картинки и видео без заданных ширины и высоты: браузер не знает, сколько места под них оставить;
• рекламные блоки, баннеры о cookies и виджеты, которые вставляются поверх готового текста;
• веб-шрифты, из-за которых текст после загрузки меняет размер;
• блоки, которые скрипт добавляет над уже показанным контентом.

Как исправить

Указывайте у изображений атрибуты width и height или задавайте пропорции через CSS, резервируйте место под рекламу и виджеты заранее, показывайте уведомления поверх страницы, а не вставляя их в поток. При ленивой загрузке место под картинку тоже нужно резервировать.

Пример

На сайте автосервиса блок «Акции» подгружался скриптом над прайсом через секунду после открытия. Посетители начинали читать цены, и таблица уезжала вниз. Блоку задали фиксированную высоту заранее — прыжки исчезли.

Частые вопросы

Учитываются ли смещения после действий посетителя?

Нет. Если элемент сдвинулся сразу после клика (например, раскрылся аккордеон), это ожидаемое изменение и в CLS не идёт. Считаются только неожиданные сдвиги.

Почему CLS на телефоне хуже, чем на компьютере?

На узком экране один и тот же баннер занимает большую долю площади, а медленный интернет растягивает загрузку. Проверяйте метрику отдельно для мобильной адаптивной вёрстки.