Dowiedz się więcej o naszych planach dotyczących ulepszenia danych dotyczących zbiorczego przesunięcia układu i przekaż nam opinię.
Skumulowane przesunięcie układu (CLS) to wskaźnik, który mierzy stabilność wizualną strony internetowej. Dane te nazywamy skumulowanym przesunięciem układu, ponieważ wynik każdego pojedynczego przesunięcia jest sumowany w całym okresie działania strony.
Chociaż wszystkie zmiany układu są niewygodne dla użytkowników, to na stronach, które są otwarte dłużej, sumują się one bardziej. Dlatego zespół ds. danych o szybkości Chrome postanowił ulepszyć wskaźnik CLS, aby był bardziej neutralny wobec czasu spędzonego na stronie.
Ważne jest, aby dane skupiały się na wrażeniach użytkownika przez cały okres istnienia strony, ponieważ zauważyliśmy, że użytkownicy często odczuwają niezadowolenie po wczytaniu stron, podczas przewijania lub przechodzenia między stronami. Dowiedzieliśmy się jednak, jak wpłynie to na długotrwałe strony, czyli takie, które użytkownicy zwykle otwierają od dawna. Istnieje kilka typów stron, które zwykle pozostają otwarte dłużej. Do najpopularniejszych należą aplikacje mediów społecznościowych z nieskończonym przewijaniem i aplikacje jednostronicowe.
Wewnętrzna analiza długotrwałych stron z wysokimi wynikami CLS wykazała, że większość problemów powodowały te wzorce:
- Przewijanie nieskończone z przesuwającymi się treściami, gdy użytkownik przewija stronę.
- Obsługa elementów sterujących trwająca dłużej niż 500 ms w reakcji na interakcję użytkownika bez użycia żadnych elementów zastępczych ani szablonów.
Zachęcamy deweloperów do ulepszania wrażeń użytkowników, ale też pracujemy nad ulepszeniem tej metryki i szukamy opinii na temat możliwych podejść.
Jak mielibyśmy zdecydować, czy nowe dane są lepsze?
Zanim przejdziemy do projektowania wskaźników, chcieliśmy się upewnić, że przeanalizowaliśmy nasze pomysły na różnych rzeczywistych stronach internetowych i ich zastosowaniach. Na początek przeprowadziliśmy niewielką ankietę wśród użytkowników.
Najpierw nagraliśmy filmy i ślady Chrome dotyczące 34 ścieżek użytkownika w różnych witrynach. Wybierając ścieżki użytkownika, kierowaliśmy się kilkoma celami:
- różne typy witryn, np. informacyjne i zakupowe;
- Zróżnicowane ścieżki użytkownika, np. początkowe wczytanie strony, przewijanie, nawigacja na jednej stronie aplikacji i interakcje z użytkownikiem.
- różnorodność liczby i intensywności poszczególnych przesunięć układu w witrynach;
- Niewiele negatywnych doświadczeń w witrynach poza zmianami układu.
Poprosimy 41 naszych współpracowników o oglądanie 2 filmów jednocześnie i o ocena, który z nich lepiej wykorzystuje zmiany układu. Na ich podstawie utworzyliśmy wyidealizowany porządek rankingowy witryn. Wyniki rankingu użytkowników potwierdziły nasze podejrzenia, że nasi współpracownicy, podobnie jak większość użytkowników, są naprawdę frustrowani zmianami układu strony po wczytaniu strony, zwłaszcza podczas przewijania strony i nawigacji w aplikacji na jednej stronie. Zauważyliśmy, że niektóre strony zapewniają użytkownikom znacznie lepsze wrażenia podczas tych działań niż inne.
Ponieważ gromadziliśmy ślady w Chrome razem z filmami, znaliśmy wszystkie szczegóły poszczególnych przesunięć układu w każdej ścieżce użytkownika. Użyliśmy ich do obliczenia wartości danych dla każdego pomysłu w przypadku każdej ścieżki użytkownika. Pozwoliło nam to sprawdzić, jak wyglądał ranking ścieżek użytkownika w przypadku poszczególnych wariantów danych i czym różni się od idealnej pozycji w rankingu.
Jakie pomysły dotyczące danych testowaliśmy?
Strategie dotyczące okresów obserwacji
Często na stronach występuje wiele przesunięć układu, które są blisko siebie, ponieważ poszczególne elementy mogą zmieniać się wielokrotnie w miarę pojawiania się nowych treści. W ten sposób wypróbowaliśmy techniki grupowania zmian. W tym celu opracowaliśmy 3 podejścia do tworzenia okien:
- Okna przesuwne
- Okna przesuwne
- Okna sesji
W każdym z tych przykładów układ strony zmienia się w różnym stopniu w ciągu czasu. Każdy niebieski pasek reprezentuje jedno przesunięcie układu, a jego długość to wynik tego przesunięcia. Obrazy pokazują, w jaki sposób różne strategie dotyczące okien grupują zmiany układu w czasie.
Okna przesuwne
Najprostszym podejściem jest podzielenie strony na okna o równej wielkości. Nazywamy je oknami przesuwnymi. Jak widać powyżej, czwarty pasek wygląda na należący do drugiego okna, ale ponieważ okna mają stałą wielkość, znajduje się on w pierwszym oknie. Jeśli występują niewielkie różnice w czasie wczytywania lub interakcji użytkownika ze stroną, te same przesunięcia układu mogą znajdować się po różnych stronach granic okna porządkującego.
Okna przesuwne
Podejście, które pozwala nam rozpoznać więcej możliwych grup o tej samej długości, to ciągłe aktualizowanie potencjalnego okna z upływem czasu. Na powyższej ilustracji widać 1 okno przesuwane w danym momencie, ale aby utworzyć dane, moglibyśmy wziąć pod uwagę wszystkie możliwe okna przesuwane lub ich podzbiór.
Okna sesji
Jeśli chcielibyśmy skupić się na identyfikowaniu obszarów strony z intensywnymi zmianami układu, moglibyśmy rozpocząć każde okno w miejscu zmiany układu i rozszerzać je, aż do momentu, gdy pojawi się luka o określonym rozmiarze między zmianami układu. To podejście łączy ze sobą zmiany układu i ignoruje większość niewynikających z nich zmian wrażeń użytkowników. Jednym z potencjalnych problemów jest to, że jeśli nie ma żadnych przerw w przesunięciach układu, dane oparte na oknach sesji mogą nie mieć ograniczeń, tak jak w przypadku obecnych danych CLS. Spróbowaliśmy też ustawić maksymalny rozmiar okna.
Rozmiary okien
Dane mogą przynosić bardzo różne wyniki w zależności od rzeczywistego rozmiaru okien, dlatego 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
Wypróbowaliśmy wiele sposobów podsumowywania różnych okresów.
Percentyle
Sprawdziliśmy maksymalną wartość w oknie, a także 95., 75. i medianę.
Średnia
Sprawdziliśmy średnią wartość okna.
Budżety
Zastanawialiśmy się, czy istnieje minimalna wartość oceny przesunięcia układu, której użytkownicy nie zauważą, i czy moglibyśmy liczyć przesunięcia układu powyżej tego „budżetu” w wycenie. W przypadku różnych potencjalnych wartości „budżetu” sprawdziliśmy odsetek zmian w stosunku do budżetu oraz łączną wartość zmian w stosunku do budżetu.
Inne strategie
Sprawdziliśmy też wiele strategii, które nie wykorzystywały okien, np. całkowitego przesunięcia układu podzielonego przez czas spędzony na stronie i średniej z najgorszych N przesunięć.
Wstępne wyniki
Przetestowaliśmy 145 różnych definicji danych na podstawie permutacji powyższych propozycji. W przypadku każdego wskaźnika uszeregowaliśmy wszystkie ścieżki użytkownika według ich wyniku, a potem uszeregowaliśmy wskaźniki według tego, jak bardzo zbliżone były do idealnego rankingu.
Aby uzyskać punkt odniesienia, uszeregowaliśmy też wszystkie witryny według ich bieżącego wyniku CLS. CLS zajął 32. miejsce, dzieląc je z 13 innymi strategiami, co oznacza, że był lepszy od większości ich kombinacji. Aby mieć pewność, że wyniki są wiarygodne, dodaliśmy też 3 losowe kolejności. Zgodnie z oczekiwaniami losowe kolejności okazały się gorsze niż wszystkie testowane strategie.
Aby sprawdzić, czy możemy nie pasować do zbioru danych, po przeprowadzeniu analizy nagraliśmy nowe filmy i logi dotyczące zmian układu, ręcznie uszeregowaliśmy je i zauważyliśmy, że rankingi wskaźników w nowym i pierwotnym zbiorze danych są bardzo podobne.
W rankingach wyróżniło się kilka różnych strategii.
Najlepsze strategie
Po sklasyfikowaniu strategii okazało się, że 3 typy strategii znalazły się na szczycie listy. Każdy z nich miał mniej więcej taką samą skuteczność, dlatego planujemy przeprowadzić dokładniejszą analizę wszystkich 3 wersji. Chcielibyśmy też poznać opinie deweloperów, aby dowiedzieć się, czy istnieją inne czynniki niż komfort użytkownika, które powinniśmy wziąć pod uwagę przy podejmowaniu decyzji. (jak przesyłać opinie, dowiesz się poniżej).
Wysokie wartości percentylów długich okien
Kilka strategii wyświetlania okien sprawdzało się dobrze w przypadku długich okien:
- 1-sekundowe okna przesuwne
- Okna sesji są ograniczone do 5 sekund z 1-sekundową przerwą
- Okna sesji nie są ograniczone z 1-sekundową przerwą
Wszystkie te modele uzyskały bardzo dobre wyniki zarówno w 95. procentylu, jak i w maksymalizacji.
W przypadku tak dużych rozmiarów okien obawialiśmy się jednak korzystania z 95. percentyla. Często analizowaliśmy tylko 4–6 okienek, a uzyskiwanie 95. percentyla z tych danych wymagałoby dużej interpolacji. Nie jest jasne, jak działa interpolacja w odniesieniu do wartości wskaźnika. Wartość maksymalna jest znacznie bardziej czytelna, dlatego zdecydowaliśmy się na sprawdzanie wartości maksymalnej.
Średnia okien sesji z długimi przerwami
Średnia ocen ze wszystkich sesji bez limitu z 5-sekundowymi przerwami między nimi dała bardzo dobre wyniki. Ta strategia ma kilka ciekawych cech:
- Jeśli na stronie nie ma przerw między zmianami układu, kończy się to jednym długim oknem sesji z identycznym wynikiem jak w przypadku obecnego CLS.
- Te dane nie uwzględniały bezpośrednio czasu bezczynności. Analizowały tylko zmiany, które nastąpiły na stronie, a nie momenty, w których strona nie była przekształcana.
Wysokie wartości procentowe w krótkich okresach
Maksymalna długość okna przesuwanego wynoszącego 300 ms to 95 centyl, czyli bardzo wysoko. W przypadku krótszego okna występuje mniej interpolacji wartości procentylowych niż w przypadku większych okien, ale musieliśmy też wziąć pod uwagę „powtarzające się” okna przesuwające się w czasie – jeśli w ciągu 2 ramek występuje zmiana układu, obejmuje ona kilka okien 300 ms. Użycie maksymalnej wartości jest znacznie prostsze i bardziej przejrzyste niż użycie wartości z 95. procentem. Postanowiliśmy więc ponownie sprawdzić maksymalną wartość.
Strategie, które się nie sprawdziły
Strategie, które obejmowały „średnie” czasy spędzane zarówno bez przesunięć układu, jak i z ich zmianami, radziły sobie bardzo słabo. Żadne z mediany ani 75-percentylowych podsumowań dowolnej strategii dotyczącej okien nie ustalono dobrej pozycji witryny. Nie zmieniła się też suma przesunięć układu na przestrzeni czasu.
Sprawdziliśmy kilka różnych „budżetów” pod kątem akceptowalnych zmian układu:
- Procent przesunięć układu powyżej określonego budżetu. W przypadku różnych budżetów wszystkie te metody miały niską pozycję w rankingu.
- Średnia zmiana układu powyżej pewnej wartości. Większość wariantów tej strategii nie przyniosła oczekiwanych rezultatów, ale średnie przekroczenie długości sesji z dużymi przerwami było prawie tak samo skuteczne jak średnia długość sesji z długimi przerwami. Postanowiliśmy wdrożyć tylko tę drugą opcję, ponieważ jest ona prostsza.
Dalsze kroki
Analiza na większą skalę
Zaimplementowaliśmy w Chrome najważniejsze strategie wymienione powyżej, dzięki czemu możemy uzyskać dane o rzeczywistym korzystaniu ze znacznie większej liczby witryn. Planujemy stosować podobne podejście do rankingu witryn na podstawie ich wyników w danych, aby przeprowadzać analizy na większą skalę:
- Uporządkuj wszystkie witryny według CLS i każdego nowego kandydata na dane.
- Które witryny mają najbardziej zróżnicowane wyniki w przypadku CLS i każdego kandydata? Czy patrząc na te strony, zauważymy coś nieoczekiwanego?
- Jakie są największe różnice między nowymi kandydatami na dane? Czy któreś z tych różnic są wyraźnymi zaletami lub wadami konkretnego kandydata?
- Powtórz powyższą analizę, ale pogrupuj dane według czasu potrzebnego na wczytanie każdej strony. Czy widzimy oczekiwaną poprawę w przypadku długotrwałego wczytywania stron z akceptowalnym przesunięciem układu? Czy w przypadku stron o krótkim czasie trwania występują nieoczekiwane wyniki?
Opinie na temat naszego podejścia
Chętnie poznamy opinie programistów na temat tych metod. Oto kilka kwestii, które warto mieć na uwadze, rozważając nowe podejścia:
Co się nie zmieni
Pamiętaj, że wiele rzeczy nie ulegnie zmianie:
- Żaden z naszych pomysłów dotyczących danych nie zmienia sposobu obliczania wyników przesunięcia układu dla poszczególnych klatek, tylko sposób, w jaki podsumowujemy wiele klatek. Oznacza to, że interfejs JavaScript API do przesunięć układu pozostanie bez zmian, a podstawowe zdarzenia w śladach Chrome, których używają narzędzia dla programistów, również pozostaną takie same. W wyniku tego prostokąty przesunięć układu w narzędziach takich jak WebPageTest i Narzędzia deweloperskie w Chrome będą działać w taki sam sposób.
- Będziemy nadal ciężko pracować nad tym, aby wskaźniki były łatwe do przyjęcia przez deweloperów. Wprowadzimy je do biblioteki web-vitals, udokumentujemy na stronie web.dev i uwzględnimy w naszych narzędziach dla deweloperów, takich jak Lighthouse.
Kompromis między wskaźnikami
Jedna z najlepszych strategii podsumowuje okna przesunięcia układu jako średnią, a reszta podaje maksymalne okna. W przypadku stron, które są otwarte przez bardzo długi czas, średnia prawdopodobnie będzie przedstawiać bardziej reprezentatywną wartość, ale zasadniczo będzie wtedy łatwiej wykonywać działania w jednym oknie – mogą oni rejestrować czas wystąpienia zdarzenia, elementy przesunięte itd. Chętnie poznamy Twoją opinię na temat tego, co jest ważniejsze dla deweloperów.
Czy uważają Państwo, że okna przesuwane lub okna sesji są 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 JavaScriptu lub rozwidlenia rozszerzenia Podstawowe wskaźniki internetowe.
Prześlij opinię e-mailem do grupy Google web-vitals-feedback, wpisując w temacie „[Layout Shift Metrics]”. Czekamy na Twoją opinię.