Cumulative Layout Shift (CLS) — один из трёх Core Web Vitals, который напрямую влияет на ранжирование в Google. Метрика измеряет визуальную стабильность страницы: насколько контент «прыгает» после первого рендера.
Что такое layout shift и почему это проблема
Представь: ты читаешь статью, тянешься кликнуть кнопку — и в этот момент сверху появляется баннер, весь контент съезжает вниз, а ты жмёшь не туда. Классика. В худших случаях такой сдвиг приводит к случайной оплате или отправке формы.
CLS фиксирует именно это — неожиданные смещения элементов после того, как страница уже отрисовалась.
Как считается CLS
Метрика суммирует отдельные layout shift-события в скользящем временном окне до 5 секунд.
До мая 2021 года CLS измерял суммарный сдвиг за всё время жизни страницы. Оконное определение появилось позже.
Каждый отдельный сдвиг — это произведение двух величин:
- impact fraction — какой процент площади экрана затронут смещением
- distance fraction — на какую долю высоты экрана элемент переместился
Пример: текст занимает 50% экрана, реклама — 20%. Итого impact fraction = 70%. Текст сдвинулся вниз на 20% экрана — это distance fraction. Финальный score сдвига: 0.70 × 0.20 = 0.14.
Пороговые значения
| Оценка | Диапазон CLS |
|---|---|
| Хорошо | < 0.1 |
| Требует улучшения | 0.1 — 0.25 |
| Плохо | > 0.25 |
Для SEO важно укладываться в < 0.1.
CLS и Google Search
Данные для ранжирования Google берёт из Chrome User Experience Report (CrUX) — это реальная статистика посетителей, согласившихся делиться аналитикой. Несколько нюансов, которые стоит держать в голове:
- Данные агрегируются за скользящие 28 дней — исправление регрессии не отразится мгновенно
- Учитываются сдвиги, возникающие после первоначальной загрузки, в том числе при взаимодействии пользователя со страницей
- Оценивается 75-й перцентиль: даже если медиана хорошая, достаточно большая доля «плохих» сессий провалит тест
Это означает, что лабораторные тесты могут показывать отличный CLS, а реальные данные — нет. 🦆
Что чаще всего вызывает CLS
- Изображения и медиа без явно заданных размеров — браузер не знает, сколько места зарезервировать
- Шрифты, загружающиеся с задержкой и перерисовывающие текст
- Динамически вставляемые баннеры, попапы, куки-баннеры поверх контента
- Контент, инжектируемый в начало страницы после рендера
Как оптимизировать
- Всегда задавай атрибуты
widthиheightдля<img>и<video>— браузер сразу зарезервирует место - Используй
aspect-ratioв CSS для адаптивных медиа - Для веб-шрифтов применяй
font-display: optionalилиswapсsize-adjust, чтобы минимизировать reflow - Резервируй место под рекламные блоки через
min-height— даже если объявление ещё не загрузилось - Избегай вставки контента над уже отрисованными элементами; если это неизбежно — делай это до первого рендера
Измерение CLS
CLS — часть Lighthouse (начиная с версии 12 метрика присутствует в отчёте). Также доступна в:
- Chrome DevTools → вкладка Performance
- PageSpeed Insights
- CrUX-дашборде для полевых данных
- Инструментах синтетического мониторинга с поддержкой Core Web Vitals
Обращай внимание на разницу между lab и field данными: сдвиги, возникающие только при определённых пользовательских сценариях, синтетика может не поймать.