Как исправить CLS и скачки макета

Используйте DevTools Performance и раздел Layout Shifts, чтобы увидеть время, затронутые узлы и shift score. Lighthouse даёт лабораторный сценарий, но полевой CLS может возникать после загрузки рекламы, consent-баннера или пользовательского состояния.

Проверьте несколько viewport и длинную сессию. CLS может появиться при прокрутке, открытии блока или позднем ответе API, даже если первый экран выглядит стабильным.

У изображений и видео задавайте width/height или aspect-ratio, чтобы браузер выделил место до загрузки. Для iframe, карты, рекламы и embed создайте контейнер с предсказуемой высотой.

Если размер рекламы динамический, зарезервируйте максимальный разумный слот или изменяйте его только вне viewport. Пустое место обычно менее вредно, чем скачок читаемого текста.

Cookie-баннер, акция или системное сообщение не должны внезапно сдвигать страницу. Используйте overlay, заранее выделенное место или показывайте блок до первой отрисовки, если это возможно и корректно.

Изменения после пользовательского действия могут не учитываться как неожиданный shift в ограниченном окне, но UX всё равно важен. Анимации делайте через transform и opacity, а не свойства, запускающие layout.

Web font может изменить размеры текста после загрузки. Подберите совместимый fallback, настройте font-display и используйте metric overrides, если различие заметно. Не preload все начертания — это создаёт конкуренцию.

Skeleton должен совпадать с итоговой геометрией карточки. Если загрузка данных меняет число строк или высоту, задайте минимальный размер или проектируйте переход без сдвига соседнего контента.