Коротко. CLS измеряет неожиданные сдвиги вёрстки. Хорошо — 0,1 и меньше. Чаще всего страница прыгает из-за картинок без размеров, поздно загруженных баннеров и подмены шрифтов. Лечится резервированием места, а не уменьшением контента.
Как читать материал. Сначала найдите сдвиг в записи, потом определите элемент и причину. Нейросеть помогает разобрать разметку, но проверка — в браузере.
Что такое CLS
Cumulative Layout Shift измеряет, насколько элементы смещаются без действия пользователя. Если человек сам открыл меню и контент сдвинулся — это не считается.
Пороги:
- до 0,1 — хорошо;
- 0,1–0,25 — нужно улучшить;
- больше 0,25 — плохо.
Почему страница прыгает
- Картинки без width и height. Браузер не знает размер до загрузки.
- Баннеры и реклама. Контейнер появляется позже контента.
- Шрифты. Подмена шрифта меняет высоту строки.
- Поздние блоки. Уведомления, cookie-баннеры, вставки над текстом.
- Динамический контент. Подгрузка элементов над первым экраном.
Как найти
В DevTools → Performance включите запись, прокрутите страницу и откройте дорожку Layout Shifts. Клик по сдвигу покажет элемент и причину.
В PageSpeed Insights смотрите элементы, которые сдвигаются. Лабораторные данные показывают причины, полевые — CLS реальных пользователей.
new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
if (!entry.hadRecentInput) console.log(entry.value, entry.sources)
}
}).observe({type: "layout-shift", buffered: true})Фрагмент выводит сдвиги без действия пользователя. Вставьте его в консоль на тестовой странице.
Классический путь. Найдите сдвиг в Performance и посмотрите на элемент.
С нейросетью. Отдайте HTML проблемного блока и попросите найти причину.
Вот HTML и CSS блока, который сдвигает контент. Найди, почему браузер
не знает размер заранее. Предложи правку с width/height или aspect-ratio.
Не уменьшай контент и не скрывай элементы.Проверка. Обновите страницу с медленной сетью и посмотрите, остался ли сдвиг.
Что исправлять
| Причина | Действие |
|---|---|
| Картинка | указать width, height или aspect-ratio |
| Видео | задать пропорции контейнера |
| Баннер | зарезервировать высоту |
| Шрифт | font-display и близкие метрики шрифта |
| Поздний блок | вставлять ниже контента или резервировать место |
| Динамика | не вставлять элементы над первым экраном |
Пример для картинки:
<img src="hero.webp" width="1200" height="630" alt="...">Если размеры задаются адаптивно, используйте aspect-ratio в CSS.
Влияет ли это на SEO
CLS входит в Core Web Vitals. Один показатель сам по себе позиции не двигает: Google оценивает опыт страницы целиком, а не отдельную метрику.
Прыгающая страница выглядит небрежно. На мобильных сдвиг легко уводит кнопку из-под пальца.
Где помогает нейросеть
| Задача | Что делает модель | Что проверять руками |
|---|---|---|
| Поиск причины | читает HTML и CSS | запись в браузере |
| Правка разметки | добавляет размеры | адаптивность |
| Аудит шаблона | находит блоки без резерва | реальные страницы |
| План работ | приоритеты | влияние на дизайн |
Частые ошибки
- Убирать контент вместо резервирования места.
- Указывать только ширину без высоты.
- Ставить cookie-баннер поверх контента.
- Загружать шрифты без font-display.
- Тестировать только на быстром интернете.
- Считать любой сдвиг ошибкой, включая действие пользователя.
Вопросы
Какой CLS считается хорошим?
0,1 и меньше.
Сдвиг из-за клика считается?
Нет. Учитываются неожиданные сдвиги без действия пользователя.
Почему сдвиг виден только на мобильном?
Разная ширина, шрифты и порядок блоков. Проверяйте оба варианта.
Может ли нейросеть убрать CLS?
Она предлагает правки разметки, но результат проверяется записью в браузере.
Связанные материалы
Источники
Официальные документы 4
- web.dev: CLSweb.dev
- web.dev: оптимизация CLSweb.dev
- Google: page experiencedevelopers.google.com
- MDN: aspect-ratiodeveloper.mozilla.org