CLS

CLS — суммарный сдвиг раскладки за время визита: насколько элементы прыгают, пока страница догружается. Цель — 0. Хороший CLS до 0,1, плохой больше 0,25.

Главные причины: картинки без width/height, шрифты, подгружаемые после рендера (FOUT), баннеры, всплывающие cookie-уведомления, поздно загружающаяся реклама. Решения: ставить размеры на медиа, использовать font-display: swap с резервом, держать заранее зарезервированные слоты под баннеры.

Бенчмарк

CLS считается не за весь визит подряд, а по «окну сессии»: алгоритм берёт самый тяжёлый промежуток из сдвигов, разделённых паузами до 1 секунды и не длиннее 5 секунд, и в отчёт идёт максимум из таких окон. Поэтому один поздний баннер может испортить метрику сильнее, чем десяток мелких дёрганий при загрузке. Важная деталь: сдвиг в течение 500 мс после реального действия пользователя (клик, тап, ввод) не штрафуется — браузер помечает его флагом hadRecentInput, так что раскрытие аккордеона по клику в CLS не попадает.

Лабораторный CLS из Lighthouse и PageSpeed Insights почти всегда оптимистичнее полевого — синтетический прогон не докручивает страницу и не ловит ленивые блоки внизу. Ориентироваться надо на поле: в Core Web Vitals Google берёт 75-й перцентиль реальных визитов из CrUX, а в Яндекс.Метрике сдвиги видны в отчёте «Загрузка страниц». Частая ловушка — баннеры и виджеты чатов, которые на десктопе резервируют место, а в мобильной вёрстке схлопываются и роняют контент; именно мобильная версия и индексируется первой, поэтому проверяйте отзывчивость и стабильность раскладки в первую очередь на телефоне.