CLS – Cumulative Layout Shift (Совокупный сдвиг макета)
Cumulative Layout Shift (CLS) — метрика Core Web Vitals, измеряющая визуальную стабильность страницы: насколько элементы неожиданно смещаются во время загрузки.
Проверил Alexander Yarovenko · Обновлено: 2026-09-18
Что такое Cumulative Layout Shift?
Cumulative Layout Shift (CLS) — метрика Core Web Vitals, которая измеряет визуальную стабильность страницы. CLS фиксирует, насколько видимые элементы неожиданно меняют своё положение в процессе загрузки. Высокий CLS означает, что пользователи видят резкие скачки контента — например, кнопка смещается в момент нажатия.
Пороговые значения CLS
| Значение | Оценка |
|---|---|
| 0 – 0,1 | ✅ Хорошо |
| 0,1 – 0,25 | ⚠️ Требует улучшения |
| > 0,25 | ❌ Плохо |
Частые причины высокого CLS
- Изображения без явных атрибутов
widthиheight - Реклама, встраиваемый контент или iframe без зарезервированного места
- Веб-шрифты, вызывающие FOUT (мигание неоформленного текста)
- Динамически вставляемый контент выше существующего
- Анимации, провоцирующие изменение макета
Как исправить CLS
- Всегда указывайте
widthиheightдля изображений и видео - Резервируйте место для рекламы через CSS
min-height - Используйте
font-display: optionalили предзагрузку критичных шрифтов - Избегайте вставки контента выше свёртки после загрузки страницы
Влияние на SEO
Google использует CLS как сигнал ранжирования в рамках обновления Page Experience. Страницы с плохим CLS могут понижаться в результатах поиска, особенно на мобильных устройствах. Измерить CLS можно в отчёте Core Web Vitals в Google Search Console или через PageSpeed Insights.
Как применять в SEO
CLS измеряет неожиданные сдвиги макета за время жизни страницы. Резервируйте место для изображений, рекламы, embed и динамических блоков; не вставляйте контент выше читаемой области.
Чек-лист проверки
- Убедитесь, что реализация соответствует назначению страницы и задаче пользователя.
- Проверяйте вместе HTTP-ответ, отрендеренный HTML, canonical, robots и внутренние ссылки.
- Подтверждайте результат данными Search Console и аналитики, а не единственным сигналом краулера.
- После деплоя протестируйте контрольный URL на мобильном и настольном устройстве.
- Запишите ожидаемый результат, чтобы следующая проверка сразу обнаружила регрессию.
Практический пример
Карточка изображения получает width, height или aspect-ratio до загрузки файла, поэтому окружающий текст больше не прыгает при появлении картинки.
Как проверить результат
До изменения зафиксируйте состояние обхода, индексации, производительности и трафика. После деплоя повторно проверьте затронутый шаблон и контрольный URL, затем наблюдайте Search Console в течение следующего цикла обхода. Работа завершена, когда реальный ответ сайта совпадает с тем, что видит Google.