ПаветтаCLS — суммарный сдвиг раскладки за время визита: насколько элементы прыгают, пока страница догружается. Цель — 0. Хороший CLS до 0,1, плохой больше 0,25.
Главные причины: картинки без width/height, шрифты, подгружаемые после рендера (FOUT), баннеры, всплывающие cookie-уведомления, поздно загружающаяся реклама. Решения: ставить размеры на медиа, использовать font-display: swap с резервом, держать заранее зарезервированные слоты под баннеры.
Реклама подгрузилась через 2 секунды после рендера и сдвинула весь контент вниз на 200 пикселей. CLS подскочил до 0,32 — пользователь успел кликнуть не туда.
Бенчмарк
CLS считается по «окну сессии», без сплошного подсчёта за весь визит: алгоритм берёт самый тяжёлый промежуток из сдвигов, разделённых паузами до 1 секунды и не длиннее 5 секунд, и в отчёт идёт максимум из таких окон. Поэтому один поздний баннер может испортить метрику сильнее, чем десяток мелких дёрганий при загрузке. Важная деталь: сдвиг в течение 500 мс после реального действия пользователя (клик, тап, ввод) не штрафуется — браузер помечает его флагом hadRecentInput, так что раскрытие аккордеона по клику в CLS не попадает.
Лабораторный CLS из Lighthouse и PageSpeed Insights почти всегда оптимистичнее полевого — синтетический прогон не докручивает страницу и не ловит ленивые блоки внизу. Ориентироваться надо на поле: в Core Web Vitals Google берёт 75-й перцентиль реальных визитов из CrUX, а в Яндекс.Метрике сдвиги видны в отчёте «Загрузка страниц». Частая ловушка — баннеры и виджеты чатов, которые на десктопе резервируют место, а в мобильной вёрстке схлопываются и роняют контент; именно мобильная версия и индексируется первой, поэтому проверяйте отзывчивость и стабильность раскладки в первую очередь на телефоне.
Сумма того, насколько видимые элементы внезапно меняют положение, пока пользователь не трогал страницу.
В ранжирование идёт 75-й перцентиль реальных визитов из CrUX. Красивая цифра из Lighthouse тут ни при чём.
width/height на медиа, заранее зарезервированные слоты под рекламу и виджеты, font-display: swap с подходящим резервом.
Главные источники сдвигов — картинки и рекламные блоки без заданных размеров, шрифты, которые подменяются после загрузки, и блоки, вставляемые скриптом поверх контента: баннеры согласия, чаты, уведомления. Браузер рисует страницу до их появления, а потом всё уезжает вниз под пальцем читателя.
Лечение сводится к резервированию места. Ширина и высота у изображений и видео, заранее выделенная область под рекламу и виджеты, подключение шрифтов с параметром отображения, который избегает скачка. Проверяют результат на живых пользователях: в лаборатории сдвиг часто не воспроизводится, потому что скрипты грузятся быстро. Соседние метрики — LCP и INP.
Частые вопросы
Какое значение считается нормальным?
До 0,1 — хорошо, от 0,1 до 0,25 — требует внимания, выше 0,25 — плохо. Оценка идёт по семьдесят пятому процентилю реальных визитов, поэтому единичный лабораторный тест ситуацию не отражает.
Что чаще всего вызывает сдвиги?
Изображения и рекламные блоки без заданных размеров, поздняя подмена шрифта, всплывающие баннеры и виджеты, которые вставляются скриптом и раздвигают содержимое. На мобильных это заметнее всего.
Как быстро исправить показатель?
Проставить ширину и высоту всем изображениям и встраиваемым блокам, зарезервировать место под рекламу и виджеты, подключить шрифты так, чтобы подмена не двигала текст. Этих трёх правок обычно хватает для перехода в зелёную зону.
Влияет ли сдвиг раскладки на конверсию?
Влияет напрямую: человек промахивается по кнопке и уходит. Особенно чувствительны формы и корзина, где случайный клик по соседнему элементу прерывает сценарий.