CLS

Происхождение и история термина

CLS расшифровывается как Cumulative Layout Shift. Обзор инициативы Web Vitals был опубликован Google 4 мая 2020 года. В нём прямо сказано, что состав Core Web Vitals со временем меняется; на дату проверки CLS имеет статус стабильной метрики в текущем наборе. Поэтому год публикации обзора — ориентир истории документации, а не доказательство даты «изобретения» показателя. ^[6]

Техническую основу событий сдвига описывает Layout Instability API. Открытая редакция документа WICG датирована 17 декабря 2025 года и имеет статус проекта отчёта группы сообщества. Это не рекомендация и не стандарт W3C. ^[2]

Суть и механизм

Браузер сравнивает положение видимых элементов между двумя отрисованными кадрами. Если элемент, который уже был виден, меняет начальную позицию, возникает событие layout shift. Само появление нового элемента не даёт оценку ему как нестабильному элементу, но его вставка может сдвинуть уже видимое содержимое. ^{[1, 2]}

Оценка одного неожиданного сдвига рассчитывается так:

S = I × D, где:

• I, impact fraction — доля области окна просмотра, которую занимает объединение прежней и новой видимой области нестабильных элементов;
• D, distance fraction — наибольшее перемещение нестабильного элемента по горизонтали или вертикали, делённое на больший размер окна просмотра.

Обе величины относительные, поэтому результат не измеряется ни в секундах, ни в пикселях. В проекте API distance fraction ограничена сверху единицей. ^{[1, 2, 7]}

Не каждое смещение считается неожиданным. У записи API признак hadRecentInput равен true, если перед ней менее чем за 500 миллисекунд был дискретный ввод пользователя. Такие события исключают из CLS. Прокрутка, перетаскивание и жест масштабирования относятся к непрерывному вводу и сами по себе не запускают это исключение. ^{[1, 2]}

Текущий Core Web Vital объединяет неожиданные сдвиги в сессионные окна. Следующий сдвиг остаётся в том же окне, если пауза после предыдущего меньше одной секунды; общая длительность окна не может превышать пяти секунд. CLS посещения — наибольшая сумма оценок среди таких окон. ^[1]

Здесь важно различать два уровня. Проект Layout Instability API задаёт события и оценку отдельного кадра; в его справочной части встречаются накопительные значения за срок документа. Текущая методика Core Web Vitals поверх этих событий применяет правило максимального сессионного окна. Поэтому простое пожизненное суммирование событий API не воспроизводит современный CLS. ^{[1, 2]}

Виды и классификации

Для проверки удобно авторское разделение по уровню агрегации. Это объясняющая схема, а не отдельная классификация Google или WICG.

Причины сдвигов также полезно группировать по диагностическому признаку: незарезервированное место для изображения или рекламы, поздняя вставка блока, замена шрифта, изменение размеров компонента. Это рабочая схема поиска причины; участие каждого события в CLS всё равно определяют правила метрики. ^{[1, 7]}

Как применяется на практике

Учебный сценарий: читатель открыл новость, увидел заголовок и начало текста, а затем над первым абзацем появилась реклама без заранее выделенной высоты. Абзац и всё содержимое ниже переместились. Для воспроизведения фиксируют размер окна, состояние кэша, сеть, последовательность действий и момент вставки блока.

После этого проверяют причину. Для изображения или рекламы резервируют место до загрузки содержимого; поздний компонент не вставляют над уже видимой областью без ожидаемого действия; для шрифта сравнивают размеры резервного и загруженного начертания. Конкретное исправление выбирают по записи сдвига и затронутым элементам, а затем повторяют тот же сценарий. ^[7]

Полевые и лабораторные данные отвечают на разные вопросы. PageSpeed Insights показывает полевые данные Chrome UX Report и лабораторный анализ Lighthouse. Полевой блок охватывает предыдущий 28-дневный период. Если для отдельного адреса данных недостаточно, сервис может перейти к данным уровня origin — агрегату по всем страницам сайта; при недостатке выборки и там полевой блок не показывается. Лабораторный запуск удобен для отладки воспроизводимого пути, но обычно ограничен загрузкой страницы и может не увидеть поздние сдвиги. ^{[1, 3, 7]}

Российский отчёт Яндекс Метрики «Время загрузки страниц» показывает длительности и этапы загрузки, а также позволяет работать с квантилями. Это другой объект измерения: его значения нельзя называть CLS и подставлять в формулу визуальной стабильности. ^[5]

Как измерить или проверить

Сначала разберём один сдвиг. Пусть объединённая область до и после перемещения занимает 40% окна просмотра, то есть I = 0,4. Самое большое перемещение равно 20% большего размера окна, то есть D = 0,2. Тогда S = 0,4 × 0,2 = 0,08. Это вклад одного события, а не готовый результат посещения. ^[2]

Теперь применим оконную логику. Допустим, события произошли через 0; 0,6 и 1,2 секунды и получили оценки 0,08; 0,04 и 0,03. Паузы меньше секунды, а длительность серии 1,2 секунды, поэтому сумма первого окна равна 0,08 + 0,04 + 0,03 = 0,15. Через 7 секунд возникает новый сдвиг с оценкой 0,10: из-за паузы он образует другое окно. Итоговый CLS равен max(0,15; 0,10) = 0,15, а не 0,25. Это учебные данные, иллюстрирующие правило, а не результат измерения сайта. ^[1]

Для оценки страниц Google использует такие диапазоны: хороший CLS — от 0 до 0,1 включительно; требуется улучшение — больше 0,1 и не больше 0,25; плохой — больше 0,25. Цель проверяют по 75-му процентилю посещений отдельно для мобильных и настольных устройств. Среднее значение по смешанной аудитории не является заменой этому правилу. ^{[1, 3, 6]}

Практическая проверка состоит из четырёх шагов:

1. Посмотреть полевые данные и записать адрес, период, устройство и уровень агрегации.
2. Воспроизвести проблемный путь в лаборатории, включая прокрутку и поздние состояния.
3. Найти конкретные события и элементы, затем исправить установленную причину.
4. Повторить сценарий сразу и наблюдать полевое распределение после обновления 28-дневного периода. ^{[1, 3, 7]}

Ошибки, ограничения и спорные вопросы

CLS не является временем загрузки, процентом удобства или общей оценкой Lighthouse. Страница может быстро показать основное содержимое и затем сдвинуть его; возможна и обратная ситуация — медленная, но визуально стабильная загрузка. CLS выражается безразмерным числом, тогда как отчёт времени загрузки использует секунды. ^{[1, 2, 5, 7]}

Нулевой результат одного лабораторного прогона не доказывает отсутствие сдвигов при других устройствах, сетях, вариантах рекламы и действиях. С другой стороны, полевые данные помогают увидеть масштаб, но сами по себе не называют компонент, который надо исправить. Поэтому для диагностики нужны оба типа наблюдений. ^{[1, 3, 7]}

Хороший CLS также не гарантирует высокую позицию в Google. Core Web Vitals используются системами ранжирования, однако Google оценивает совокупность сигналов и прямо предупреждает, что хорошие результаты отчётов не гарантируют верхних позиций. ^[4]

Частые вопросы

Связанные термины

• core-web-vitals
• lcp
• inp
• mobilnaya-adaptatsiya
• struktura-sayta
• skorost-zagruzki-sayta