CLS / Cumulative Layout Shift

Метрика CLS показывает насколько сильно смещается контент на странице при её загрузке.

Сдвиг макета происходит каждый раз, когда видимый элемент меняет свое положение от одного визуализируемого кадра к следующему. 

Серия смен макета, известная как окно сеанса, - это когда одна или несколько отдельных смен макета происходят в быстрой последовательности с интервалом менее 1 секунды между каждой сменой и максимальной продолжительностью 5 секунд для общей продолжительности окна.

Самая большая серия - это окно сеанса с максимальной совокупной оценкой всех изменений макета в этом окне.

Чтобы обеспечить удобство для пользователей, сайты должны стремиться иметь оценку CLS 0,1 или меньше. Рекомендуется ориентироваться на значение 75-ти процентного показателя, отдельно рассчитанного для мобильных и десктопных устройств.

Способы прокачать CLS:

• Указание атрибутов width и height
• Использование aspect ratio
• Применение CSS-свойства object-fit
• Предварительная загрузка изображений
• Использование font-display: swap
• Резервирование пространства для шрифтов
• Применение кастомных шрифтов с осторожностью
• Резервирование пространства для рекламных блоков
• Предварительная загрузка динамического контента
• Использование placeholder’ов
• Отложенная загрузка некритичных скриптов
• Минимизация манипуляций с DOM
• Использование requestIdleCallback
• Использование viewport units для размеров
• Применение CSS-grid и flexbox
• Избегание float’ов