CLS

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

Определение и бенчмарк

CLS вычисляется как сумма произведений impact fraction (доля экрана, задетая сдвигом) на distance fraction (расстояние перемещения относительно высоты viewport) по всем сессиям нестабильности. Результат — безразмерное число от 0 и выше.

Пороговые значения Google:

• ≤ 0.1 — Good. Страница визуально стабильна, пользователь не теряет место в тексте и не промахивается по кнопкам.
• 0.1–0.25 — Needs Improvement. Сдвиги есть, но не критичные. Google учитывает это при ранжировании.
• > 0.25 — Poor. Заметные прыжки контента, негативный сигнал для поиска и конверсии.

В отличие от LCP и INP, у CLS нет единицы измерения — это не секунды и не миллисекунды, а коэффициент нестабильности layout-а.

Причины сдвига layout

Большинство проблем с CLS возникают по четырём типовым причинам:

• Изображения без явных размеров. Если тег <img> не имеет атрибутов width и height, браузер не знает, сколько места зарезервировать до загрузки файла. Когда картинка наконец приходит, она «раздвигает» весь нижележащий контент. На страницах QRkoder это особенно критично для обложек статей и превью QR-кодов в галерее.
• Динамически вставляемые баннеры и реклама. Блоки, добавляемые в DOM после первоначальной отрисовки без зарезервированного места, сдвигают соседние элементы. Это главный источник высокого CLS на контентных сайтах с монетизацией.
• Веб-шрифты: FOUT и FOIT. Пока кастомный шрифт загружается, браузер показывает системный. Когда шрифт прибывает (FOUT — flash of unstyled text) или появляется из невидимости (FOIT), высота строк и межбуквенные расстояния меняются, из-за чего текстовые блоки смещаются.
• Поздняя вставка элементов в DOM. Виджеты чата, всплывающие уведомления о cookie, карусели, которые инициализируются по JS после hydration — все они могут резко «вдвинуть» блок в поток, не давая браузеру зарезервировать место заранее.

Оптимизация CLS

Снижение CLS до уровня Good (≤ 0.1) достигается предсказуемым резервированием пространства:

• Явные width и height на всех img и iframe. Это позволяет браузеру вычислить аспектное соотношение ещё до загрузки файла. Современная альтернатива — CSS-свойство aspect-ratio: aspect-ratio: 16 / 9 на контейнере изображения. Работает даже для отзывчивых картинок с width: 100%.
• font-display: optional или font-display: swap. Значение optional позволяет браузеру не применять кастомный шрифт, если он не загрузился достаточно быстро — пользователь видит стабильный системный шрифт без прыжка. Значение swap допускает замену, но оформляет её плавно. Оба варианта лучше поведения по умолчанию, при котором браузер ждёт шрифт без тайм-аута.
• Резервирование пространства для динамических блоков. Если баннер, реклама или виджет появится позже — заранее задайте min-height на контейнер-заглушку. Когда содержимое подгрузится, контейнер уже занимал нужное место и сдвига не произойдёт.
• Вставка динамических элементов вне потока документа. Всплывающие уведомления, тосты, чат-пузыри лучше позиционировать через position: fixed или position: absolute — они не участвуют в обычном flow и не сдвигают соседний контент.

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