Rozwijanie wskaźnika CLS

plany ulepszenia wskaźnika CLS, aby był bardziej sprawiedliwy dla stron o długim czasie działania;

Annie Sullivan
Annie Sullivan
Hongbo Song
Hongbo Song

Opublikowano: 7 kwietnia 2021 r.

My (zespół ds. danych o szybkości w Chrome) przedstawiliśmy niedawno wstępne wyniki badań dotyczących opcji ulepszenia danych CLS w przypadku stron otwartych przez długi czas. Otrzymaliśmy wiele przydatnych opinii. Po przeprowadzeniu szeroko zakrojonej analizy wprowadziliśmy planowaną zmianę danych: maksymalne okno sesji z przerwą 1 sekundy, z góry ograniczoną do 5 sekund.

Czytaj dalej, aby dowiedzieć się więcej.

Na jakiej podstawie ocenialiśmy dostępne opcje?

Przeanalizowaliśmy wszystkie opinie otrzymane od społeczności deweloperów i uwzględniliśmy je.

W Chrome wdrożyliśmy też najpopularniejsze opcje i przeprowadziliśmy dużą analizę danych na podstawie milionów stron internetowych. Sprawdziliśmy, jakie typy witryn każda z opcji poprawiła i jak wypadały poszczególne opcje, ze szczególnym uwzględnieniem witryn, które zostały ocenione inaczej przez różne opcje. Ogólnie stwierdziliśmy, że:

  • Wszystkie opcje zmniejszały zależność między czasem spędzonym na stronie a wynikiem przesunięcia układu.
  • Brak opcji spowodował, że wynik żadnej strony nie uległ pogorszeniu. Nie należy się więc obawiać, że ta zmiana pogorszy wyniki witryny.

Punkty decyzyjne

Dlaczego okno sesji?

W wcześniejszym poście omówiliśmy kilka różnych strategii okna, które umożliwiają grupowanie przesunięć układu przy jednoczesnym zapewnieniu, że wynik nie będzie rosnąć bez ograniczeń. Większość opinii od deweloperów dotyczyła strategii okna sesji, ponieważ pozwala ona na najbardziej intuicyjne grupowanie zmian układu.

Oto przykład okna sesji:

Przykład okna sesji.

W tym przykładzie w trakcie przeglądania strony przez użytkownika występuje wiele przesunięć układu. Każda z nich jest oznaczona niebieskim paskiem. Jak widać, niebieskie paski mają różne wysokości, czyli wynik poszczególnych przesunięć układu. Okno sesji rozpoczyna się od pierwszego przesunięcia układu i rozszerza się do momentu, w którym nie ma już przesunięć układu. Gdy nastąpi kolejna zmiana układu, rozpocznie się nowe okno sesji. Ponieważ występują 3 przerwy bez przesunięć układu, w przykładzie występują 3 okna sesji. Podobnie jak w przypadku bieżącej definicji CLS, wyniki poszczególnych przesunięć są sumowane, więc wynik każdego okna jest sumą jego poszczególnych przesunięć układu.

Na podstawie wstępnych badań wybraliśmy 1-sekundową przerwę między oknami sesji, która dobrze się sprawdziła w naszej analizie na dużą skalę. W przypadku przykładu powyżej „Przerwa w sesji” wynosi 1 sekundę.

Dlaczego maksymalny czas trwania sesji?

W ramach wstępnych badań zredukowaliśmy strategie podsumowywania do 2 opcji:

  • Średni wynik wszystkich okien sesji w przypadku bardzo długich okien sesji (nieograniczonych okien z 5-sekundowymi przerwami).
  • Maksymalny wynik wszystkich okien sesji dla krótszych okresów (ograniczony do 5 sekund, z 1-sekundową przerwą).

Po wstępnych badaniach dodaliśmy do Chrome każdą miarę, aby przeprowadzić analizę na dużą skalę obejmującą miliony adresów URL. W ramach tej analizy na dużą skalę znaleźliśmy wiele adresów URL z wzorcem zmiany układu, takim jak ten:

Przykład niewielkiego przesunięcia układu cofającego średnią

W prawym dolnym rogu widać, że w oknie sesji 2 wystąpił tylko jeden niewielki przesunięcie układu, co spowodowało bardzo niską ocenę. Oznacza to, że średnia ocena jest dość niska. Co jednak, jeśli deweloper naprawi drobną zmianę układu? Wtedy wynik jest obliczany tylko na podstawie okna sesji 1, co oznacza, że wynik strony prawie się podwaja. Byłoby to bardzo zagmatwane i zniechęcające programistów do poprawienia przesunięć układu, by przekonać się, że wynik pogorszył się. Usunięcie tego niewielkiego przesunięcia układu jest oczywiście nieco wygodniejsze dla użytkownika, więc nie powinno obniżyć wyniku.

Z powodu tego problemu z średnią postanowiliśmy wprowadzić mniejsze, ograniczone maksymalne okna. W tym przykładzie okno sesji 2 zostanie zignorowane, a w raportach uwzględniona zostanie tylko suma zmian układu w oknie sesji 1.

Dlaczego 5 sekund?

Sprawdziliśmy różne rozmiary okien i stwierdziliśmy 2 rzeczy:

  • W przypadku krótkich okien wczytywanie stron i opóźnione reakcje na interakcje użytkownika mogą powodować zmiany układu w kilku oknach i poprawiać wynik. Chcieliśmy, żeby okno było wystarczająco duże, żeby nie uwzględniać korków.
  • Niektóre strony są ciągłym strumieniem niewielkich przesunięć układu. Może to być na przykład strona z wynikami sportowymi, która zmienia się z każdą aktualizacją. Te zmiany są irytujące, ale z czasem nie są coraz bardziej irytujące. Chcieliśmy więc zadbać o to, by okno było ograniczone do tego typu przesunięć układu.

Mając to na uwadze, porównując różne rozmiary okien na wielu stronach internetowych, doszliśmy do wniosku, że 5 sekund to dobry limit rozmiaru okna.

Jak to wpłynie na wynik CLS mojej strony?

Ta aktualizacja ogranicza CLS strony, więc żadna strona nie będzie miała gorszego wyniku.

Na podstawie naszej analizy 55% źródeł nie zauważy żadnych zmian w CLS w 75. percentylu. Dzieje się tak, ponieważ strony te nie mają obecnie żadnych zmian układu lub zmiany te są już ograniczone do jednego okna sesji.

Po tej zmianie pozostałe źródła będą miały lepsze wyniki na poziomie 75. percentyla. Większość witryn odnotuje tylko niewielką poprawę, ale około 3% z nich zmieni ocenę z „wymagającej poprawy” lub „słabej jakości” na „dobrą”. Strony te często korzystają z nieograniczonego przewijania lub mają wiele wolno aktualizowanych elementów interfejsu, jak opisano w poprzednim wpisie.

Jak mogę to wypróbować?

Wkrótce zaktualizujemy nasze narzędzia, aby używać nowej definicji danych. Do tego czasu możesz wypróbować zaktualizowaną wersję CLS w dowolnej witrynie, korzystając z przykładowych implementacji JavaScriptu lub odgałęzienia rozszerzenia Podstawowe wskaźniki internetowe.

Dziękujemy wszystkim, którzy poświęcili czas na przeczytanie poprzedniego posta i przesłanie opinii.