Cumulative Layout Shift

Cumulative Layout Shift (CLS) — один из ключевых показателей Web Vitals, отражающий стабильность визуального контента страницы во время её загрузки. CLS измеряет суммарное смещение элементов на экране, которое может нарушить пользовательский опыт. Высокие значения CLS приводят к раздражению пользователей, поскольку элементы внезапно перемещаются, и это может вызвать случайные клики или потерю контекста.

Механизм работы CLS

CLS рассчитывается как произведение двух коэффициентов:

  1. Impact Fraction (доля воздействия) — отношение площади экрана, на которой произошёл сдвиг, к общей площади видимой части страницы.
  2. Distance Fraction (доля смещения) — относительное смещение элемента по вертикали или горизонтали в процентах от размера видимой области.

Формула CLS выглядит следующим образом:

CLS = Σ (Impact Fraction × Distance Fraction)

Каждое отдельное смещение элементов страницы в момент загрузки или интерактивности суммируется в единый показатель CLS.

Примеры элементов, вызывающих высокий CLS

  • Изображения без заданных размеров (width и height).
  • Динамически загружаемые рекламные блоки или виджеты.
  • Шрифты, которые изменяют размер текста после загрузки (FOIT/FOUT).
  • Асинхронные вставки DOM-элементов, которые сдвигают уже отрендеренный контент.

Как Lighthouse измеряет CLS

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

  1. Инициализируется виртуальный браузер с заданным размером экрана.
  2. Загружается страница, фиксируется начальная визуальная сцена.
  3. Отслеживаются все изменения положения элементов, которые видны пользователю.
  4. Вычисляется CLS для всех изменений за время жизненного цикла загрузки страницы.

Результат CLS выводится в виде числа:

  • 0 — 0.1: отличный показатель
  • 0.1 — 0.25: допустимый
  • >0.25: плохой показатель, требующий оптимизации

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

1. Фиксированные размеры мультимедиа Любые изображения, видео и графические блоки должны иметь заранее определённые размеры в CSS или атрибутах HTML (width и height). Это позволяет браузеру зарезервировать место под элемент до его полной загрузки.

Описание

2. Адаптивные контейнеры Если контент адаптируется под ширину экрана, рекомендуется использовать соотношение сторон (aspect-ratio) или CSS-свойства min-height, чтобы минимизировать сдвиги при изменении размеров.

.video-container {
  aspect-ratio: 16 / 9;
}

3. Предварительное резервирование под динамический контент Рекламные блоки, баннеры или виджеты должны иметь фиксированные рамки. Использование min-height и placeholder снижает влияние асинхронных вставок DOM.

.ad-slot {
  min-height: 250px;
}

4. Оптимизация шрифтов Использование font-display: optional или swap позволяет тексту сразу отображаться в резервном шрифте, избегая смещения при подгрузке основного шрифта.

@font-face {
  font-family: 'CustomFont';
  src: url('customfont.woff2') format('woff2');
  font-display: swap;
}

5. Контроль анимаций и переходов Анимации не должны изменять размеры или позиции элементов в ключевых областях видимого контента. Лучше применять transform и opacity вместо layout-сдвигов.

Практический пример анализа CLS в Lighthouse

  1. Запуск Lighthouse через Chrome DevTools (Ctrl+Shift+I → вкладка Lighthouse).
  2. Выбор категории Performance и включение метрик Core Web Vitals.
  3. Нажатие Generate report и получение подробного отчёта с CLS.

В отчёте отображается:

  • Текущие значения CLS
  • Визуализация смещений на странице
  • Конкретные элементы, вызывающие наибольшие сдвиги

Эти данные позволяют точно определить проблемные блоки и приоритеты для оптимизации.

Взаимосвязь CLS с другими метриками Web Vitals

  • Largest Contentful Paint (LCP): показывает, когда основной контент стал видимым, но не гарантирует стабильность его расположения.
  • First Input Delay (FID): измеряет интерактивность, CLS же оценивает визуальную стабильность.

Высокий CLS может негативно влиять на общее восприятие страницы, даже если LCP и FID в норме.

Оглавление