Dowiedz się więcej o naszych planach dotyczących udoskonalania danych skumulowane przesunięcie układu i prześlij nam swoją opinię.
skumulowane przesunięcie układu (CLS) to wartość, która określa stabilność wizualną strony internetowej. Te dane są nazywane skumulowanym przesunięciem układu, ponieważ wynik każdego pojedynczego przesunięcia jest sumowany w całym okresie aktywności strony.
Choć wszystkie przesunięcia układu pogarszają wrażenia użytkowników, zwiększają się na stronach, które są otwarte dłużej. Dlatego zespół Chrome Speed Metrics postanowił poprawić wartość CLS, by była bardziej neutralna w stosunku do czasu spędzanego na stronie.
Ważne jest, aby dane koncentrowały się na wrażeniach użytkownika w całym cyklu życia strony, ponieważ zauważyliśmy, że użytkownicy często mają negatywne wrażenia po jej wczytaniu, podczas przewijania lub nawigacji po stronach. Słyszeliśmy jednak, że wpłynie to na strony długotrwałe – strony, które użytkownicy zazwyczaj otwierają od dawna. Istnieje kilka różnych typów stron, które zwykle pozostają otwarte na dłużej. Najczęściej są to aplikacje społecznościowe z przewijaniem nieskończonym lub jednostronicowym.
Wewnętrzna analiza długotrwałych stron z wysokim wynikiem CLS wykazała, że większość problemów wynika z tych wzorców:
- nieskończone przewijanie treści przesuwanych treści, gdy użytkownik przewija stronę;
- Moduły obsługi danych wejściowych, których aktualizacja interfejsu użytkownika zajmuje ponad 500 ms, bez użycia symboli zastępczych i wzorców szkieletowych.
Zachęcamy deweloperów do poprawy wrażeń użytkowników, ale pracujemy też nad poprawą tych danych i szukamy opinii na temat możliwych rozwiązań.
Jak możemy ocenić, czy nowy wskaźnik jest lepszy?
Zanim przejdziemy do projektowania danych, chcieliśmy się upewnić, że oceniamy nasze pomysły na szerokiej gamie rzeczywistych stron internetowych i przypadków użycia. Na początek opracowaliśmy małe badanie opinii użytkowników.
Najpierw nagraliśmy filmy i zapisy z Chrome przedstawiające 34 ścieżki użytkownika w różnych witrynach. Wybierając ścieżkę użytkownika, zależało nam na kilku kwestiach:
- Różne rodzaje witryn, takich jak witryny z wiadomościami lub sklepy.
- Zróżnicowane ścieżki użytkowników, takie jak początkowe wczytanie strony, przewijanie, nawigacja na jednej stronie w aplikacji i interakcje użytkowników.
- zróżnicowanie liczby i intensywności przesunięć układu poszczególnych witryn;
- Kilka negatywnych opinii na stronach poza przesunięciem układu.
Poprosiliśmy 41 współpracowników o obejrzenie 2 filmów jednocześnie i oceniliśmy, który z nich był lepszy pod względem zmiany układu. Na ich podstawie utworzyliśmy idealny porządek rankingowy witryn. Wyniki rankingu użytkowników potwierdziły nasze podejrzenia, że nasi współpracownicy, jak większość użytkowników, są naprawdę sfrustrowani przesunięciami układu po wczytaniu, szczególnie podczas przewijania i nawigacji po aplikacji na jednej stronie. Zauważyliśmy, że niektóre witryny zapewniają użytkownikom znacznie lepsze wrażenia podczas wykonywania tych czynności niż inne.
Ponieważ rejestrowaliśmy ślady Chrome wraz z filmami, mieliśmy wszystkie szczegóły dotyczące poszczególnych zmian układu na każdym etapie ścieżki użytkownika. Na podstawie tych informacji obliczyliśmy wartości danych dla każdej propozycji dla każdej ścieżki użytkownika. Dzięki temu mogliśmy dowiedzieć się, jak każdy wariant danych wpływał na ranking ścieżek użytkownika i jak różnił się on od idealnego rankingu.
Jakie propozycje danych przetestowaliśmy?
Strategie dotyczące okien
Strony często mają wiele układów, które są ze sobą połączone, ponieważ elementy mogą zmieniać się wielokrotnie w miarę napływu nowej treści. Z tego powodu wypróbowaliśmy techniki grupowania zmian. Aby to osiągnąć, zajęliśmy się 3 metodami tworzenia okien:
- Ruchome okna
- Okna przesuwne
- Okna sesji
W każdym z tych przykładów układ strony zmienia się o różną w miarę upływu czasu. Każdy niebieski pasek reprezentuje jedno przesunięcie układu, a długość przedstawia wynik tego przesunięcia. Ilustracje ilustrują, w jaki sposób różne strategie okienowania grupują zmiany układu w czasie.
Ruchome okna
Najprostszym sposobem jest po prostu podział strony na okna o równych rozmiarach. Są to tzw. ruchome okna. Powyżej widać, że czwarty słupek tak naprawdę powinien zostać zgrupowany w drugim oknie, ale ponieważ wszystkie okna mają stały rozmiar, to w pierwszym. Jeśli występują niewielkie różnice w czasie wczytywania strony lub interakcji użytkowników ze stroną, te same przesunięcia układu mogą spadać po różnych stronach granic nieruchomych okien.
Okna przesuwne
Podejściem, które pozwala zidentyfikować więcej możliwych grup o tej samej długości, jest ciągłe aktualizowanie potencjalnego okna w czasie. Na ilustracji powyżej widać jedno okno przesuwne w danym momencie, ale by utworzyć dane, możemy przyjrzeć się wszystkim oknom przesuwnym lub ich podzbiorom.
Okna sesji
Gdybyśmy chcieli skupić się na identyfikowaniu obszarów strony z nagłymi przesunięciami układu, moglibyśmy zaczynać każde okno od przesunięcia i rozwijać je, aż znajdziemy lukę o danym rozmiarze między przesunięciem układu. Ta metoda grupuje układ, który przesuwa się, i ignoruje większość elementów, które nie ulegają zmianie. Potencjalny problem polega na tym, że jeśli nie ma luk w przesunięciach układu, wartość oparta na oknach sesji może rosnąć bez ograniczeń, tak jak bieżący wskaźnik CLS. Próbowaliśmy więc również zrobić to z maksymalną wielkością okna.
Rozmiary okien
Dane mogą dawać bardzo różne wyniki w zależności od wielkości okien, więc wypróbowaliśmy kilka różnych rozmiarów okien:
- Każda zmiana w osobnym oknie (bez okien)
- 100 ms
- 300 ms
- 1 sekunda
- 5 sekund
Podsumowywanie
Próbowaliśmy podsumować różne okna na wiele sposobów.
Centyle
Sprawdziliśmy maksymalną wartość okna, 95 centyl, 75 centyl i medianę.
Średnia
przyjrzeliśmy się średniej wartości okna.
Budżety
Zastanawialiśmy się, czy istnieje minimalny wynik przesunięcia układu, którego użytkownicy nie zauważyliby, i mogliśmy policzyć w wyniku przesunięcia układu ponad „budżet”. W przypadku różnych potencjalnych wartości „budżetu” przyglądaliśmy się wartościom procentowym zmian budżetu i całkowitemu wynikowi przesunięcia względem budżetu.
Inne strategie
Przyjrzeliśmy się również wielu strategiom, które nie obejmowały okien, np. podzieleniu łącznego przesunięcia układu przez czas spędzony na stronie oraz średniej z N najgorszych pojedynczych przesunięć.
Wstępne wyniki
Przetestowaliśmy 145 różnych definicji danych na podstawie permutacji powyższych propozycji. W przypadku każdego rodzaju danych uporządkowaliśmy ścieżki użytkowników według ich wyniku, a następnie pozycjonowaliśmy dane według tego, jak bardzo zbliżyli się do idealnego rankingu.
Aby uzyskać wartość bazową, uporządkowaliśmy wszystkie witryny według aktualnego wskaźnika CLS. CLS zajęła 32. miejsce w porównaniu z 13 innymi strategiami, więc wynik był lepszy niż w przypadku większości kombinacji powyższych strategii. Aby wyniki były miarodajne, dodaliśmy też 3 losowe kolejność. Zgodnie z oczekiwaniami kolejność losowa okazała się gorsza niż każda testowana strategia.
Aby dowiedzieć się, czy nasze dane mogą być przesadzone, po naszej analizie nagraliśmy kilka nowych filmów i zapisów dotyczących przesunięcia układu, porównaliśmy je ręcznie i stwierdziliśmy, że rankingi wskaźników były bardzo podobne zarówno w przypadku nowego, jak i pierwotnego zbioru danych.
W rankingach wyróżniało się kilka różnych strategii.
Najlepsze strategie
Podczas ustalania pozycji strategii odkryliśmy, że na szczycie listy znajdują się 3 typy strategii. Każda z nich uzyskała mniej więcej taką samą skuteczność. Planujemy więc przeprowadzić dokładniejszą analizę każdego z nich. Chcielibyśmy też poznać opinie deweloperów, aby dowiedzieć się, czy istnieją inne czynniki, które poza wrażeniami użytkownika powinniśmy brać pod uwagę przy wyborze między nimi. (Poniżej dowiesz się, jak przesłać opinię).
Wysokie percentyle długich okien
W przypadku długich okien dobrze się sprawdzało kilka strategii:
- 1-sekundowe okna przesuwne
- Okna sesji są ograniczone do 5 sekund z 1-sekundową przerwą
- Okna sesji bez ograniczenia z 1-sekundową luką
Wszystkie te odpowiedzi są bardzo dobrze widoczne zarówno na 95. centylu, jak i na najwyższym poziomie.
Jednak w przypadku tak dużych okien martwiliśmy się o wykorzystanie 95. percentyla – często patrzyliśmy na zaledwie 4–6 okien, a przyjęcie 95. percentyla wymaga dużej interpolacji. Nie jest jasne, co robi interpolacja w odniesieniu do wartości wskaźnika. Wartość maksymalna jest znacznie czytelniejsza, więc postanowiliśmy przejść do sprawdzania wartości maksymalnej.
Średnia liczba okien sesji z długimi przerwami
Porównanie wyników wszystkich nieograniczonych okien sesji z 5-sekundowymi przerwami wyniosło naprawdę dobre wyniki. Ta strategia ma kilka interesujących cech:
- Jeśli między przesunięciami układu na stronie nie ma żadnych przerw, powstanie jedno długie okno sesji z dokładnie takim samym wynikiem jak bieżący CLS.
- Ten wskaźnik nie uwzględniał bezpośrednio czasu bezczynności, a nie zmian, jakie zaszły na stronie, a nie momentów, w których strona się nie przesuwała.
Wysokie percentyle krótkich okien
Maksymalny czas trwania okna przesuwanego 300 ms jest bardzo wysoko i na 95. centylu. Przy mniejszych oknach interpolacja centylowa jest mniejsza niż w przypadku okien większych, ale obawialiśmy się też o „powtarzanie” okien przesuwnych – jeśli zestaw przesunięć układu zachodzi w przypadku 2 klatek, pojawia się wiele okien 300 ms, które je zawierają. Wyznaczenie maksymalnej wartości jest znacznie łatwiejsze i łatwiejsze niż 95. percentyl. Postanowiliśmy więc zająć się sprawdzaniem maksymalnej liczby.
Strategie, które się nie sprawdziły
Strategie, które miały na celu przeanalizowanie „średniego” czasu spędzanego zarówno bez przesunięcia układu, jak i z przesunięciami układu, okazały się bardzo nieskuteczne. Żadne z mediany ani 75 percentyla podsumowania żadnej strategii związanej z oknaniem nie uzyskiwały dobrych wyników. Suma zmian układu też nie zmieniła się z upływem czasu.
Oceniliśmy kilka różnych „budżetów” pod kątem akceptowalnych zmian układu:
- Procent przesunięcia układu powyżej pewnego budżetu. Przy różnych budżetach wszystkie te reklamy miały niską pozycję w rankingu.
- Średnie przesunięcie układu powyżej pewnej nadmiarowej wartości. Większość zmian w tej strategii nie przyniosła oczekiwanych rezultatów, ale średnia nadwyżka w ciągu długiej sesji z dużą przerwą była prawie taka sama jak średnia z okresów sesji z długimi przerwami. Zdecydowaliśmy się pójść w przyszłości tylko na ten drugi sposób, ponieważ jest on prostszy.
Dalsze kroki
Analiza na większą skalę
Zaimplementowaliśmy w Chrome najważniejsze strategie wymienione powyżej, dzięki czemu mamy dane na temat rzeczywistego użytkowania w przypadku znacznie większej liczby witryn. Planujemy użyć podobnego podejścia do ustalania pozycji witryn w rankingu na podstawie wyników wskaźników, aby przeprowadzić analizę na większą skalę:
- Uporządkowanie witryn według CLS i każdej nowej propozycji danych.
- Które witryny są uporządkowane w różny sposób według CLS i każdej z nich? Czy podczas przeglądania tych witryn zauważamy coś nieoczekiwanego?
- Jakie są największe różnice między nowymi wskaźnikami? Czy któreś z tych różnic są wyróżnione jako zalety lub wady danego kandydata?
- Powtórz powyższą analizę, ale dzieląc dane na kategorie według czasu wczytywania strony. Czy odnotowujemy oczekiwaną poprawę w przypadku długotrwałych wczytywania stron z akceptowanym przesunięciem układu? Czy w przypadku stron krótkotrwałych pojawiają się nieoczekiwane wyniki?
Opinie na temat naszego podejścia
Chętnie poznamy opinie deweloperów stron internetowych na temat tych metod. Oto kilka kwestii, o których warto pamiętać, rozważając nowe rozwiązania:
Co się nie zmieni
Chcemy podkreślić, że nowe podejście do wielu rzeczy nie ulegnie zmianie:
- Żadne z naszych propozycji danych nie wpływają na sposób, w jaki wyniki przesunięcia układu obliczane są, a jedynie sposób, w jaki podsumowujemy wiele klatek. Oznacza to, że interfejs JavaScript API do obsługi przesunięć układu pozostanie bez zmian, a podstawowe zdarzenia w śladach Chrome używane przez narzędzia dla programistów również pozostaną bez zmian, więc dostosowywanie układu przesunięcia układu w takich narzędziach jak WebPageTest i Chrome DevTools będzie działać w taki sam sposób.
- Będziemy nadal dokładać starań, aby użytkownicy mogli łatwo wdrażać dane, m.in. w bibliotece Web-vitals, dokumentując je na web.dev i raportując je w naszym narzędziu dla programistów, takim jak Lighthouse.
kompromisy między danymi,
Jedna z najlepszych strategii podsumowuje okna przesunięcia układu jako średnią, a pozostałe podają wartość maksymalnego okna. W przypadku stron otwartych przez bardzo długi czas średnia będzie prawdopodobnie podawać bardziej reprezentatywną wartość, ale ogólnie łatwiej będzie deweloperom działać w jednym oknie – mogą zarejestrować, kiedy wystąpiło zdarzenie, jakie elementy się przesunęły itd. Chętnie poznamy Twoją opinię na temat tego, co jest ważniejsze dla deweloperów.
Czy okna przesuwne i sesje są dla Ciebie bardziej zrozumiałe? Czy te różnice są dla Ciebie ważne?
Jak wyrazić opinię
Możesz wypróbować nowe dane o przesunięciu układu w dowolnej witrynie, korzystając z naszych przykładowych implementacji JavaScript lub naszego rozwinięcia rozszerzenia dotyczącego podstawowych wskaźników internetowych.
Wyślij e-maila z opinią do naszej grupy dyskusyjnej Google web-vitals-feedback, podając w temacie tekst „[Wskaźniki przesunięcia układu]”. Chętnie poznamy Twoje zdanie.