Автор оригинала: Todd Gardner.
Совокупная макет сдвига, иногда известна как Jank , это измерение того, сколько элементов перемещается из-за позднего оказанного контента. Вы можете думать об этом как об измерении Макет нестабильности Отказ Это стало распространенной проблемой для многих веб-сайтов из-за сторонних скриптов и управления тегами.
Нестабильность макета
Современные веб-приложения сложны. JavaScript визуализирует DOM, скрипты третьих сторон добавляются как конфеты, а слишком много поваров находятся на кухне, рендеринг контента DOM асинхронно (Ad Networks, Test Test Test ETC). Эта сложность и асинхронная нагрузка несут ответственность за серьезную проблему: Макет нестабильности Отказ
Нестабильность макета происходит, когда элементы DOM смещаются из-за динамически отображаемого контента. Вот пример любого, кто когда-либо использовал мобильную сеть, может относиться:
Рендеринг рекламы перед важным веб-действием.
Элементы DOM сдвигаются в ответ на новую рендеринг контента, и для пользователя затрудняет выполнение действий. В этом примере это особенно прозвучано, но любое количество смещений макета плохо для пользовательского опыта. Как мы можем определить, являются ли сайты, которые мы строим страдаем от нестабильности макета?
Макет нестабильности измерения API
Люди на веб-инкубаторной группе сообщества (WICG) предложили API, чтобы помочь измерить нестабильность макета (Также называется «Смещение макета»). Это только поддерживается в браузерах на основе миганий На данный момент, такой как Chrome, Edge и Opera, но это довольно просто для использования. Цель состоит в том, чтобы обеспечить количественный способ измерять смещение макета последовательно.
Давайте попробуем API на примере выше, где реклама впрыснет. Первое, что нужно сделать, это создать PerformanceObserver объект. Тогда нам нужно рассказать о том, что вроде записей мы хотим смотреть. Обратите внимание, что мы также передаем это Буферизованный: правда Опция, которая будет включать все записи, которые произошли до того, как мы провели наш код.
Обратите внимание, что мы используем PerformanceObserver класс вместо объект производительности Отказ Сегодня Performance.GetentRies () не включает Layoutshift Вход.
Этот код дает следующую консольную вывод для нашего придуманного рекламного примера:
Два записей производительности Layoutshift.
Мы видим, что были два сдвига макета, каждый из которых соответствует новой рекламе, который появляется. Обратите особое внимание на ценность имущество. Это «оценка», описывающая величину сдвига макета. Чем выше оценка, тем больше болтает сдвиг. Оценка – это сочетание ударная фракция и расстояние доля Отказ Два значения умножаются вместе, чтобы вычислить значение Смех макета Вход. Wicg Документ API находится в деталях, как рассчитывается счет Отказ Достаточно сказать, мы хотим, чтобы наши оценки низкими!
Давайте обрабатым тяжелые вещи. Мониторинг ваших реальных веб-жизненных веществ, таких как совокупная смена макета с Запросить метрики Отказ
Совокупное сдвиг макета
Поскольку браузер оказывает веб-страницу и контент рендурирует асинхронно, может быть много сдвигов макета. В приведенном выше примере было два сдвига, поскольку реклама появилась, но на многих сайтах есть полдюжина или более сдвигов макета до того, как страница загружена. Чтобы последовательно поговорить о неустойчивости макета, нам нужно суммировать эти макеты сдвиги на поступление на единую метрику. Эта метрика называется Кумулятивный макет Shift Отказ
Google создал полезную страницу, описывающую Кумулятивная смена макета (CLS) И что это значит. CLS – один из трех крупных “Web Vitals” Этот Google рекомендует измерить, чтобы ваши пользователи были хорошим опытом. Мы думаем, что, вероятно, что Google будет ранжировать результаты поиска, основанные на этих оценках, поэтому важно понять, как выполняют наши сайты.
Согласно Google, ваши CLS должны быть ниже 0,1, чтобы считаться «хорошим». Что-нибудь выше, и вы двигаетесь слишком много контента асинхронно.
Совокупные рекомендации порогового отключения макета от Google.
Измерение CL с JavaScript
Мы можем улучшить наш фрагмент кода несколько способов измерения кумулятивной смены макета. Вы можете подумать, что мы можем просто добавить ценность Из каждой смены макета Shift и вызовите его в день, но это не совсем так просто. Не все сдвиги макета плохие или неожиданные. Если пользователь нажимает кнопку или ссылку, разумно ожидать, что макет изменится в некотором роде. Мы не хотим включить Ожидается Макет сдвигов в нашем расчете, только Неожиданный Отказ
Для этого мы можем использовать другое свойство в записи Shift Layout: Adrecentinput Отказ Это свойство будет правдой, если Сдвиг макета, вероятно, вызвана введением пользователя Отказ Давайте обновим наш фрагмент, чтобы исключить любые сдвиги макета, которые пришли с недавнего ввода пользователя, а затем суммируют оставшиеся элементы, чтобы получить конечный счет CLS для сайта:
new PerformanceObserver(entryList => {
var entries = entryList.getEntries() || [];
var cls = 0;
entries.forEach(e => {
if (!e.hadRecentInput) { // omit entries likely caused by user input
cls += e.value;
}
});
console.log(`Cumulative Layout Shift: ${cls}`);
}).observe({ type: "layout-shift", buffered: true })
Простые Js для измерения CLS сайта
Теперь, когда мы все вместе поставили все вместе, давайте посмотрим на баллы CLS для некоторых популярных веб-сайтов при нагрузке в Chrome devtools с включенным включенным эмуляцией мобильного устройства.
- Google.com:
0. - YouTube.com:
0,049. - Cnn.com:
0.2898. - Chase.com:
1.7163.
Ни один из этих результатов не удивительно удивительно. Два худших исполнителя оба имеют тяжелые сайты с большим количеством содержимого отображения JavaScript (и в случае CNN, безвозмездной суммы сторонних поставщиков AD). Google с другой стороны гордится на производительности, и было бы лицемерным, если они не преуспели со своими собственными важными метриками.
Ограничения забивания CLS
Оценка CLS для сайта несколько не детерминирована. В тех случаях, когда многие асинхронные ресурсы загружаются и оказываются, CLS будет изменяться в зависимости от времени прибытия и выполнения этих активов. Пользователи с более медленными интернет-соединениями или компьютерами, вероятно, будут испытывать более высокие CL, так как будет больше изменений макета, необходимых для размещения Async Resources. (Браузер может пакетные сдвиги накладки между кадрами анимации, если ресурсы все присутствуют одновременно)
Кроме того, оценка CLS сильно зависит от размера ViewStort. CLS часто будет выше для мобильных пользователей, потому что их окна просмотра меньше, а любое движение больше в процентах. Имеет ли это иметь смысл во всех случаях, спорят – если у пользователя есть проблемы с нажатием кнопки или ссылки из-за рендеринга Async DOM, они будут раздражены ли это на рабочий стол или мобильный.
Хотя CLS является несовершенной метрикой, он все еще является ценным сигналом для пользовательского опыта вашего сайта. Пользователи, которые не могут прочитать контент или кнопку нажать кнопки, потому что страница продолжает двигаться вокруг, будет раздражена.