Plany poprawy wskaźnika CLS, aby były bardziej sprawiedliwe w przypadku stron od dawna.
Niedawno zespół Chrome Speed Metrics przeprowadził wstępne badania nad możliwościami dostosowania wskaźnika CLS do stron otwartych od dawna. Otrzymaliśmy wiele bardzo przydatnych opinii i po przeprowadzeniu analizy na dużą skalę zakończyliśmy zmianę, którą planujemy wprowadzić w tym rodzaju danych: maksymalne okno sesji z 1-sekundową luką, ograniczone do 5 sekund.
Szczegóły podano poniżej.
Jak ocenialiśmy te opcje?
Przeanalizowaliśmy wszystkie opinie otrzymane od społeczności deweloperów i wzięliśmy je pod uwagę.
Zaimplementowaliśmy też najpopularniejsze opcje w Chrome i przeprowadziliśmy na dużą skalę analizę danych dotyczących milionów stron internetowych. Sprawdziliśmy, jakiego typu witryny polepszyły się w przypadku każdej z opcji, a także porównaliśmy poszczególne opcje. Sprawdzaliśmy zwłaszcza witryny, których oceny różniły się w zależności od opcji. Ogólnie stwierdziliśmy, że:
- Wybranie opcji Wszystkie zmniejszyło korelację między czasem spędzonym na stronie a wynikiem przesunięcia układu.
- Żadna z tych opcji nie spowodowała gorszego wyniku dowolnej strony. Nie musisz się więc martwić, że ta zmiana pogorszy wyniki witryny.
Punkty decyzji
Dlaczego okno sesji?
W wcześniejszym poście omówiliśmy kilka różnych strategii dotyczących okien, które pozwalają na grupowanie przesunięć układu przy jednoczesnym zapewnieniu, że wynik nie będzie rosnąć bez ograniczeń. Opinie, które otrzymaliśmy od deweloperów, w dużym stopniu preferują strategię dotyczącą okna sesji, ponieważ najbardziej intuicyjnie grupuje ona układ przesuwania się.
Oto przykład, jak sprawdzić okresy sesji:
W powyższym przykładzie wiele zmian układu zachodzi z upływem czasu, gdy użytkownik wyświetla stronę. Każdy z nich ma niebieski pasek. Powyżej widać, że niebieskie paski mają różne wysokości. Reprezentują one wynik każdego pojedynczego przesunięcia układu. Okno sesji rozpoczyna się od pierwszego przesunięcia układu i rozwija się, aż pojawi się luka, bez przesunięcia układu. Gdy nastąpi kolejna zmiana układu, rozpocznie się nowe okno sesji. Istnieją 3 luki bez żadnych przesunięcia układu, więc w przykładzie są 3 okna sesji. Podobnie jak w przypadku bieżącej definicji CLS, wyniki każdego przesunięcia są sumowane, dzięki czemu wynik każdego okna jest sumą pojedynczych przesunięć układu.
Na podstawie wstępnych badań wybraliśmy 1-sekundową przerwę między oknami sesji. Ta luka sprawdziła się w naszych analizach na dużą skalę. „Przerwa w sesji” widoczna w przykładzie powyżej to 1 sekunda.
Dlaczego obowiązuje maksymalny okres sesji?
Podczas wstępnych badań zawęziliśmy strategie podsumowywania do 2 opcji:
- Średni wynik wszystkich okien sesji dla bardzo dużych okien sesji (nieograniczonych okien z 5-sekundowymi przerwami).
- Maksymalny wynik wszystkich okien sesji dla mniejszych okien sesji (ograniczony do 5 sekund z 1-sekundowymi przerwami między nimi).
Po wstępnych badaniach dodaliśmy do Chrome wszystkie dane, aby przeprowadzić analizę na dużą skalę milionów adresów URL. Podczas analizy na dużą skalę znaleźliśmy wiele adresów URL z wzorcami przesunięcia układu, podobnymi do tych:
W prawym dolnym rogu widać tylko niewielkie przesunięcie układu w oknie sesji 2, co dało bardzo niski wynik. Oznacza to, że średni wynik jest dość niski. A co, jeśli deweloper naprawi to niewielkie przesunięcie układu? Następnie wynik jest obliczany tylko w oknie sesji 1, co oznacza, że wynik strony prawie się podwaja. Byłoby to bardzo mylące i zniechęcić deweloperów do poprawiania przesunięć układu, żeby tylko zauważyć, że wynik się pogorszył. Usunięcie tego niewielkiego przesunięcia układu jest oczywiście nieco lepsze z punktu widzenia wygody użytkowników, więc nie powinno pogorszyć wyniku.
Z powodu tego problemu ze średnią zdecydowaliśmy się wprowadzić mniejsze, ograniczone i maksymalne okna. W przykładzie powyżej okno sesji 2 zostanie zignorowane i zgłoszona będzie tylko suma przesunięć układu w oknie sesji 1.
Dlaczego 5 sekund?
Po sprawdzeniu różnych rozmiarów okien stwierdziliśmy, że:
- W przypadku krótkich okien wolniejsze wczytywanie strony i wolniejsze reagowanie na interakcje użytkownika mogą przerwać przesunięcie układu do wielu okien i poprawić wynik. Chcieliśmy, aby okno było na tyle duże, żeby nie chciało liczyć na korki.
- Niektóre strony zawierają ciągły strumień drobnych przesunięć układu. Może to być na przykład strona z wynikami sportowymi, która zmienia się nieco wraz z każdą aktualizacją wyniku Takie zmiany są irytujące, ale z czasem nie stają się coraz bardziej irytujące. Chcieliśmy więc mieć pewność, że okno będzie ograniczone w przypadku tego typu przesunięć układu.
Mając to na uwadze, porównując różne rozmiary okien na wielu rzeczywistych stronach internetowych, doszliśmy do wniosku, że 5 sekund to dobry limit rozmiaru okna.
Jak wpłynie to na wynik CLS mojej strony?
Ta aktualizacja ogranicza CLS strony, dlatego żadna strona nie będzie uzyskiwać gorszego wyniku.
Jak wynika z naszej analizy, 55% źródeł nie odnotuje żadnej zmiany CLS w 75. percentylu. Wynika to z faktu, że strony nie mają obecnie żadnych przesunięć układu albo są ograniczone do okna jednej sesji.
Po tej zmianie pozostałe źródła uzyskują lepsze wyniki w 75. percentylu. W przypadku większości użytkowników widoczna będzie jedynie lekka poprawa, ale u około 3% uzyskanych oceny poprawią się – zamiast stanu „wymagana poprawa” lub „Słabej” aż do „dobrej”. Strony te zawierają zwykle nieskończone przewijanie lub wiele powolnych aktualizacji interfejsu, co opisaliśmy we wcześniejszym poście.
Jak mogę je wypróbować?
Wkrótce zaktualizujemy nasze narzędzia, aby korzystały z nowej definicji wskaźnika. Do tego czasu możesz wypróbować na dowolnej stronie zaktualizowaną wersję CLS, korzystając z przykładowych implementacji JavaScript lub rozwidlenia rozszerzenia Web Vitals.
Dziękujemy wszystkim, którzy poświęcili czas na przeczytanie poprzedniego posta i podzielenie się opinią.