Эта страница переведена с помощью Cloud Translation API.

Совокупное изменение макета (CLS)

Milica Mihajlija

Philip Walton

Browser Support

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

Внезапное изменение макета заставляет пользователя подтвердить крупный заказ, который он намеревался отменить.

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

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

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

Метрика «Совокупный сдвиг макета» (CLS) помогает решить эту проблему, измеряя, как часто она возникает у реальных пользователей.

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

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

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

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

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

Пример окон сеанса. Синие полосы обозначают баллы каждого отдельного изменения макета.

Что такое хороший показатель CLS?

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

Хорошие значения CLS составляют 0,1 или меньше, плохие значения превышают 0,25, а все, что находится между ними, требует улучшения. — Хорошие значения CLS составляют 0,1 или меньше. Плохие значения больше 0,25.

Дополнительные сведения об исследованиях и методологии, лежащих в основе этой рекомендации, см. в разделе Определение пороговых значений показателей Core Web Vitals .

Изменения макета в деталях

Сдвиги макета определяются API-интерфейсом нестабильности макета , который сообщает о записях layout-shift каждый раз, когда элемент, видимый в области просмотра, меняет свою начальную позицию (например, верхнюю и левую позиции в режиме записи по умолчанию) между двумя кадрами. Такие элементы считаются нестабильными элементами .

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

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

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

layout shift score = impact fraction * distance fraction

Ударная фракция

Доля воздействия измеряет, насколько нестабильные элементы влияют на область просмотра между двумя кадрами.

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

Пример ударной доли с одним нестабильным элементом — Если элемент меняет положение, его предыдущая и текущая позиции влияют на его долю воздействия.

На предыдущем изображении есть элемент, который занимает половину области просмотра в одном кадре. Затем в следующем кадре элемент смещается вниз на 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 x 0.14 = 0.07 .

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

Пример смещения макета со стабильными и _нестабильными элементами_ и обрезкой области просмотра — По мере того, как в этом отсортированном списке появляется больше имен, существующие имена перемещаются, чтобы сохранить алфавитный порядок.

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

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

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

Стрелки обозначают расстояния, на которые нестабильные элементы переместились со своих исходных позиций. Элемент «Зебра», представленный синей стрелкой, сместился больше всего, примерно на 30 % высоты области просмотра. Это делает долю расстояния в этом примере 0.3 .

Оценка смещения макета составляет 0.60 x 0.3 = 0.18 .

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

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

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

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

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

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

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

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

Обязательно соблюдайте настройки браузера prefers-reduced-motion , так как некоторые посетители сайта могут испытывать неприятные последствия или проблемы с вниманием из-за анимации.

Свойство transform CSS позволяет анимировать элементы, не вызывая сдвигов макета:

Вместо изменения свойств height и width используйте transform: scale() .
Чтобы перемещать элементы, избегайте изменения свойств top , right , bottom или left и вместо этого используйте transform: translate() .

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

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

Полевые инструменты

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

Измерение изменений макета в JavaScript

Чтобы измерить изменения макета в JavaScript, вы используете Layout Instability API .

В следующем примере показано, как создать PerformanceObserver для регистрации записей layout-shift в консоли:

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('Layout shift:', entry);
  }
}).observe({type: 'layout-shift', buffered: true});

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

Чтобы измерить CLS в JavaScript, вам необходимо сгруппировать эти неожиданные записи layout-shift в сеансы и вычислить максимальное значение сеанса. Вы можете обратиться к исходному коду библиотеки JavaScript web vitals , который содержит эталонную реализацию расчета CLS.

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

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

Если страница загружается в фоновом режиме или находится в фоновом режиме до того, как браузер отрисовывает какой-либо контент, она не должна сообщать никаких значений CLS.
Если страница восстанавливается из обратного/прямого кэша , ее значение CLS должно быть сброшено до нуля, поскольку пользователи воспринимают это как отдельное посещение страницы.
API не сообщает записи layout-shift для изменений, которые происходят внутри iframe, но метрика делает это, поскольку они являются частью взаимодействия пользователя со страницей. Это может проявляться как разница между CrUX и RUM . Чтобы правильно измерить CLS, вам следует их учитывать. Подкадры могут использовать API для передачи своих записей layout-shift родительскому кадру для агрегирования .

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

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

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

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

import {onCLS} from 'web-vitals';

// Measure and log CLS in all situations
// where it needs to be reported.
onCLS(console.log);

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

Дополнительные рекомендации по выявлению изменений в компоновке на местах и использованию лабораторных данных для их оптимизации см. в нашем руководстве по оптимизации CLS .

Дополнительные ресурсы

Рекомендации Google Publisher Tag по минимизации смещения макета
Понимание совокупного изменения макета , Энни Салливан и Стив Кобес на #PerfMatters (2020)

Журнал изменений

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

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

Если у вас есть отзывы об этих показателях, вы можете оставить их в группе Google web-vitals-feedback .

Milica Mihajlija

Philip Walton

Browser Support

Source

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

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

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

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

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

Пример окон сеанса. Синие полосы обозначают баллы каждого отдельного изменения макета.

Что такое хороший показатель CLS?

Изменения макета в деталях

Сдвиги макета определяются с помощью Layout Instability API , который сообщает записи layout-shift каждый раз, когда элемент, видимый в области просмотра, меняет свою начальную позицию (например, верхнюю и левую позиции в режиме записи по умолчанию) между двумя кадрами. Такие элементы считаются нестабильными элементами .

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

layout shift score = impact fraction * distance fraction

Ударная фракция

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

Доля расстояния

Примеры

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

Оценка смещения макета составляет 0.5 x 0.14 = 0.07 .

Оценка смещения макета составляет 0.60 x 0.3 = 0.18 .

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

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

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

Свойство transform CSS позволяет анимировать элементы, не вызывая сдвигов макета:

Вместо изменения свойств height и width используйте transform: scale() .
Чтобы перемещать элементы, избегайте изменения свойств top , right , bottom или left и вместо этого используйте transform: translate() .

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

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

Полевые инструменты

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

Измерение изменений макета в JavaScript

Чтобы измерить изменения макета в JavaScript, вы используете Layout Instability API .

В следующем примере показано, как создать PerformanceObserver для регистрации записей layout-shift в консоли:

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('Layout shift:', entry);
  }
}).observe({type: 'layout-shift', buffered: true});

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

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

Если страница загружается в фоновом режиме или находится в фоновом режиме до того, как браузер отрисовывает какой-либо контент, она не должна сообщать никаких значений CLS.
Если страница восстанавливается из обратного/прямого кэша , ее значение CLS должно быть сброшено до нуля, поскольку пользователи воспринимают это как отдельное посещение страницы.
API не сообщает записи layout-shift для изменений, которые происходят внутри iframe, но метрика делает это, поскольку они являются частью взаимодействия пользователя со страницей. Это может проявляться как разница между CrUX и RUM . Чтобы правильно измерить CLS, вам следует их учитывать. Подкадры могут использовать API для передачи своих записей layout-shift родительскому кадру для агрегирования .

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

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

import {onCLS} from 'web-vitals';

// Measure and log CLS in all situations
// where it needs to be reported.
onCLS(console.log);

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

Дополнительные ресурсы

Рекомендации Google Publisher Tag по минимизации смещения макета
Понимание совокупного изменения макета , Энни Салливан и Стив Кобес на #PerfMatters (2020)

Журнал изменений

Если у вас есть отзывы об этих показателях, вы можете оставить их в группе Google web-vitals-feedback .

Milica Mihajlija

Philip Walton

Browser Support

Source

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

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

CLS — это показатель максимального количества изменений макета для каждого неожиданного изменения макета, которое происходит в течение всего жизненного цикла страницы.

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

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

Самый большой взрыв - это окно сеанса с максимальной кумулятивной оценкой всех сдвигов макета в этом окне.

Пример окон. Синие столбцы представляют баллы каждого отдельного сдвига макета.

Что такое хороший счет CLS?

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

Хорошие значения CLS составляют 0,1 или менее, плохие значения больше 0,25, и все, что между потребностями улучшением — Хорошие значения CLS составляют 0,1 или меньше. Плохие значения больше 0,25.

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

Макет сдвигается подробно

Сдвиги макета определяются API нестабильности макета , в котором сообщается о записях layout-shift в любое время, когда элемент, который виден в точке зрения, меняет свою начальную позицию (например, его верхняя и левая позиция в режиме записи по умолчанию) между двумя кадрами. Такие элементы считаются нестабильными элементами .

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

Оценка смены макета

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

layout shift score = impact fraction * distance fraction

Воздействие фракции

Фракция воздействия измеряет, как нестабильные элементы влияют на площадь просмотра между двумя кадрами.

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

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

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

Доля дистанции

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

Пример расстояния с одним нестабильным элементом — Доля расстояния измеряет, как далеко через просмотр был отображен элемент.

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

Таким образом, в этом примере фракция удара составляет 0.75 , а доля расстояния составляет 0.25 , поэтому показатель сдвига макета составляет 0.75 * 0.25 = 0.1875 .

Примеры

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

Пример сдвига макета с несколькими стабильными и _unstable elements_ — Добавление кнопки в нижнюю часть серой коробки нажимает зеленую коробку вниз и частично вне просмотра.

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

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

Однако начальная позиция зеленой коробки действительно меняется, но, поскольку она была частично перемещена из видового порта, невидимая область не рассматривается при расчете фракции воздействия . Союз видимых областей для зеленой коробки в обеих рамках (иллюстрируемый красным пунктирным прямоугольником) совпадает с площадью зеленой коробки в первом кадре - 50% видового порта. Фракция удара составляет 0.5 .

Доля расстояния проиллюстрирована фиолетовой стрелкой. Зеленая коробка сдвинулась примерно на 14% от видовой точки, так что доля расстояния составляет 0.14 .

Оценка сдвига макета составляет 0.5 x 0.14 = 0.07 .

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

Пример сдвига макета со стабильными и _unstable elements_ и обрезки просмотра — Поскольку в этом списке появляются все больше имен, существующие имена перемещаются, чтобы сохранить алфавитный порядок.

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

Первый элемент в списке («кошка») не меняет свою начальную позицию между кадрами, поэтому он стабилен. Точно так же новые элементы, добавленные в список, ранее не были в DOM, поэтому их начальные позиции тоже не меняются. Но предметы с надписью «собака», «лошадь» и «зебра» все меняют свои начальные позиции, что делает их нестабильными элементами .

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

Стрелки представляют собой расстояния, которые нестабильные элементы переместились с их стартовых позиций. Элемент «зебра», представленный синей стрелкой, переместился больше всего на 30% от высоты видового порта. Это делает долю расстояния в этом примере 0.3 .

Оценка сдвига макета составляет 0.60 x 0.3 = 0.18 .

Ожидаемые и неожиданные сдвиги макета

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

Инициированные пользователем сдвиги макета

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

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

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

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

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

Обязательно уважайте prefers-reduced-motion , так как некоторые посетители сайта могут испытывать неприятные последствия или проблемы внимания от анимации.

CSS transform Property позволяет оживить элементы без запуска сдвигов макета:

Вместо изменения height и свойств width используйте transform: scale() .
Чтобы перемещать элементы вокруг, избегать изменения top , right , bottom или left свойства и вместо этого используйте transform: translate() .

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

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

Полевые инструменты

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

Измерения смены макета в JavaScript

Чтобы измерить сдвиги макета в JavaScript, вы используете API нестабильности макета .

В следующем примере показано, как создать PerformanceObserver для регистрации записей layout-shift на консоли:

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('Layout shift:', entry);
  }
}).observe({type: 'layout-shift', buffered: true});

Измерить CLS в JavaScript

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

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

Если страница загружена в фоновом режиме или если она на фоне до рисования браузера какого -либо контента, то она не должна сообщать о каком -либо значении CLS.
Если страница восстановлена из кэша обратного/вперед , ее значение CLS должно быть сброшено до нуля, поскольку пользователи воспринимают это как отдельное посещение страницы.
API не сообщает о записях layout-shift для смен, которые происходят в IFRAMES, но метрика делает, поскольку они являются частью пользовательского опыта страницы. Это может показать разницу между сутью и ромом . Чтобы правильно измерить CLS, вы должны рассмотреть их. Субфрамы могут использовать API, чтобы сообщить о своих записях layout-shift в родительский кадр для агрегации .

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

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

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

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

import {onCLS} from 'web-vitals';

// Measure and log CLS in all situations
// where it needs to be reported.
onCLS(console.log);

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

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

Дополнительные ресурсы

Руководство издательства Google Publisher по минимизации смены макета
Понимание совокупного сдвига макета Энни Салливан и Стива Кобеса на #PerfMatters (2020)

Журнал изменений

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

Чтобы помочь вам управлять этим, все изменения в реализации или определении этих метрик будут всплыть в этом измене .

Если у вас есть отзывы о этих метриках, вы можете предоставить его в Google Google Google Google Web-Vitals .