Cumulative Layout Shift (CLS)
Метрика визуальной стабильности, измеряющая неожиданные сдвиги контента во время загрузки страницы. Входит в Core Web Vitals.
Кратко
CLS (Cumulative Layout Shift) — это числовой показатель того, насколько сильно «прыгает» вёрстка при загрузке. Хорошим считается значение менее 0.1, плохим — более 0.25. Высокий CLS ухудшает пользовательский опыт и может снижать ранжирование.
Что такое CLS
Метрика визуальной стабильности. Измеряет неожиданные сдвиги контента во время загрузки страницы. Например, вы читаете текст, загружается изображение без указанных размеров, текст сдвигается вниз — это плохой CLS.
Пороговые значения
- Хорошо → < 0.1
- Требует улучшения → 0.1 – 0.25
- Плохо → > 0.25
Причины плохого CLS
- Изображения без размеров — <img> без width/height
- Динамический контент — баннеры, реклама, вставляемые после загрузки
- Web fonts — FOIT (Flash of Invisible Text) или FOUT (Flash of Unstyled Text)
- Анимации — изменение размеров элементов
Как улучшить CLS
- Указывайте размеры изображений — width и height атрибуты
- Резервируйте место — для динамического контента (skeleton screens)
- font-display: swap — для веб-шрифтов
- Избегайте вставки контента над существующим контентом
- Используйте transform — вместо изменения width/height/top/left
Примеры кода
HTML
<!-- Плохо: без размеров -->
<img src="hero.jpg" alt="Hero">
<!-- Хорошо: с размерами -->
<img src="hero.jpg" alt="Hero" width="1200" height="600">
<!-- Хорошо: aspect-ratio -->
<img src="hero.jpg" alt="Hero" style="aspect-ratio: 16/9; width: 100%;">CLS вычисляется как произведение impact fraction (доля видимой области, которая сдвинулась) и distance fraction (расстояние сдвига). Google собирает данные через Chrome User Experience Report, поэтому тестируйте на реальных пользователях, а не только в лабораторных условиях.
FAQ
Частые вопросы
CLS — один из трёх Core Web Vitals, участвующих в факторе Page Experience. Плохой CLS приводит к высокому bounce rate (пользователи раздражаются, когда кнопка «Купить» уезжает вниз), что косвенно влияет на ранжирование.
Используйте Google PageSpeed Insights, Google Search Console (отчёт Core Web Vitals), Lighthouse в DevTools, а также расширение Web Vitals для Chrome.
Да, если не задать размеры изображения. При lazy loading изображение может загрузиться после скролла и сдвинуть контент. Указывайте width/height или используйте CSS-контейнер с фиксированными пропорциями.
FOIT (Flash of Invisible Text) — браузер скрывает текст, пока не загрузится веб-шрифт, затем текст появляется. FOUT (Flash of Unstyled Text) — сначала показывает системный шрифт, потом заменяет. Оба могут вызывать CLS, если замена шрифта меняет высоту строк. Используйте font-display: swap и резервные шрифты с похожими метриками.
Зарезервируйте фиксированное место для рекламы. Для динамических объявлений используйте минимальную высоту контейнера (min-height) и skeleton‑загрузку, чтобы блок не появлялся внезапно.
Прямые контакты
Обсудим ваш проект?
Расскажите о целях и сайте — предложу формат работы и следующий шаг.