Что такое 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.