CLS (Cumulative Layout Shift): что это и как исправить

CLS — метрика Core Web Vitals, измеряющая визуальную стабильность страницы. Отвечает за неожиданные сдвиги контента при загрузке. Норма: до 0.1.

Что такое CLS

CLS (Cumulative Layout Shift) — метрика Core Web Vitals, измеряющая совокупность неожиданных смещений контента страницы во время её загрузки и использования. CLS оценивает визуальную стабильность — насколько элементы "прыгают" при загрузке.

Каждый сдвиг вычисляется по формуле:

layout shift score = impact fraction × distance fraction

impact fraction — какую долю viewport занимает сдвинувшийся элемент
distance fraction — на какую долю viewport элемент сдвинулся

CLS суммирует все сдвиги за время сессии (с оговорками о временных окнах).

Реальная проблема CLS: вы нажимаете кнопку "Купить", но перед кликом загружается баннер и сдвигает контент — вы случайно нажимаете на рекламу. Это типичный CLS.

Пороговые значения CLS

| Значение | Оценка | |----------|--------| | до 0.1 | Хорошо | | 0.1 — 0.25 | Требует улучшения | | более 0.25 | Плохо |

Частые причины плохого CLS

Изображения без размеров — браузер не резервирует место
Реклама и баннеры — вставляются после загрузки контента
Веб-шрифты (FOUT/FOIT) — шрифт загружается и сдвигает текст
Динамический контент — куки-баннеры, чаты, уведомления
Анимации — изменение top/left вместо transform

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

1. Задать размеры для изображений

<!-- Плохо: браузер не знает размер до загрузки -->
<img src="photo.jpg" alt="Фото" />

<!-- Хорошо: место зарезервировано заранее -->
<img src="photo.jpg" alt="Фото" width="800" height="600" />

2. Зарезервировать место для рекламы

/* Минимальная высота для рекламного блока */
.ad-slot {
  min-height: 250px;
  width: 300px;
}

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

/* font-display: swap показывает fallback шрифт сразу */
@font-face {
  font-family: 'MyFont';
  src: url('font.woff2') format('woff2');
  font-display: swap;
}

<!-- Предзагрузка критических шрифтов -->
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin />

4. Использовать transform для анимаций

/* Плохо: вызывает layout recalculation */
.animated {
  transition: top 0.3s;
}

/* Хорошо: только compositing, не вызывает сдвигов */
.animated {
  transition: transform 0.3s;
}

5. Место для динамического контента

/* Зарезервировать пространство для куки-баннера */
.cookie-banner-placeholder {
  height: 80px;
}

6. Aspect ratio для медиа

/* Сохраняет пропорции изображения до его загрузки */
img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

Инструменты для анализа CLS

Chrome DevTools → Performance:

Запишите сессию загрузки страницы
В секции Experience найдите Layout Shift события
Нажмите на событие — увидите смещённые элементы

PageSpeed Insights: Показывает текущий CLS и конкретные смещения с описанием проблем.

Проверка CLS на reChecker

Используйте Web Vitals для анализа визуальной стабильности. Инструмент покажет:

Текущее значение CLS
Оценку стабильности страницы
Все метрики Core Web Vitals в одном месте

FAQ

Куки-баннер ухудшает CLS? Да, если появляется после загрузки контента и сдвигает его. Решение: зарезервировать место для баннера или показывать его поверх контента (overlay), а не встраивать в поток документа.

CLS после взаимодействия пользователя не учитывается? Частично. Google различает сдвиги с пользовательским вводом (в течение 500 мс после клика — не учитываются) и без. Это позволяет не наказывать за намеренные анимации при взаимодействии.

Как часто обновляются данные CLS в Search Console? Google использует 28-дневное скользящее окно реальных данных (CrUX). После исправлений нужно ждать 28 дней для отражения улучшений. Проверить можно раньше через Lighthouse или PageSpeed Insights.