CLS

Определение простыми словами

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

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

Сравнение

Кейсы использования

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

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

Технические детали

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

// Пример сбора данных CLS с использованием Performance Observer
let clsValue = 0;
const observer = new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    if (!entry.hadRecentInput) {
      clsValue += entry.value;
    }
  }
});
observer.observe({ type: 'layout-shift', buffered: true });

// clsValue будет содержать текущий суммарный CLS для страницы

Для изучения метрики CLS можно использовать инструменты Google Lighthouse и веб-консоли Chrome DevTools, а также интегрировать мониторинг через FCP и LCP для комплексной оценки производительности.

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