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

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

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

- [Cumulative Layout Shift (CLS) — web.dev](https://web.dev/articles/cls) — Определение метрики и факторы сдвига.

- [Optimize CLS — web.dev](https://web.dev/articles/optimize-cls) — Чеклист: резервирование места, шрифты, вставки.

---

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

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

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