Что такое CLS и как его избежать?

Middle
279 просмотров
AFK Offer AI

CLS (Cumulative Layout Shift) — суммарное смещение элементов без действия пользователя. Хорошо < 0.1. Причины: картинки без width/height, шрифты с FOUT, динамический контент выше viewport, реклама без зарезервированного места. Решения: всегда задавай size на img/video (width/height атрибуты или aspect-ratio CSS). font-display: optional или preload шрифтов. Резервируй место для динамического контента. transform анимации вместо top/left. min-height для блоков с контентом.

Следующий вопрос

Что такое CSS-переменные (custom properties)?