CLS: как убрать прыжки вёрстки, которые бесят пользователей и Google

Вы собираетесь нажать на кнопку, и в последний момент страница «прыгает» — на её место встаёт реклама, а вы случайно кликаете не туда. Это раздражающее поведение измеряется метрикой Cumulative Layout Shift, и оно не только бесит пользователей, но и снижает конверсию и позиции в поиске. CLS входит в Core Web Vitals и напрямую влияет на ранжирование в Google. В этой статье разберём, почему происходят скачки вёрстки, какие пороги считаются нормальными, как диагностировать сдвиги инструментами и как устранить каждую причину — от изображений без размеров до рекламных баннеров и веб-шрифтов.

Что такое Cumulative Layout Shift

Cumulative Layout Shift — это совокупная величина неожиданных сдвигов элементов на странице во время загрузки и взаимодействия. Когда блок контента, который уже был виден пользователю, внезапно меняет своё положение без его действия, происходит сдвиг макета. CLS суммирует все такие сдвиги и выражает их одним числом. Чем оно меньше, тем стабильнее ведёт себя страница.

Важно подчеркнуть: метрика учитывает только неожиданные сдвиги. Если пользователь сам нажал кнопку «показать ещё» и контент сдвинулся в ответ на его действие — это ожидаемое поведение, и оно не штрафуется. Наказываются именно те случаи, когда страница дёргается сама по себе: подгрузилась картинка без зарезервированного места, встал баннер, сменился шрифт. Каждый такой сдвиг считается как произведение доли затронутой области экрана на расстояние смещения.

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

Пороги CLS: норма и проблема

Оценка	Значение CLS	Состояние
Хорошо	менее 0,1	Стабильная вёрстка, порог пройден
Нужно улучшить	0,1–0,25	Заметные сдвиги, требуется работа
Плохо	более 0,25	Сильные скачки, страдают UX и позиции

В отличие от LCP, который измеряется в секундах, CLS — безразмерная величина. Значение 0,1 означает, что суммарные сдвиги невелики и почти незаметны. Значение выше 0,25 — это уже серьёзные скачки, при которых пользователь регулярно теряет место на странице. Как и для других метрик Core Web Vitals, Google оценивает 75-й перцентиль реальных посещений. Общий контекст метрик мы раскрываем в обзоре про Core Web Vitals и скорость загрузки.

Хороший CLS — это обещание пользователю: то, что ты видишь сейчас, останется на месте. Нарушив это обещание один раз, вы заставляете человека напрягаться при каждом действии.

Главные причины сдвигов вёрстки

Подавляющее большинство проблем с CLS вызвано небольшим набором типичных причин. Разберём каждую и сразу дадим решение.

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

Самая частая причина. Когда у тега <img> не заданы атрибуты width и height, браузер не знает, сколько места займёт картинка, и до её загрузки оставляет ноль высоты. Когда изображение приходит, оно резко раздвигает контент вниз. Решение простое: всегда указывайте width и height на изображениях и видео. Современные браузеры по этим значениям вычисляют соотношение сторон и резервируют место заранее, даже если CSS делает картинку резиновой. Дополнительно можно задать свойство aspect-ratio в CSS — оно жёстко фиксирует пропорции контейнера.

Реклама и баннеры без зарезервированного места

Рекламные блоки и баннеры подгружаются асинхронно и часто уже после отрисовки контента. Если под них не зарезервировано место, появление баннера сдвигает весь контент ниже. Решение — заранее задать контейнеру рекламы фиксированную минимальную высоту через min-height, соответствующую типичному размеру объявления. Даже если конкретное объявление не загрузится, место останется пустым, но вёрстка не дёрнется. Это особенно критично на мобильных, где экран узкий и каждый сдвиг заметен — подробнее в гайде про мобильную оптимизацию сайта.

Динамически подгружаемый контент

Блоки, которые вставляются в DOM после загрузки — уведомления, баннеры подписки, рекомендованные товары, виджеты, — сдвигают существующий контент. Никогда не вставляйте динамический контент над уже видимым, если только это не ответ на действие пользователя. Если без вставки не обойтись, резервируйте место заранее через min-height или показывайте плейсхолдер-заглушку нужного размера, который потом заменяется реальным контентом без изменения габаритов.

Веб-шрифты и FOUT

Когда страница сначала показывает текст резервным шрифтом, а потом подменяет его на веб-шрифт с другими метриками, строки меняют высоту и ширину, и контент сдвигается. Это шрифтовая составляющая CLS. Решается она двумя путями: либо стратегией font-display: optional, либо переопределением метрик резервного шрифта через size-adjust, ascent-override и descent-override. Мы посвятили этой теме отдельный подробный материал — оптимизация шрифтов и font-display, где разбираем настройку до пикселя.

Iframe и сторонние виджеты

Встроенные карты, видеоплееры, формы обратной связи, чаты и виджеты соцсетей грузятся со сторонних доменов и часто меняют размер после инициализации. Каждое такое изменение — потенциальный сдвиг. Задавайте iframe и контейнерам виджетов фиксированные размеры через CSS. Для чатов и всплывающих кнопок используйте position: fixed, чтобы они существовали в отдельном слое и не влияли на поток основного контента.

Как диагностировать сдвиги

Найти источник сдвигов помогает связка инструментов. Начните с Lighthouse в Chrome DevTools или PageSpeed Insights — они дадут общее значение CLS и список элементов, которые сдвигаются больше всего, в разделе диагностики «Избегайте больших сдвигов макета».

• Lighthouse и PageSpeed Insights — общее значение CLS и список проблемных элементов.
• DevTools Performance — запись загрузки с раскадровкой, где видно момент каждого сдвига.
• Слой Layout Shift Regions в DevTools — подсвечивает синим области, которые сдвигаются, прямо на странице в реальном времени.
• Поле CrUX и Search Console — реальные значения CLS у ваших пользователей, по которым Google и ранжирует.

Особенно полезен слой Layout Shift Regions: включите его в настройках рендеринга DevTools, перезагрузите страницу — и каждый сдвиг подсветится синим прямоугольником. Это самый наглядный способ поймать виновника. Лабораторные инструменты хороши для отладки, но финальную оценку всегда сверяйте с полевыми данными в Google Search Console и Яндекс Вебмастере, потому что на реальных устройствах картина может отличаться.

Решения по каждой причине: сводная таблица

Причина сдвига	Решение
Картинки без размеров	Атрибуты width и height, CSS aspect-ratio
Реклама и баннеры	min-height на контейнере под объявление
Динамический контент	Плейсхолдер, резерв места, не вставлять сверху
Веб-шрифты (FOUT)	font-display: optional или size-adjust
Iframe и виджеты	Фиксированные размеры, position: fixed

min-height для динамических блоков

Универсальный приём против CLS — резервирование пространства. Если вы знаете, что в каком-то месте появится контент непредсказуемого, но ограниченного размера, задайте контейнеру минимальную высоту через min-height. Тогда место под будущий контент будет занято с самого начала, и его появление ничего не сдвинет. Это работает для рекламы, виджетов, динамических списков, баннеров согласия с cookies.

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

Влияние CLS на UX и поведенческие факторы

Стабильная вёрстка — это не только про метрику и ранжирование, но и про реальное удобство. Когда страница не прыгает, пользователь читает без помех, уверенно нажимает на кнопки и не уходит из-за случайных кликов. Это улучшает ключевые поведенческие сигналы: время на странице растёт, показатель отказов падает, глубина просмотра увеличивается. Все эти сигналы учитываются и Google, и Яндексом при оценке качества сайта.

Особенно болезненны сдвиги на мобильных, где экран маленький, а элементы расположены плотно. Случайное нажатие на рекламу вместо кнопки «купить» — это не только потерянная конверсия, но и негативный опыт, который человек запоминает. Поэтому работа над CLS тесно связана с общим улучшением удобства, о чём мы пишем в материале про улучшение юзабилити и UX-аудит. Стабильность вёрстки — базовая гигиена, без которой остальные усилия по UX теряют смысл.

Чек-лист устранения CLS

1. Задайте width и height на всех изображениях и видео.
2. Используйте CSS aspect-ratio для адаптивных медиа.
3. Зарезервируйте место под рекламу через min-height.
4. Не вставляйте динамический контент над видимым без резерва.
5. Настройте шрифты через font-display: optional или size-adjust.
6. Задайте фиксированные размеры iframe и виджетам.
7. Чаты и всплывашки выносите в position: fixed.
8. Найдите сдвиги через слой Layout Shift Regions в DevTools.
9. Контролируйте CLS по полевым данным в Search Console и Вебмастере.

Устранение скачков вёрстки — быстрая и благодарная работа: правки точечные, а эффект ощутимый и для пользователей, и для позиций. Если вы хотите, чтобы ваш сайт был стабильным, быстрым и удобным, закажите SEO-продвижение сайта в нашем агентстве или начните с комплексного SEO аудита, где мы найдём все источники сдвигов и составим план их устранения.

Услуги LSI Продвижение

Наша команда предлагает полный спектр услуг по SEO-продвижению и технической доработке сайтов. Мы работаем только белыми методами, ориентируемся на реальный бизнес-результат — трафик, заявки и продажи, а не только позиции в отчёте, — и выстраиваем продвижение системно, под конкретные задачи и нишу вашего проекта. Начать можно с бесплатной диагностики, чтобы понять текущее состояние сайта и точки роста, а затем перейти к комплексной работе. Выберите подходящую услугу из списка ниже:

• Бесплатный SEO аудит сайта — автоматическая проверка на 50+ параметров за 2 минуты
• Комплексный SEO аудит — глубокий ручной анализ с рекомендациями от эксперта
• Продвижение сайтов — вывод в ТОП Яндекса и Google по целевым запросам
• SEO консультация — разбор вашего сайта с конкретными рекомендациями
• LSI тексты — экспертный контент, оптимизированный для поисковых систем
• Доработка сайта — техническая оптимизация и исправление ошибок
• Создание сайта под ключ — разработка с нуля с SEO-оптимизацией
• Стоимость продвижения — прозрачные тарифы и условия
• Портфолио и кейсы — реальные результаты наших клиентов