Запишите сценарий, а не только загрузку#
CLS описывает неожиданные смещения макета. Скриншот конечного состояния не показывает, как элементы двигались до него. Проверяйте загрузку, прокрутку и обновления интерфейса.
В DevTools найдите события Layout Shift и затронутые элементы. Переместившийся блок не всегда является причиной: его может вытолкнуть вставка выше.
Учебные случаи#
- Изображение получает высоту только после загрузки — задайте корректные размеры или соотношение сторон.
- Баннер добавляется над статьёй — оцените резервирование области.
- Веб-шрифт меняет переносы — сравните метрики запасного и основного шрифта.
- Результаты фильтра заменяют содержимое — проверьте ожидания пользователя и геометрию контейнера.
Учитывайте блочную модель: отступы и рамки влияют на занимаемое место.
Проверка исправления#
Повторите тот же сценарий с холодным кешем и медленной загрузкой ресурсов. Проверьте несколько размеров экрана и динамические вставки после первого экрана.
Ориентир Core Web Vitals — CLS не более 0,1 на 75-м перцентиле. Значение не измеряется в секундах. Если исчезло одно смещение, это ещё не подтверждает стабильность всех посещений. Другие метрики требуют отдельной диагностики: INP и LCP.
Источники#
Проверены 23 октября 2026 г.. Официальные рекомендации отделены от наших примеров и результатов проверки.