CLS: почему страница «прыгает» и как это починить?

CLS (Cumulative Layout Shift) — метрика визуальной стабильности. Когда элементы «прыгают» при загрузке, пользователь случайно кликает не туда. Google учитывает CLS в Core Web Vitals.

Норма

CLS < 0.1 — хорошо. 0.1–0.25 — нужно улучшить. > 0.25 — плохо.

Основные причины

• Изображения без width/height: браузер не знает размер до загрузки → контент сдвигается
• Реклама: баннер загружается с задержкой и «раздвигает» контент
• Шрифты: кастомный шрифт загрузился → текст поменял размер (FOUT)
• Динамический контент: баннер, уведомление, cookie-consent появляется и сдвигает всё
• Iframes: встроенное видео или карта без заданных размеров

Как починить

• Задайте width и height каждому изображению и iframe. Или используйте CSS aspect-ratio
• Резервируйте место для рекламы: min-height: 250px на рекламном контейнере
• font-display: swap + preload шрифтов — минимизирует FOUT
• Cookie-consent и баннеры: фиксированная позиция (fixed bottom), не сдвигает контент