CLS

Как работает

CLS — числовая оценка того, насколько сильно элементы страницы «прыгают» после начала отрисовки. Считается по формуле: доля видимой области, где произошёл сдвиг, умноженная на расстояние сдвига. Оба параметра нормализованы от 0 до 1, итог — безразмерное число.

Google определяет пороги: хорошо — CLS ≤ 0.1, требует улучшения — до 0.25, плохо — больше 0.25. Метрика собирается у реальных пользователей Chrome и агрегируется по 75-му перцентилю. Учитываются сдвиги только тех элементов, которые уже видел пользователь, — если контент подгружается за пределами экрана, CLS не растёт.

Классический источник сдвига — картинка без указанных width и height:

<img src="hero.jpg" width="1200" height="600" alt="...">

Атрибуты резервируют место в вёрстке ещё до загрузки файла. Без них браузер сначала показывает страницу без картинки, потом добавляет её — и всё, что было ниже, сдвигается вниз.

Для рекламных блоков и виджетов работает то же правило — задать min-height контейнеру:

.ad-slot {
  min-height: 250px;
}

Почему важно для SEO

CLS входит в Core Web Vitals и напрямую влияет на Page Experience — сигнал ранжирования Google с 2021 года. При равной релевантности страница со стабильной вёрсткой обгоняет ту, где кнопки уезжают под палец в момент клика.

Плохой CLS бьёт и по конверсии. По данным Google, сдвиги выше 0.25 на 30% чаще заканчиваются случайными кликами и возвратами — пользователь промахивается по кнопке, попадает в другую ссылку и уходит в выдачу за следующим результатом. Для Яндекса это прямой поведенческий сигнал: рост показателя отказов и падение времени на сайте.

Частые ошибки

• Картинки без width и height — самая распространённая причина плохого CLS в интернет-магазинах.
• Шрифты подгружаются без font-display: optional или без preload — при подмене шрифта заголовки меняют размер, вёрстка сдвигается.
• Рекламный или партнёрский виджет вставляется в контент без зарезервированного места.
• Cookie-баннер появляется через 1-2 секунды после загрузки и толкает основной контент вниз.
• Пуш-уведомление или всплывающий блок «Мы используем cookies» смещает уже отрисованный текст.
• Анимация вставки нового блока через height: auto без transform — тоже считается сдвигом.

Как проверить

В Chrome DevTools вкладка Performance → запись загрузки → блок Experience: браузер подсвечивает конкретные элементы и показывает вклад каждого в CLS. PageSpeed Insights (pagespeed.web.dev) выдаёт CLS из полевых данных CrUX с разбором проблемных элементов. Расширение Web Vitals для Chrome показывает метрику в реальном времени при переходе по страницам.

SEO Crawler запрашивает CLS из CrUX API для каждой обходимой страницы и подсвечивает URL, которые не проходят порог 0.1. В отчёте это часть блока «Производительность» — там же список наиболее проблемных страниц с оценкой охваченного ими трафика.

Вывод

CLS — самая заметная для пользователя метрика Core Web Vitals: сдвиги ощущаются как «сайт живёт своей жизнью». Резервируйте место под картинки, рекламу и cookie-баннеры, следите за подгрузкой шрифтов, не вставляйте новый контент выше уже видимого. Порог 0.1 достижим почти на любом сайте без глубокого рефакторинга — достаточно навести порядок в верхних 2-3 экранах.