CLS
CLS (Cumulative Layout Shift) — сумма сдвигов макета. Кнопка уехала — человек промазал. Это и UX, и метрика Google.
Откуда берётся «прыгающая» вёрстка
Полное имя CLS: сумма сдвигов макета за визит. Это и UX, и метрика Google.
Что вызывает CLS
- Cumulative Layout Shift — насколько страница прыгает, пока грузятся картинки и баннеры. Кнопка уехала — человек промазал.
- Полное имя CLS: сумма сдвигов макета за визит. Это и UX, и метрика Google.
- Заранее задают ширину и высоту картинок, не вставляют рекламу сверху без слота, шрифты подключают так, чтобы текст не скакал.
- Обычно нет резерва под фото, веб-шрифт подменил системный с другим кеглем, или сверху внезапно выехал баннер.
- Третья метрика тройки. Даже быстрый LCP не спасёт, если человек промахивается по кнопке из-за скачка.
CLS и реклама
| Проблема | Норма | Действие | |
|---|---|---|---|
| Метрика | Плохо | Норма | Где смотреть |
| LCP | > 2.5 с | ≤ 2.5 с | PageSpeed / CrUX |
| INP | > 200 мс | ≤ 200 мс | Field data |
| CLS | > 0.1 | ≤ 0.1 | Мобильный отчёт |
ПрактикаТретья метрика тройки. Даже быстрый LCP не спасёт, если человек промахивается по кнопке из-за скачка.
CLS: как применяют
Резервируют размеры картинок, не вставляют рекламу сверху без слота, шрифты без скачка.
Частые вопросы
Что такое CLS?
Cumulative Layout Shift — насколько страница прыгает, пока грузятся картинки и баннеры. Кнопка уехала — человек промазал.
Cumulative Layout Shift
Полное имя CLS: сумма сдвигов макета за визит. Это и UX, и метрика Google.
Как исправить CLS?
Заранее задают ширину и высоту картинок, не вставляют рекламу сверху без слота, шрифты подключают так, чтобы текст не скакал.
Прыгает вёрстка
Обычно нет резерва под фото, веб-шрифт подменил системный с другим кеглем, или сверху внезапно выехал баннер.
CLS Core Web Vitals
Третья метрика тройки. Даже быстрый LCP не спасёт, если человек промахивается по кнопке из-за скачка.