CLS высокий — макет прыгает при загрузке

Симптом

• При просмотре страницы в Google PageSpeed Insights, Lighthouse или Web Vitals виден высокий показатель CLS (обычно > 0.1).
• Пользователь видит «прыжки» элементов: блоки сдвигаются, изображения появляются в неожиданных местах, шрифты меняют размер.
• На мобильных устройствах особенно заметно: меню, баннеры, кнопки перемещаются после загрузки контента.
• В DevTools → Performance → Layout Shift отмечается большое количество событий с высоким значением.

Причина

CLS измеряет суммарный смещение видимой части страницы, которое происходит после начала загрузки. Основные технические причины:

1. Отсутствие размеров у медиа – <img>, <video>, <iframe> без атрибутов width/height или без CSS‑правил, задающих фиксированную пропорцию.
2. Динамически подставляемый контент – рекламные блоки, виджеты, комментарии, которые вставляются после рендеринга.
3. Отложенная загрузка шрифтов – использование font-display: swap без резервных размеров, что приводит к смене размера текста при загрузке.
4. Неправильные CSS‑правила – position: absolute без указания top/left, flex‑контейнеры без фиксированной высоты, margin/padding меняющиеся после загрузки.
5. Переопределение размеров в JavaScript – скрипты, которые меняют height/width элементов после того, как они уже отрисованы.

Как проверить

1. PageSpeed Insights / Lighthouse
   - Запустите анализ, посмотрите раздел «CLS» и список элементов, вызывающих смещение.
2. DevTools → Performance
   - Запустите запись, прокрутите страницу, остановите запись.
   - В панели «Layout Shift» найдите события с высоким значением.
   - Кликните по событию → «Event» → «Event Target» – это элемент, который сдвинулся.
3. Проверка размеров изображений
   ```bash grep -R “