CLS реальный (стабильность layout)

Что это

CLS (Cumulative Layout Shift) — метрика Core Web Vitals, измеряющая визуальную стабильность страницы. Она считает, насколько сильно элементы смещаются в процессе загрузки без действия пользователя: баннер появился и сдвинул текст вниз, шрифт загрузился и «прыгнул» заголовок, картинка без размеров «выдавила» кнопку. Реальный CLS — это значение, собранное с живых пользователей через Chrome UX Report (CrUX), а не лабораторный замер в PageSpeed Insights. Порог: хорошо — до 0.1, требует улучшения — 0.1–0.25, плохо — выше 0.25.

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

Google использует реальный CLS из CrUX как один из трёх сигналов Page Experience (наряду с LCP и INP). С марта 2024 года INP заменил FID, но CLS остался обязательным. Сайты с CLS выше 0.25 теряют позиции в выдаче по сравнению с конкурентами, у которых значение в зелёной зоне, — Google официально подтвердил, что Page Experience влияет на ранжирование как «тайбрейкер» при сопоставимом качестве контента.

Яндекс не публикует метрику CLS напрямую, но учитывает поведенческие факторы: если пользователь промахивается по кнопке из-за сдвига и уходит — растёт показатель отказов, падает время на сайте, что снижает ИКС. В Я.Нейро и Турбо-страницах layout-сдвиги особенно критичны, потому что контент рендерится быстрее и любое смещение заметно сразу. Исследования Google показывают: сайты в хорошей зоне CLS имеют на 24% меньше преждевременных уходов со страницы.

Как проверить вручную

1. Google Search Console — раздел «Удобство для пользователей» → «Основные интернет-показатели». Здесь реальные данные CrUX по группам страниц. Если статус «Требует улучшения» или «Плохо» — смотри конкретные URL в детальном отчёте.

1. PageSpeed Insights (pagespeed.web.dev) — вставь URL страницы. Блок «Данные о реальных пользователях» покажет CLS из CrUX. Ниже — лабораторный замер Lighthouse с подсказкой, какие элементы смещаются и на сколько.

1. Screaming Frog + интеграция с PSI API: в настройках подключи Google PageSpeed API, тогда при краулинге краулер подтянет CLS для каждого URL. Удобно для больших сайтов — экспортируй в CSV и фильтруй по значению > 0.1.

1. Chrome DevTools — открой вкладку Performance, запусти запись загрузки страницы. В секции Experience увидишь Layout Shift-события с указанием виновных элементов и их impact-score.

1. Топвизор — в разделе аудита фиксирует CLS по данным PSI, можно отслеживать динамику в разрезе проекта.

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

Главные причины высокого CLS и их решения:

1. Изображения и видео без явных размеров

Всегда задавай width и height в HTML или через CSS aspect-ratio:

<!-- Правильно -->
<img src="banner.jpg" width="800" height="450" alt="...">

<!-- Или через CSS -->
img {
  aspect-ratio: 16 / 9;
  width: 100%;
}

2. Динамически вставляемый контент (баннеры, чат-виджеты, cookie-уведомления)

Резервируй место заранее через min-height или skeleton-placeholder:

.ad-slot {
  min-height: 90px; /* стандартная высота баннера */
}

3. Загрузка веб-шрифтов со сдвигом текста

@font-face {
  font-family: 'MyFont';
  src: url('font.woff2') format('woff2');
  font-display: optional; /* не показывает FOIT/FOUT */
}

Альтернатива — font-display: swap с size-adjust для компенсации метрик резервного шрифта.

Решения по CMS:

• WordPress: плагин «Autoptimize» + «Flying Images» для lazy-load с резервированием размеров. В теме проверь, что все <img> генерируются с атрибутами width/height.
• Tilda: в настройках блоков задавай фиксированную высоту для блоков с динамическим контентом. Сторонние виджеты подключай через Zero Block с явным min-height.
• 1C-Bitrix: в компоненте bitrix:catalog.element добавь width и height в шаблон вывода картинки; отключи lazy-load через JS для above-the-fold изображений.
• Webflow: в настройках изображения включи «Preserve aspect ratio», для встраиваемых элементов используй Embed-блок с обёрткой padding-top: 56.25%.

Типичные ошибки

1. Ориентация только на лабораторный CLS — PageSpeed Insights в лабораторном режиме не эмулирует медленный интернет и реальное поведение пользователя. Реальный CLS из CrUX может быть в 2–3 раза выше лабораторного из-за медленной загрузки шрифтов и рекламных сетей.

1. Фикс только главной страницы — GSC группирует страницы, и проблема часто на карточках товаров или статьях, где шаблон отличается. Проверяй выборочно разные типы страниц.

1. Cookie-баннер без резервирования — баннер появляется после рендера страницы и сдвигает весь контент. Правильно: рендери баннер в фиксированной позиции (position: fixed) или резервируй место в потоке.

1. Удаление элемента вместо скрытия — если JS убирает placeholder после загрузки контента через display: none, браузер пересчитывает layout. Используй visibility: hidden или замену содержимого без изменения размеров блока.

1. Игнорирование мобильного CrUX — у Google отдельные пороги оценки для десктопа и мобайла. Мобильный CLS часто хуже из-за адаптивных изображений и иных breakpoint-сдвигов. GSC показывает разбивку по устройствам.

Влияние на разные типы сайтов

Для интернет-магазинов CLS критичен на страницах листинга и карточек товара: изображения без размеров, подгружаемые цены и наличие через AJAX, всплывающие уведомления о скидках — всё это типичные источники сдвигов. При CLS > 0.25 на карточке товара пользователь может случайно нажать «В корзину» на чужой позиции — прямой урон конверсии.

Контентные сайты и блоги страдают от шрифтовых сдвигов и рекламных блоков AdSense / РСЯ, которые подгружаются асинхронно. Лендинги и SaaS-продукты с одной страницей обычно проще фиксируются: достаточно проверить hero-блок и форму. Но если на лендинге есть A/B-тест через внешний скрипт (Optimizely, VWO), он почти гарантированно добавляет сдвиг — решение: запускать тест до первого рендера через server-side эксперименты.