CLS

CLS (Cumulative Layout Shift): что показывает метрика

CLS (Cumulative Layout Shift) — показатель визуальной стабильности веб-страницы, входящий в набор Core Web Vitals от Google. Он оценивает неожиданные смещения видимых элементов интерфейса во время работы страницы.

Типичный пример плохого CLS — пользователь начинает читать статью, но после загрузки изображения или рекламного блока текст внезапно перемещается вниз. Другой пример — кнопка меняет положение непосредственно перед нажатием, из-за чего пользователь попадает на соседний элемент.

CLS помогает количественно оценить такие нарушения. Метрика характеризует не скорость загрузки и не время реакции интерфейса, а устойчивость расположения содержимого.

В отличие от LCP и INP, показатель CLS не измеряется в секундах или миллисекундах. Это безразмерная оценка, учитывающая площадь затронутой области экрана и расстояние перемещения элементов.

Нормальные значения CLS в Core Web Vitals

Для оценки визуальной стабильности Google использует следующие пороговые значения:

• CLS ≤ 0,1 — хороший результат (Good).
• CLS > 0,1 и ≤ 0,25 — требуется улучшение (Needs Improvement).
• CLS > 0,25 — плохой результат (Poor).

При оценке реальных посещений ориентируются на 75-й процентиль измерений. Это означает, что хороший результат должен достигаться как минимум для 75% посещений в соответствующей выборке.

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

Задача оптимизации — устранить нежелательные перемещения содержимого, а не просто получить минимальное число в одном лабораторном тесте.

Как рассчитывается показатель CLS

Отдельное смещение макета (layout shift) фиксируется, когда видимый элемент меняет своё начальное положение между двумя последовательными кадрами отрисовки.

Оценка отдельного смещения рассчитывается как произведение двух составляющих:

• Impact fraction — доля области просмотра, затронутая нестабильными элементами.
• Distance fraction — относительное расстояние перемещения элементов в направлении наибольшей размерности области просмотра.

Современная методика CLS использует не простую сумму всех смещений за время существования страницы, а максимальную сумму неожиданных смещений в пределах одного окна сеанса (session window).

Окно объединяет последовательные смещения, если промежуток между ними составляет менее одной секунды. Максимальная продолжительность такого окна — пять секунд.

Какие изменения учитываются

В CLS учитываются непредвиденные перемещения уже отображённых элементов. Например, появление блока над текстом может сдвинуть существующее содержимое и увеличить показатель.

Само по себе изменение размеров элемента не обязательно создаёт layout shift. Если другие видимые элементы сохраняют исходное положение, такое изменение может не влиять на CLS.

Смещения, ожидаемые непосредственно после определённых действий пользователя, например нажатия кнопки, обычно исключаются из оценки, если происходят в пределах 500 миллисекунд после квалифицируемого взаимодействия. При этом прокрутка страницы не даёт такого исключения для неожиданно перемещающегося содержимого.

Основные причины высокого CLS

Изображения и видео без заданных размеров

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

Для предотвращения проблемы указывают атрибуты width и height либо задают подходящее соотношение сторон через CSS aspect-ratio. Это позволяет браузеру резервировать пространство ещё до завершения загрузки файла.

При адаптивной вёрстке важно учитывать реальные пропорции изображения. Если мобильная и десктопная версии используют разные кадрирования, зарезервированные размеры должны соответствовать выбранному варианту.

Рекламные блоки и встраиваемый контент

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

Устойчивый вариант — заранее резервировать пространство под компонент с учётом его ожидаемых размеров. Для блоков с переменной высотой требуется отдельно продумать поведение контейнера.

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

Позднее подключение веб-шрифтов

Если сначала текст отображается системным шрифтом, а затем заменяется веб-шрифтом с другими метриками, строки могут переноситься иначе. Изменение высоты текстовых блоков способно сдвинуть расположенные ниже элементы.

Для снижения риска используют подходящий резервный шрифт, корректную настройку font-display, раннюю загрузку действительно необходимых шрифтов и CSS-свойства для согласования метрик шрифтов, когда это требуется.

При этом настройка font-display: swap сама по себе не гарантирует отсутствие смещений: замена шрифта по-прежнему может изменить геометрию текста.

Динамически добавляемые элементы

Источником CLS могут стать уведомления, баннеры, формы, блоки рекомендаций, элементы персонализации и другие компоненты, которые JavaScript добавляет уже после первоначальной отрисовки.

Особенно заметны изменения в верхней части страницы: новый блок способен переместить значительную долю содержимого первого экрана.

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

Анимации и изменение геометрии

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

Для визуального перемещения и изменения масштаба часто предпочтительнее использовать transform, поскольку такие изменения не требуют обычного перерасчёта расположения соседних элементов и не учитываются CLS как стандартные layout shifts.

Однако анимация на transform не устраняет проблемы удобства интерфейса автоматически: резкое движение объектов всё равно может мешать пользователю.

Как проверить CLS на сайте

PageSpeed Insights

PageSpeed Insights позволяет посмотреть CLS в составе Core Web Vitals. При наличии достаточного количества данных сервис показывает показатели реальных пользователей из Chrome User Experience Report (CrUX).

Эти полевые данные охватывают скользящий 28-дневный период. Отчёт также содержит лабораторную диагностику Lighthouse, которая помогает обнаружить проблемы конкретной загрузки страницы.

Полевой CLS и лабораторный CLS могут различаться. Например, Lighthouse при обычной проверке загрузки не обязательно воспроизводит смещения, возникающие после прокрутки, открытия интерфейсных компонентов или загрузки дополнительного содержимого.

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

Chrome DevTools

Панель Performance в Chrome DevTools позволяет исследовать смещения макета во время загрузки страницы и последующих взаимодействий.

Для диагностики необходимо записать проблемный сценарий, найти события Layout Shift и изучить затронутые элементы. Это помогает определить, какие части интерфейса переместились и в какой момент возникла нестабильность.

Важно различать элемент, который сдвинулся, и исходную причину. Например, DevTools может выделить перемещённый текст, хотя фактическим источником проблемы стало изображение над ним, которое поздно получило высоту.

Google Search Console и полевые измерения

Отчёт Core Web Vitals в Google Search Console помогает отслеживать состояние групп URL на основе пользовательских данных. Он полезен для выявления проблем, повторяющихся на множестве страниц одного типа.

Для более подробного анализа могут использоваться собственные измерения через библиотеку web-vitals и другие решения Real User Monitoring (RUM).

При сопоставлении разных источников необходимо учитывать различия методик и полноты наблюдений. Например, смещения внутри iframe могут отражаться в CrUX, но быть недоступными для измерения средствами JavaScript родительской страницы.

Как уменьшить CLS: порядок оптимизации

Устранение CLS начинают с воспроизведения проблемы и определения элемента, который вызывает изменение геометрии. Исправления без диагностики могут не повлиять на итоговое значение.

1. Определить проблемные шаблоны. Проверить страницы статей, каталога, карточек товаров и другие типы URL, для которых обнаружены повышенные значения CLS.
2. Сравнить мобильные и десктопные сценарии. Изучить поведение адаптивной вёрстки, изображений, меню и блоков с условным отображением.
3. Зарезервировать размеры медиаэлементов. Проверить width, height, aspect-ratio и контейнеры для изображений, видео и iframe.
4. Проверить динамическое содержимое. Исключить неожиданное добавление и удаление блоков, меняющих положение уже видимого текста и элементов управления.
5. Проверить загрузку шрифтов. Сравнить геометрию текста до и после применения веб-шрифта.
6. Исследовать анимации и скрипты. Найти изменения CSS и DOM, вызывающие перерасчёт расположения элементов.
7. Повторить измерения. Проверить исправленный сценарий в DevTools и лабораторных тестах, затем отслеживать подтверждение результата в полевых данных.

Особенности CLS на WordPress и WooCommerce

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

В WooCommerce дополнительного внимания требуют карточки товаров, галереи, вариации товаров, уведомления корзины, фильтры каталога и блоки рекомендаций. Проверять нужно конкретное поведение каждого компонента, а не считать его причиной CLS только по факту использования.

Изменения рекомендуется вносить последовательно, сохраняя исходные измерения и проверяя функциональность страниц после каждого значимого исправления.

CLS и SEO: влияет ли показатель на позиции

CLS входит в Core Web Vitals, которые Google рекомендует учитывать при обеспечении качественного пользовательского опыта. Характеристики удобства страницы связаны с принципами, используемыми поисковыми системами при оценке качества результатов.

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

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

Оценивать результат следует по реальным изменениям интерфейса и показателям Core Web Vitals, а не только по общему баллу производительности.

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

Какое значение CLS считается хорошим?

Хорошим считается CLS не выше 0,1. Значения выше 0,1 и до 0,25 включительно требуют улучшения, а результат выше 0,25 относится к плохим.

Чем CLS отличается от LCP и INP?

CLS измеряет визуальную стабильность страницы, LCP — скорость отображения крупнейшего элемента основного содержимого, а INP — отзывчивость интерфейса на действия пользователя. Это самостоятельные метрики, отражающие разные аспекты пользовательского опыта.

Почему CLS в PageSpeed Insights отличается от Chrome DevTools?

Причина может заключаться в разных условиях и периодах измерения. Полевые показатели CrUX отражают множество реальных посещений, а локальная диагностика воспроизводит отдельный сценарий. На результат также влияют устройство, размер области просмотра, состояние кеша и динамическое содержимое.

Может ли CLS возникать после завершения загрузки страницы?

Да. Метрика учитывает неожиданные смещения на протяжении жизненного цикла страницы, а не только во время первоначальной загрузки. Например, проблема может проявиться после прокрутки, появления рекламного блока или асинхронного обновления интерфейса.

Можно ли полностью устранить CLS?

Многие причины неожиданных смещений можно устранить правильным резервированием пространства и стабильным поведением компонентов. Однако добиться строго нулевого показателя во всех пользовательских сценариях не всегда практически возможно. Основная цель — обеспечить хороший CLS и исключить заметные нарушения работы интерфейса.

Дополнительные материалы по скорости и Core Web Vitals

CLS необходимо анализировать вместе с другими характеристиками пользовательского опыта. Для разбора различий между полевыми измерениями и лабораторной диагностикой полезен материал PageSpeed Insights: как читать отчёт и правильно исправлять проблемы.

Более широкий подход к производительности, включающий LCP, INP, CLS и поиск технических ограничений, рассмотрен в статье Скорость сайта: что измерять, как проверить и что реально ускорять.