CLS (Cumulative Layout Shift) - это метрика Google, которая измеряет, насколько сильно элементы страницы сдвигаются во время загрузки. Макет «прыгает», когда браузер не знает заранее размеры картинок, баннеров, шрифтов или виджетов и перерисовывает страницу по мере их подгрузки. Исправляется это резервированием места: каждому подгружаемому элементу заранее задаются размеры, и контент под ним больше не съезжает. Норма CLS - не больше 0,1.

Как читать цифру. CLS - безразмерный показатель: 0 - страница не шевелится вообще, 0,1 - граница «хорошо» по Core Web Vitals, выше 0,25 - «плохо». Google считает его по реальным пользователям из отчёта CrUX, поэтому исправления отражаются в статистике не сразу, а за 28 дней.

Чем опасен высокий CLS для магазина и сайта услуг

Прыгающий макет - это промахи по кнопкам. Классика: человек целится в «Купить», в этот момент сверху догружается баннер, кнопка уезжает вниз, и палец попадает в «Удалить из корзины» или в рекламу. Посетитель злится и уходит, а вы платите за этот клик рекламному кабинету.

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

Почему макет прыгает: 6 типовых причин

  • Картинки без width и height - браузер не знает высоту фото, пока не скачает его, и рисует страницу дважды
  • Баннеры и слайдеры - подгружаются скриптом после отрисовки и раздвигают контент
  • Веб-шрифты - текст сначала рисуется запасным шрифтом, потом перерисовывается фирменным с другой шириной букв
  • Виджеты и реклама - чат, рейтинг, видео и рекламные блоки вставляют себя в середину страницы
  • Динамический контент - плашки «мы используем cookie», уведомления и всплывающие подсказки, которые толкают макет
  • Анимации через свойства top и left - двигают соседние элементы вместо того, чтобы использовать transform

Как найти, что именно сдвигается на странице

Откройте отчёт PageSpeed Insights: в разделе диагностики есть пункт «Избегайте значительных смещений макета» со списком конкретных элементов и вкладом каждого в итоговый CLS. Второй способ - панель разработчика Chrome (F12): вкладка Performance записывает загрузку и подсвечивает сдвиги красным, а режим Layout Shift Regions в настройках Rendering показывает их прямо на странице в реальном времени.

Совет. Проверяйте мобильную версию в первую очередь: на узком экране элементы стоят в одну колонку, и любой подгрузившийся блок сдвигает всё, что ниже. У большинства сайтов мобильный CLS в 2-3 раза хуже десктопного.

Как исправить CLS: пошаговый план

  1. Задайте размеры всем изображениямАтрибуты width и height в теге img или aspect-ratio в CSS. Браузер зарезервирует место до загрузки файла - главная причина сдвигов уходит сразу.
  2. Зарезервируйте место под слайдеры и баннерыКонтейнеру слайдера задаётся фиксированная высота или aspect-ratio. Пока скрипт грузится, на его месте пустой блок нужного размера, а не схлопнутая полоска.
  3. Успокойте шрифтыПодключите font-display: swap и подберите запасной шрифт с похожей шириной через size-adjust. Ещё лучше - предзагрузка ключевого шрифта через link rel="preload".
  4. Выделите место виджетамЧат, рейтинги, карты и рекламные блоки вставляйте в контейнеры с минимальной высотой. Виджет догрузится внутрь готовой ячейки и ничего не сдвинет.
  5. Показывайте плашки поверх, а не враспорCookie-уведомления и подсказки позиционируйте как overlay (position: fixed), чтобы они накладывались на страницу, а не раздвигали её.
  6. Проверьте результатСнова прогоните страницу через PageSpeed Insights и убедитесь, что лабораторный CLS упал ниже 0,1. Полевые данные подтянутся в течение месяца.
Важно. Не лечите CLS «скрытием» блоков до полной загрузки страницы: экран будет дольше оставаться пустым, и вы обменяете сдвиги на просевшую скорость отрисовки. Правильное решение всегда одно - заранее известные размеры.

Почините прыгающий макет за пару дней

Найдём все источники сдвигов, зададим размеры картинкам и виджетам, настроим шрифты. Работаем аккуратно: сначала на тестовой копии, потом на боевом сайте.

Исправить CLS

Сколько стоит исправление CLS

Типовой сайт на 1С-Битрикс приводится к норме за 4-10 часов работы: аудит сдвигов, правки шаблона, проверка на всех разрешениях. В деньгах это ориентировочно 150-400 BYN в зависимости от количества шаблонов страниц. Если вёрстка сыпется не только при загрузке, а вообще ведёт себя непредсказуемо, начните со статьи почему ломается дизайн - причины часто общие.

Как не вернуть сдвиги после следующего обновления

CLS - метрика, которая портится тихо: дизайнер добавил новый баннер, маркетолог подключил виджет, контент-менеджер вставил фото без размеров - и через месяц макет снова прыгает. Поэтому починка без профилактики работает недолго.

Что помогает держать результат. Во-первых, правило в шаблонах: поля для изображений в админке автоматически подставляют размеры, и человеческий фактор исключается. Во-вторых, проверка макета в чек-листе любого релиза: перед выкладкой изменений страница прогоняется через PageSpeed, и рост CLS блокирует публикацию. В-третьих, ежемесячный взгляд в отчёт Core Web Vitals в Search Console: полевые данные покажут деградацию раньше, чем посыплются жалобы. Такой контроль занимает минуты, если он встроен в процесс, - у нас он входит в регламент технической поддержки вместе с мониторингом остальных метрик скорости.

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

PageSpeed показывает CLS 0, а страница всё равно прыгает. Почему?
Лабораторный тест измеряет только первые секунды загрузки без прокрутки и кликов. Сдвиги при скролле или наведении в него не попадают, но реальные пользователи их видят - и полевой CLS в отчёте CrUX будет хуже лабораторного. Проверяйте страницу руками с включённым Layout Shift Regions.
Какой CLS считается нормальным для интернет-магазина?
Порог един для всех типов сайтов: до 0,1 - хорошо, 0,1-0,25 - требует улучшения, выше 0,25 - плохо. Магазинам сложнее из-за баннеров, фильтров и виджетов рекомендаций, но и цена промаха по кнопке у них выше - это потерянные заказы.
Сдвиги создаёт чат-виджет. Убирать его?
Не обязательно. Достаточно грузить виджет с задержкой после отрисовки страницы и позиционировать поверх контента, а не в потоке. Кнопка чата в углу экрана через position: fixed не двигает макет вообще.
Исправили CLS на сайте - когда Google это заметит?
Полевые данные Core Web Vitals собираются за скользящие 28 дней, поэтому эффект в Search Console проявится через 3-4 недели. Лабораторный тест PageSpeed покажет улучшение сразу - используйте его для самопроверки.

Итог: CLS чинится не магией, а дисциплиной - у каждого элемента страницы должно быть зарезервированное место. Если разбираться с шаблонами некогда, передайте задачу нам: в рамках доработки сайта проведём аудит сдвигов, исправим вёрстку и покажем отчёт «до и после». Консультация и оценка работ - бесплатно, смета в течение дня.