Как оптимизировать CLS в 2026 году: что такое Cumulative Layout Shift и как уменьшить сдвиги макета

Вы читаете статью онлайн, и вдруг на странице что-то меняется — текст уезжает, и вы теряете место, на котором остановились. Или хотите нажать одну кнопку, а страница сдвигается, и вы попадаете на совсем другую.

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

Нестабильный макет — частая проблема сайтов, из-за которой уходят посетители. С 2021 года Google учитывает визуальную стабильность страниц при ранжировании через метрику CLS, а Яндекс тоже обращает внимание на поведенческие факторы, связанные с удобством сайта. Разберёмся, как выявить и устранить проблемы с CLS.

Причины сдвигов макета на странице

Неожиданные сдвиги содержимого обычно случаются из-за асинхронной загрузки ресурсов или динамического добавления элементов DOM над уже отрендеренным контентом.

Типичные причины сдвига макета:

• Изображения и видео без указанных размеров. Браузер не знает, сколько места им отвести, и перестраивает макет после загрузки. По данным web.dev, это причина около 60% всех проблем с CLS.
• Веб-шрифты. Кастомный шрифт загружается позже запасного и отличается по размерам — текст перестраивается, элементы ниже сдвигаются.
• Рекламные блоки и сторонние виджеты. Баннеры, встраиваемые видео и виджеты подгружаются асинхронно и занимают непредсказуемое пространство.
• Динамически вставленный контент. Уведомления, баннеры cookie-согласия и промо-блоки, которые появляются над видимой областью страницы.

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

CLS — что это за метрика и как она рассчитывается

Сдвиг макета происходит каждый раз, когда видимый элемент изменяет своё положение от одного отрисованного кадра к другому.

CLS (Cumulative Layout Shift) — совокупный сдвиг макета, одна из трех ключевых метрик Core Web Vitals. Вместе с LCP (Largest Contentful Paint) и INP (Interaction to Next Paint) CLS формирует общую оценку качества пользовательского опыта.

Как рассчитывается CLS

В 2021 году Google изменил способ расчёта CLS. Раньше метрика суммировала абсолютно все сдвиги за всё время жизни страницы — это было несправедливо для длинных сессий и одностраничных приложений (SPA).

С Chrome 91 CLS рассчитывается через сессионные окна:

• Сдвиги макета группируются в окна. Новое окно начинается с первого сдвига.
• Окно расширяется, пока между сдвигами не проходит более 1 секунды.
• Максимальная длительность одного окна — 5 секунд.
• Итоговый CLS — максимальное значение среди всех сессионных окон, а не сумма всех сдвигов.

После этого изменения 30% сайтов получили улучшенные показатели CLS без каких-либо правок — новая формула точнее отражает реальный опыт пользователей.

Чем ниже показатель CLS, тем лучше.

Сайты должны стремиться к тому, чтобы CLS не превышал значение 0,1. Хороший порог — когда не менее 75% сессий (отдельно по мобильным и настольным устройствам) укладываются в это значение. CLS выше 0,25 Google считает плохим показателем.

Как проверить CLS: инструменты и сервисы

Chrome User Experience Report (CrUX) собирает данные реальных пользователей Chrome для метрик Core Web Vitals, включая CLS. На этих данных работают несколько бесплатных инструментов.

PageSpeed Insights

PageSpeed Insights — основной инструмент Google для проверки CLS и других показателей Core Web Vitals. Доступен из России, есть русскоязычный интерфейс. Показывает полевые данные (от реальных пользователей за последние 28 дней) и лабораторные данные (синтетический аудит Lighthouse).

Google Search Console

Search Console показывает сводный отчет Core Web Vitals по всему сайту. Здесь видно, какие группы URL имеют проблемы с CLS, и можно отслеживать динамику после внесенных исправлений.

Chrome DevTools

Во вкладке Performance в Chrome DevTools можно записать загрузку страницы и увидеть все сдвиги макета. Они отмечаются красными маркерами LS (Layout Shift) на таймлайне. При клике на маркер видно, какие элементы сдвинулись и насколько — это помогает точно определить причину проблемы.

Проверка скорости от PR-CY

Ещё один вариант — проверить скорость сайта в инструменте PR-CY. Он анализирует процесс загрузки, раскладывает его по этапам и дает конкретные рекомендации по улучшению каждого показателя. Работает бесплатно.

Яндекс.Метрика

Для сайтов, ориентированных на российскую аудиторию, полезно отслеживать время загрузки через отчет по времени загрузки в Яндекс.Метрике. Метрика не показывает CLS напрямую, но фиксирует параметры загрузки (DNS, соединение, загрузка контента, DOM), которые косвенно влияют на визуальную стабильность.

Когда сдвиги макета допустимы

Элементы на странице могут меняться в ответ на действия пользователя: ввод текста в поисковую строку показывает подсказки, клик по аккордеону раскрывает содержимое, нажатие на кнопку открывает модальное окно. Если элементы появляются сразу в ответ на действие пользователя (в пределах 500 мс) — CLS за такие сдвиги не начисляется.

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

Полезно по теме:
Юзабилити и психология: почему ваши клиенты не замечают изменений на сайте

Как отобразить новые элементы и не сбить с толку пользователя

Контент, который резко появляется на странице, сбивает с толку — пользователь уже решил, куда кликнуть, а макет поехал. Анимация и плавные переходы помогают подготовить пользователя к изменениям.

CSS-свойство transform позволяет анимировать элементы, не вызывая сдвигов макета:

• Вместо изменения height и width используйте transform: scale()
• Для перемещения элементов вместо top, right, bottom, left используйте transform: translate()

Как улучшить CLS: способы оптимизации

Большинство проблем с CLS можно устранить, следуя нескольким правилам. Вот что работает в 2026 году.

1. Указывайте размеры для изображений и видео

Всегда добавляйте атрибуты width и height к тегам <img> и <video>. Так браузер зарезервирует нужное пространство ещё до загрузки файла:

<img src="photo.jpg" width="800" height="450" alt="Описание">

2. Используйте CSS-свойство aspect-ratio

Свойство aspect-ratio — современная замена старому хаку с padding-top для резервирования пропорций. Оно поддерживается всеми актуальными браузерами (Chrome, Firefox, Safari, Edge) и задаёт соотношение сторон для любого элемента:

img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

.video-container {
  aspect-ratio: 16 / 9;
}

Используйте aspect-ratio для контейнеров видео, iframe, рекламных слотов и любых элементов с динамическим содержимым.

3. Оптимизируйте загрузку шрифтов

Веб-шрифты — частая причина сдвигов: текст сначала отображается запасным шрифтом, а потом перерисовывается кастомным, который может занимать больше или меньше места. Что поможет:

• Добавьте font-display: swap в @font-face — текст сразу отобразится запасным шрифтом и сменится после загрузки
• Предзагружайте критичные шрифты: <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
• Подберите запасной шрифт, близкий по размерам к основному, с помощью CSS-свойств size-adjust, ascent-override и descent-override

4. Резервируйте место под рекламу и встраиваемый контент

Не вставляйте контент поверх уже загруженного содержимого, если это не ответ на действие пользователя. Для рекламных блоков и виджетов:

• Задавайте контейнерам фиксированный min-height, соответствующий типичному размеру баннера
• Для iframe указывайте width и height
• Если рекламный блок не загрузился, не схлопывайте контейнер — используйте заглушку, чтобы пространство оставалось занятым

5. Используйте content-visibility для длинных страниц

CSS-свойство content-visibility: auto откладывает рендеринг контента за пределами экрана до момента скролла. Это ускоряет начальную отрисовку. Чтобы при этом не возникали сдвиги, добавьте contain-intrinsic-size — он задаёт предполагаемый размер элемента до рендеринга:

.article-section {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

Не применяйте content-visibility: auto к элементам в видимой области при загрузке — это может ухудшить показатели.

6. Используйте анимацию через transform

Для появления, перемещения и масштабирования элементов используйте CSS-свойство transform вместо свойств, влияющих на макет. transform: translate(), transform: scale() и opacity не вызывают пересчет макета и не увеличивают CLS.

7. Оптимизируйте bfcache

Back/forward cache (bfcache) — механизм браузера, который сохраняет снимок страницы в памяти при навигации вперёд/назад. Страница восстанавливается мгновенно, без повторной загрузки и сдвигов макета. Чтобы bfcache работал:

• Не используйте заголовок Cache-Control: no-store без необходимости
• Избегайте обработчиков события unload — замените их на pagehide
• Убедитесь, что на странице нет незавершённых сетевых запросов при уходе пользователя