Новый способ измерения совокупного сдвига макета

Question

Google запустил новый способ измерения совокупного сдвига макета (CLS). Но почему-то я не могу понять новое определение из статей на web.dev и https://web.dev/evolving-cls/.

Может ли кто-нибудь помочь мне понять это простыми словами? или предложить какую-нибудь статью или видео?

Answer 1

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

Давайте возьмем пример страницы с бесконечной прокруткой (то есть страницы, которая загружает все больше и больше контента по мере прокрутки страницы - например, канал Twitter или канал Facebook) или одностраничное приложение (SPA).

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

Скажем, на странице с бесконечной прокруткой каждый новый элемент загружает картинку без width а также heightв HTML (что позволит браузеру разметить необходимое пространство перед загрузкой изображения). Таким образом, каждый новый вставленный блок будет добавлять на страницу небольшое количество CLS. Если вы останетесь на этой странице достаточно долго, вы в конечном итоге превысите лимит для «хорошего» CLS, и страница будет считаться плохо работающей, даже если каждая смена относительно небольшая.

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

Точно так же, если у вас есть SPA с 5 виртуальными страницами (например, приложение для оформления заказа), тогда каждый переход страницы может вводить некоторый CLS. Если бы вы закодировали его как 5 отдельных страниц, генерируемых на стороне сервера, вы бы сбрасывали бюджет CLS при каждом переходе. Кажется несправедливым наказывать вас только из-за того, что вы выбрали технологию. Разве это не так, если пользовательский опыт одинаков для обоих?

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

Итак, новое определение CLS гласит, что вместо того, чтобы весь CLS в целом использовал наихудший фрагмент CLS в пределах «окна» времени. Теперь этот фрагмент может все еще быть результатом нескольких элементов CLS (так что он по-прежнему является «совокупным», а не измеряет худший элемент CLS), но он ограничивает его.

Итак, если при загрузке страницы вы получаете CLS 0,05, 0,025 и 0,024, затем паузу, а затем гораздо позже еще один CLS 0,04, тогда у вас может быть два окна CLS: одно из 0,99 (0,05 + 0,025 + 0,024) и другое с CLS 0,04. . CLS будет считаться худшим из них (0,099), тогда как в старом мире он сообщался бы как общий (0,139). Это означает, что в новом определении вы просто остаетесь ниже предела 0,1 для «хорошо», тогда как в старом мире вы относились бы к категории «нуждается в улучшении».

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

Однако это означает, что вы могли скрывать некоторые CLS, о которых не знали. Продолжая приведенный выше пример, если вы исправите CLS загрузки страницы и уменьшите это значение с 0,99 до 0 и думаете, что у вас все в порядке, вы можете быть удивлены, увидев, что ваш CLS теперь отображается как 0,04 (следующее по величине окно). Это может привести к небольшому ощущению, что вы гоняетесь за собственным хвостом! Но в любом случае это было похоже на предыдущий, если вы сообщали о своем худшем элементе CLS, а затем оптимизировали его, а затем находили следующий элемент и продолжали.

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