CLS: реклама, шрифты и динамический контент без «прыжков» макета

Cumulative Layout Shift — метрика стабильности визуала. Как связаны всплывающие блоки, веб-шрифты и поздняя подгрузка с плохим UX и Core Web Vitals.

CLS суммирует неожиданные сдвиги видимого макета: чем больше элемент «прыгает» относительно того, что пользователь уже видел, тем выше вклад в метрику. Рекламные слоты без зарезервированной высоты и изображения без размеров — частые виновники.

Цель в поле — держать CLS на уровне «хорошо» по порогам CWV; измеряйте в CrUX и в лаборатории, отдельно проверяя страницы с тяжёлой монетизацией.

Cumulative Layout Shift (CLS) — web.dev — Определение метрики и факторы сдвига.
Optimize CLS — web.dev — Чеклист: резервирование места, шрифты, вставки.

Что зафиксировать в договоре с рекламой

Согласуйте фиксированные или минимальные размеры контейнеров под баннеры и не подменяйте основной LCP-блок рекламой поверх контента без явного действия пользователя.

Для кастомных шрифтов используйте `font-display: optional` или подбор метрик, чтобы FOIT/FOUT не сдвигал строки после отрисовки.