CLS — Cumulative Layout Shift
CLS — показатель неожиданных смещений видимых элементов страницы. Он помогает оценить, насколько стабилен макет, когда догружаются изображения, шрифты, баннеры и виджеты.
Также встречается: Cumulative Layout Shift, Сдвиги макета.
Для чего используется
Стабильный интерфейс позволяет дочитать текст, выбрать товар и нажать нужную кнопку без случайных действий. В SEO-аудите CLS полезен для диагностики качества страницы, особенно на мобильных устройствах. Сам показатель не объясняет причину: её ищут по записи экрана и событиям изменения макета.
Как применяется
SEO-специалист отмечает шаблоны со скачущим содержимым и сценарии, в которых это мешает чтению или покупке. Разработчик находит источники сдвигов и резервирует нужное пространство.
- Проверьте страницу с пустым кешем, медленной сетью и прокруткой. Найдите моменты, когда заголовки, карточки или кнопки меняют положение.
- Укажите размеры изображений и видео, предусмотрите место под динамические блоки. Проверьте замену шрифтов и высоту рекламных вставок.
- Повторите покупку или отправку формы после правок. Убедитесь, что отложенная загрузка не вставляет новый контент над текущей областью просмотра.
Практический пример
В карточке товара блок наличия появляется над кнопкой заказа и сдвигает её вниз. Посетитель пытается нажать кнопку, но попадает в соседнюю ссылку. Зарезервированная область под наличие сохраняет расположение элементов до получения ответа.
Учебный пример.Ошибки и риски
Хороший CLS — не более 0,1 по 75-му перцентилю реальных посещений. Сдвиги могут появляться не только при старте загрузки, но и позже, например при прокрутке.
Пустой прямоугольник произвольной высоты может решить один экран и сломать другой. Нужны адаптивные размеры. Также не следует скрывать полезные блоки исключительно ради уменьшения числового показателя.
Как проверить результат
Сравните записи одинаковых сценариев и источники сдвигов в браузере, затем полевые значения. Проверяйте несколько размеров экрана и состояния с длинными названиями, ошибками формы и изменением наличия.