Что такое CLS? Накопительный сдвиг макета (CLS)

Что такое ЦЛС?

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

Происходит всякий раз, когда положение видимого элемента изменяется от одного визуализированного кадра к другому.Сдвиг макета .

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

Самая большая полоса — это окно сеанса с наибольшим совокупным баллом всех смен макета в пределах окна.

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

Что представляет собой хороший результат CLS?

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

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

Подробности смены макета

Смещение макета наAPI нестабильности макетаОпределено, пока начальная позиция элемента видна в визуальной области (например, элемент находится в позиции по умолчаниюРежим письмаAPI сообщает, что если верхнее и левое положения смена макета Вступление. Такой элемент считаетсяНестабильные элементы.

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

Оценка смещения макета

Браузер вычисляетОценка смещения макетаЕсли посмотреть на размер области просмотра и область просмотра между двумя визуализированными кадрамиНестабильные элементыПоказатель сдвига компоновки представляет собой произведение двух показателей этого сдвига:Оценка воздействияиОценка расстояния(Оба определения даны ниже).
Оценка смещения макета = Оценка удара * Оценка расстояния

Оценка воздействия

Оценка воздействияИзмерениеНестабильные элементыВлияние на видимую область между кадрами.

Предыдущий кадриВсе текущие кадрыНестабильные элементыВидимая область (часть общей видимой области) — это текущий кадр.Оценка воздействия.

На изображении выше элемент занимает половину видимой области в одном кадре. Затем, в следующем кадре, элемент перемещается вниз на 25% высоты видимой области. Красный пунктирный прямоугольник представляет набор видимой области элемента в двух кадрах. В этом примере набор занимает 75% общей видимой области, поэтому егоОценка воздействиясоставляет 0,75.

Оценка расстояния

Другая часть расчета показателя смещения макета измеряет, насколько сместился нестабильный элемент относительно области просмотра.Оценка расстоянияОтносится к любомуНестабильные элементыМаксимальное расстояние перемещения (по горизонтали или вертикали) в кадре, деленное на наибольший размер области просмотра (ширину или высоту, в зависимости от того, что больше).

В приведенном выше примере наибольший размер области просмотра — это высота, а смещение нестабильного элемента составляет 25% от высоты области просмотра, поэтомуОценка расстояниясоставляет 0,25.

Итак, в этом примере,Оценка воздействиясоставляет 0,75,Оценка расстояниясоставляет 0,25, поэтомуОценка смещения макетасоставляет 0,75 * 0,25 = 0,1875.

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

Следующий пример иллюстрирует влияние добавления контента к существующему элементу на оценку сдвига макета:

Кнопка «Нажми меня!» прикреплена к нижней части серого поля с черным текстом, сдвигая вниз зеленое поле с белым текстом (и частично выходя за пределы видимой области).

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

Кнопка «Нажми меня!» изначально не была в DOM, поэтому ее начальное положение не изменилось.

Однако начальное положение зеленого поля действительно меняется, но поскольку часть зеленого поля уже находится за пределами видимой области,Оценка воздействияНевидимая область не учитывается. Видимые области зелёных квадратов в двух кадрах (обозначенные красным пунктирным прямоугольником) совпадают с площадью зелёного квадрата в первом кадре, которая составляет 50% видимой области.Оценка воздействиясоставляет 0,5.

Оценка расстоянияОбозначено фиолетовой стрелкой. Расстояние, на которое смещается зелёный квадрат вниз, составляет примерно 14% видимой области, поэтомуОценка расстоянияЭто 0,14.

Доля смещения компоновки составляет 0,5 х 0,14 = 0,07.

Последний пример иллюстрирует несколькоНестабильные элементыСитуация:

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

Начальная позиция первого элемента в списке («Кошка») не изменилась между двумя кадрами, поэтому она стабильна. Аналогично, новые элементы, добавленные в список, ранее не были в DOM, поэтому начальные позиции этих элементов не изменились. Однако начальные позиции элементов «Собака», «Лошадь» и «Зебра» изменились, поэтому все они…Нестабильные элементы.

Аналогично, красный пунктирный прямоугольник представляет эти триНестабильные элементыПлощадь двух кадров до и после в этом примере составляет около 38% видимой области (Оценка воздействиясоставляет 0,38).

Стрелки указываютНестабильные элементыРасстояние смещения относительно исходного положения. Элемент «Зебра», представленный синей стрелкой, имеет наибольшее расстояние смещения, составляющее около 30% высоты видимой области.Оценка расстояниясоставляет 0,3.

Доля смещения компоновки составляет 0,38 х 0,3 = 0,1172.

Ожидаемые и неожиданные изменения макета

Сдвиг макета — это не всегда плохо. На самом деле, многие динамические веб-приложения часто меняют начальное положение элементов страницы.

Изменение макета, инициированное пользователем

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

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

Изменения макета, которые происходят в течение 500 миллисекунд после ввода данных пользователем, отмечены знакомhadRecentInputОтметьте, чтобы исключить эти смещения из расчетов.

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

Анимации и переходы

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

CSS трансформироватьЭто свойство позволяет анимировать элементы, не вызывая смены макета:

• Вместо этого используйте transform: scale() и настройте свойства высоты и ширины.
• Чтобы заставить элемент перемещаться, используйте transform: translate() и настройте свойства верха, правого, нижнего или левого края.

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

CLS может бытьлабораторияИзмерить илидействительныйИзмерено и может быть использовано в следующих инструментах:

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

Инструменты измерения

• Отчет об опыте использования Chrome
• Инструмент измерения скорости загрузки веб-страниц PageSpeed Insights
• Search Console (отчет Core Web Metrics)
• библиотека JavaScript web-vitals

Лабораторные инструменты

• Инструменты разработчика Chrome
• маяк
• Инструмент для тестирования производительности веб-сайтов WebPageTest

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

Для измерения CLS в JavaScript вы можете использоватьAPI нестабильности макетаВ следующем примере показано, как создатьPerformanceObserverдля отслеживания неожиданных записей о смене макета, группировки записей по сеансам, регистрации максимального значения сеанса и обновления записи при изменении максимального значения сеанса.
пусть clsValue = 0;
пусть clsEntries = [];
пусть sessionValue = 0;
пусть sessionEntries = [];
новый PerformanceObserver((entryList) => {
для (константная запись entryList.getEntries()) {
// Учитывать только смещения макета без флага последнего пользовательского ввода.
если (!entry.hadRecentInput) {
const firstSessionEntry = sessionEntries[0];
const lastSessionEntry = sessionEntries[sessionEntries.length - 1];
// Если время между записью и предыдущей меньше 1 секунды и
// Если время между первой записью и сеансом меньше 5 секунд, то запись
// Включить в текущий сеанс. В противном случае начать новый сеанс.
если (sessionValue &&
entry.startTime - lastSessionEntry.startTime < 1000 &&
entry.startTime - firstSessionEntry.startTime < 5000) {
sessionValue += entry.value;
sessionEntries.push(запись);
} еще {
sessionValue = запись.значение;
sessionEntries = [запись];
}
// Если текущее значение сеанса больше текущего значения CLS,
// Затем обновите CLS и связанные с ним записи.
если (sessionValue > clsValue) {
clsValue = sessionValue;
clsEntries = sessionEntries;
// Записать обновленное значение (и его записи) в консоль.
console.log('CLS:', clsValue, clsEntries)
}
}
}
}).observe({type: 'layout-shift', buffered: true});

Внимание: Приведённый выше код иллюстрирует базовый метод расчёта и записи CLS. Однако для точного измерения CLS необходимоОтчет об опыте использования Chrome (CrUX) измерение более сложное. Подробности см. ниже:

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

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

Различия между метриками и API

• Если страница загружается в фоновом режиме или перемещается в фоновый режим до того, как браузер отобразит какой-либо контент, то страница не должна сообщать никаких значений CLS.
• Если страница проходитКэш туда и обратноЕсли страница восстановлена, значение CLS для этой страницы должно быть сброшено до нуля, поскольку для пользователя это другой опыт посещения страницы.
• API не сообщает данные о смещении макета на основе смещений внутри iframe, но для корректного измерения CLS необходимо учитывать эти смещения. Дочерние фреймы могут использовать API для передачи этих данных о смещении макета родительскому фрейму.полимеризация.

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

• Пользователи могуточеньОставлять вкладку открытой на длительное время (дни, недели, месяцы). Фактически, пользователь может вообще не закрыть вкладку.
• В мобильных ОС браузеры, как правило, не выполняют обратные вызовы выгрузки страницы для фоновых вкладок, поскольку это затруднило бы сообщение «конечного» значения.

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

Вместо того, чтобы запоминать все эти случаи и решать их самостоятельно, разработчики могут использоватьбиблиотека JavaScript web-vitalsДля измерения CLS библиотека обрабатывает все вышеперечисленные случаи самостоятельно:

импорт {getCLS} из 'web-vitals';
// Во всех случаях, когда необходимо сообщать CLS
// Измерьте и запишите результат.
получитьCLS(консоль.log);

Полный пример измерения CLS в JavaScript можно найти в исходном коде (getCLS).
В некоторых случаях (например, в кроссдоменных iframe) LCP невозможно измерить в JavaScript. Подробнее см. в библиотеке web-vitals.ограничениечасть.

Как улучшить CLS

Для большинства сайтов вы можете избежать неожиданных изменений макета, следуя нескольким рекомендациям:

• Всегда включайте атрибуты размера в элементы изображений и видео, используяКонтейнер соотношения сторон CSSТакой подход гарантирует, что браузер выделяет правильное количество места в документе при загрузке изображения. Обратите внимание, что вы также можете использоватьполитика функций неразмерных носителейТакое поведение применяется в браузерах, поддерживающих политики функций.
• Никогда не вставляйте контент поверх существующего, если только это не вызвано взаимодействием пользователя. Это гарантирует предсказуемость любых изменений макета.
• Отдавайте предпочтение анимации переходов, а не анимации свойств, которая вызывает смену макета. Цель анимированных переходов — обеспечить контекстную преемственность между состояниями.

Для получения дополнительной информации о том, как улучшить CLS, см.Оптимизация CLSиОтладка смещений макета.