Планируется улучшить показатель CLS, чтобы он был более справедливым для долгоживущих страниц.
Опубликовано: 7 апреля 2021 г.
Мы (команда Chrome Speed Metrics) недавно изложили наше первоначальное исследование вариантов сделать метрику CLS более справедливой для страниц, которые открыты в течение длительного времени . Мы получили много очень полезных отзывов и после завершения крупномасштабного анализа завершили изменение, которое планируем внести в этот показатель: максимальное окно сеанса с перерывом в 1 секунду, ограниченное 5 секундами .
Читайте подробности!
Как мы оценивали варианты?
Мы рассмотрели все отзывы, полученные от сообщества разработчиков, и учли их.
Мы также внедрили лучшие опции в Chrome и провели масштабный анализ показателей миллионов веб-страниц. Мы проверили, какие типы сайтов улучшил каждый вариант, и как эти варианты сравнивались, особенно изучая сайты, которые по разным параметрам оценивались по-разному. В целом мы обнаружили, что:
- Все варианты уменьшили корреляцию между временем, проведенным на странице, и показателем изменения макета.
- Ни один из вариантов не привел к худшему результату ни для одной страницы. Поэтому не стоит беспокоиться, что это изменение ухудшит оценки вашего сайта.
Точки принятия решения
Почему окно сеанса?
В нашей предыдущей статье мы рассмотрели несколько различных стратегий работы с окнами для группировки изменений макета, гарантируя при этом, что оценка не будет неограниченно расти. Отзывы, которые мы получили от разработчиков, в подавляющем большинстве отдали предпочтение стратегии окон сеансов, поскольку она наиболее интуитивно группирует изменения макета.
Чтобы просмотреть окна сеанса, вот пример:
В приведенном выше примере многие изменения макета происходят со временем, когда пользователь просматривает страницу. Каждый представлен синей полосой. Выше вы заметили, что синие полосы имеют разную высоту; они представляют собой оценку каждого отдельного изменения макета. Окно сеанса начинается с первого изменения макета и продолжает расширяться до тех пор, пока не останется пробел без изменений макета. При следующем изменении макета запускается новое окно сеанса. Поскольку есть три пробела без изменений макета, в примере есть три окна сеанса. Подобно текущему определению CLS, баллы каждого смещения суммируются, так что балл каждого окна представляет собой сумму его отдельных сдвигов макета.
Основываясь на первоначальном исследовании , мы выбрали промежуток в 1 секунду между окнами сеансов, и этот разрыв хорошо сработал в нашем крупномасштабном анализе. Таким образом, «Разрыв сеанса», показанный в приведенном выше примере, составляет 1 секунду.
Почему максимальное окно сеанса?
В нашем первоначальном исследовании мы сузили стратегии резюмирования до двух вариантов:
- Средняя оценка всех окон сеанса для очень больших окон сеанса (неограниченных окон с 5-секундными промежутками между ними).
- Максимальный балл всех окон сеанса для меньших окон сеанса (ограничение в 5 секунд с интервалом в 1 секунду между ними).
После первоначального исследования мы добавили каждую метрику в Chrome, чтобы иметь возможность провести масштабный анализ миллионов URL-адресов. В ходе крупномасштабного анализа мы обнаружили множество URL-адресов с такими шаблонами изменения макета:
В правом нижнем углу вы можете видеть только одно крошечное изменение макета в окне сеанса 2, что дает ему очень низкую оценку. Это означает, что средний балл довольно низкий. Но что, если разработчик исправит это крошечное смещение макета? Тогда оценка рассчитывается только для окна сеанса 1, что означает, что оценка страницы увеличивается почти вдвое . Было бы очень запутанно и обескураживающе для разработчиков, если бы они улучшили свои изменения в макете только для того, чтобы обнаружить, что результат стал хуже. И удаление этого небольшого изменения макета, очевидно, немного лучше для пользовательского опыта, поэтому оно не должно ухудшать оценку.
Из-за этой проблемы со средними значениями мы решили двигаться дальше с меньшими, ограниченными максимальными окнами. Таким образом, в приведенном выше примере окно сеанса 2 будет игнорироваться, и будет сообщаться только сумма сдвигов макета в окне сеанса 1.
Почему 5 секунд?
Мы оценили несколько размеров окон и обнаружили две вещи:
- Для коротких окон более медленная загрузка страниц и более медленная реакция на взаимодействие с пользователем могут привести к разбиению макета на несколько окон и повышению оценки. Мы хотели, чтобы окно было достаточно большим, чтобы оно не вознаграждало за замедление!
- Есть страницы с постоянным потоком небольших изменений макета. Например, страница спортивных результатов, которая немного меняется при каждом обновлении результатов. Эти сдвиги раздражают, но с течением времени они не становятся еще более раздражающими. Поэтому мы хотели гарантировать, что окно будет ограничено при таких изменениях макета.
Учитывая эти две вещи, сравнивая различные размеры окон на многих реальных веб-страницах, мы пришли к выводу, что 5 секунд будут хорошим ограничением размера окна.
Как это повлияет на оценку CLS моей страницы?
Поскольку это обновление ограничивает CLS страницы, в результате этого изменения ни одна страница не будет иметь худший рейтинг .
И согласно нашему анализу, 55% стран происхождения вообще не увидят изменений в CLS на 75-м процентиле . Это связано с тем, что на их страницах либо в настоящее время нет изменений макета, либо изменения, которые у них есть, уже ограничены одним окном сеанса.
Благодаря этому изменению остальные страны происхождения увидят улучшение показателей в 75-м процентиле. Большинство увидит лишь небольшое улучшение, но около 3% увидят, что их баллы улучшятся с рейтинга «нужно улучшить» или «плохо» до рейтинга «хорошо». На этих страницах, как правило, используются бесконечные скроллеры или много медленных обновлений пользовательского интерфейса, как описано в нашей предыдущей публикации .
Как я могу попробовать это?
Скоро мы обновим наши инструменты, чтобы использовать новое определение метрики! А до тех пор вы можете опробовать обновленную версию CLS на любом сайте, воспользовавшись примером реализации JavaScript или форком расширения Web Vitals .
Спасибо всем, кто нашел время прочитать предыдущий пост и оставить свой отзыв!