Что такое CLS – Cumulative Layout Shift?

Совокупный сдвиг макета (CLS) – это относительно новый показатель, который поможет вам понять впечатление пользователя от сайта. Помните такое, вы читаете сайт и вдруг, внезапно текст сдвигается вниз и вы теряете место, где читали. Это очень раздражает.

Что такое CLS – Cumulative Layout Shift?
Что такое CLS – Cumulative Layout Shift?

Знакомо?

Значение сдвига макета - это процент от смещенной области просмотра. Так что в этом примере, возможно, 10% области просмотра сместилось. Если позднее произойдет еще одно смещение на 2%, CLS страницы составит 12%.

Что такое CLS – Cumulative Layout Shift?
Что такое CLS – Cumulative Layout Shift?

Как измерить CLS?

Помните, что замерять скорость полной загрузки сайта надо из России для сайта с аудиторией РФ. Ниже форма проверки скорости загрузки сайта из России:

web.dev/layout--instability/api - это отличный ресурс для того, чтобы узнать больше о API и о том, как его использовать для измерения CLS. Вот их пример кода для вычисления CLS:

// Stores the current layout shift score for the page.
let cumulativeLayoutShiftScore = 0;

// Detects new layout shift occurrences and updates the
// `cumulativeLayoutShiftScore` variable.
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    cumulativeLayoutShiftScore += entry.value;
  }
});

observer.observe({entryTypes: ['layoutShift']});

// Sends the final score to your analytics back end once
// the page's lifecycle state becomes hidden.
document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') {
    // Force any pending records to be dispatched.
    observer.takeRecords();

    // Send the final score to your analytics back end
    // (assumes `sendToAnalytics` is defined elsewhere).
    sendToAnalytics({cumulativeLayoutShiftScore});
  }
});


В настоящий момент тип layoutShift доступен только при явном включении API. Если вы используете Chrome 76 или новее, вы можете запустить его через командную строку:

--enable-blink-features=LayoutInstabilityAPI

Измерение CLS в WebPageTest

WebPageTest (WPT) является популярным инструментом для контролируемых измерений веб-статистики производительности. Давайте посмотрим, как мы можем настроить запись CLS.

Выбор правильного браузера

Что такое CLS – Cumulative Layout Shift?
Что такое CLS – Cumulative Layout Shift?

WPT поддерживает множество браузеров из разных стран мира. Чтобы этот тест сработал, нам нужна более новая версия Chrome, поддерживающая функцию LayoutInstabilityAPI Blink. Поскольку стандартная версия хрома WPT на данный момент находится в 75-й версии, мы выберем Chrome Canary (версия 77), которая доступна в Dulles, VA test location.

Установка флага командной строки

На вкладке расширенных настроек "Chromium" есть поле для настройки параметров командной строки.

Измерение CLS в качестве индивидуальной метрики

Что такое CLS – Cumulative Layout Shift
Что такое CLS – Cumulative Layout Shift

Пользовательские метрики - это вставки JavaScript, которые выполняются по мере завершения тестирования веб-страницы. Синтаксис заключается в том, чтобы дать ему имя в формате [name] в первой строке, за которым следует сценарий с одним возвращаемым значением. Вот пользовательская метрика для измерения CLS:

[CumulativeLayoutShift]
return new Promise(resolve => {
  var CLS = 0;
  new PerformanceObserver(list => {
    list.getEntries().forEach(entry => {
      if (entry.hadRecentInput) return;
      CLS += entry.value;
    });
    resolve(CLS);
  }).observe({type: "layout-shift", buffered: true});
});

Примечание: Опытные пользователи Astute WPT, читающие эту заметку, возразят против этого сценария, потому что он возвращает значение, а пользовательские метрики поддерживают только синхронный код. Больше нет! WPT теперь поддерживает пользовательские метрики async!

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

Отлично! Вы готовы ввести адрес URL страницы, которую хотите протестировать и запустить тест. Результаты вы найдете на странице Custom Metrics (Пользовательские метрики).

Что такое CLS – Cumulative Layout Shift
Что такое CLS – Cumulative Layout Shift

Для этой страницы CLS равен 0,3. Это страница, которую создал тестировщик, большая часть пользовательского интерфейса которой динамически отображается с помощью скрипта, поэтому ~30% проверяется.

Что такое CLS – Cumulative Layout Shift
Что такое CLS – Cumulative Layout Shift

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

Подведем итоги

CLS все еще очень новая метрика, поэтому если вы начнете ее использовать, пожалуйста, оставьте отзыв о репозитории Layout Instability API GitHub.

Проверьте скорость загрузки вашего сайта из России прямо сейчас:

Статья составлена по материалам dev.to и web.dev.