Dowiedz się więcej o naszych planach ulepszenia danych skumulowanego przesunięcia układu i prześlij nam swoją opinię.
Skumulowane przesunięcie układu (CLS) to wartość, która służy do pomiaru stabilności wizualnej strony internetowej. Dane te są nazywane skumulowanym przesunięciem układu, ponieważ wynik każdej indywidualnej zmiany jest sumowany w całym cyklu życia strony.
Choć wszystkie zmiany układu są niekorzystne dla użytkowników, w przypadku stron, które otwierają się dłużej, pogarsza się ich konsekwencja. Dlatego zespół Chrome ds. danych o szybkości postanowił ulepszyć te dane, aby były one bardziej neutralne w stosunku do 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 różnych typów stron, które zwykle otwierają się dłużej. Najpopularniejsze z nich to aplikacje społecznościowe z przewijaniem nieskończonym i na jednej stronie.
Wewnętrzna analiza długotrwałych stron z wysokimi wynikami CLS wykazała, że większość problemów wynika z tych wzorców:
- Nieskończone przewijanie treści zmieniające treść, gdy użytkownik przewija stronę.
- Aktualizacja interfejsu użytkownika w odpowiedzi na interakcję użytkownika trwa dłużej niż 500 ms, bez żadnych obiektów zastępczych ani szkieletowych.
Zachęcamy deweloperów do zwiększania wygody użytkowników, ale staramy się też ulepszać ten wskaźnik i szukamy opinii o możliwych rozwiązaniach.
Jak określamy, czy nowy wskaźnik jest lepszy?
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 stworzyliśmy krótkie badanie użytkowników.
Najpierw nagraliśmy filmy i zrzuty Chrome przedstawiające 34 trasy użytkowników w różnych witrynach. Wybierając ścieżki użytkowników, zależało nam na kilku rzeczach:
- różne typy witryn, np. z wiadomościami i sklepami.
- Zróżnicowane ścieżki użytkownika, np. początkowe wczytanie strony, przewijanie, nawigacja na jednej stronie aplikacji i interakcje z użytkownikiem.
- Zróżnicowanie liczby i intensywności poszczególnych przesunięć układu stron w witrynach.
- Niewiele negatywnych wrażeń podczas korzystania z witryn poza zmianami układu.
Poprosiliśmy 41 naszych współpracowników o obejrzenie 2 filmów jednocześnie i ocenę, który z nich był lepszy pod względem przesunięcia 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 są znacznie wygodniejsze dla użytkowników podczas takich 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. Na podstawie tych informacji obliczyliśmy wartości danych dla każdej propozycji 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 propozycje wskaźników sprawdziliśmy?
Strategie dotyczące okien
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:
- Otwierane okna
- Okna przesuwne
- Okna sesji
W każdym z tych przykładów układ strony zmienia się z upływem czasu o różnej wadze. Każdy niebieski pasek reprezentuje jedno przesunięcie układu, a długość reprezentuje wynik tego przesunięcia. Obrazy pokazują, w jaki sposób różne strategie dotyczące okien grupują zmiany układu w czasie.
Otwierane okna
Najprostszym sposobem jest po prostu podział strony na okna równych częściach. Są to tak zwane okna spadające. Powyżej zauważysz, że czwarty słupek naprawdę wygląda, jakby powinien być zgrupowany w drugim oknie otwornym, ale ponieważ wszystkie okna mają stały rozmiar, znajdują się w pierwszym oknie. Jeśli występują niewielkie różnice w czasie wczytywania lub interakcji użytkownika na stronie, te same przesunięcia układu mogą nastąpić po różnych stronach granic rosnących okien.
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 naraz, ale aby utworzyć dane, moglibyśmy wziąć pod uwagę wszystkie możliwe okna przesuwne lub ich podzbiór.
Okna sesji
Jeśli chcemy skupić się na rozpoznawaniu obszarów strony z błyskawicznymi przesunięciami układu, możemy zacząć każde okno z przesunięciem i powiększać je do momentu, gdy napotkamy lukę o danym rozmiarze między przesunięciami układu. To podejście grupuje zmiany układu, ignorując większość niezmieniających się aspektów. Jeśli nie ma luk w przesunięciach układu, wskaźnik oparty na oknach sesji może rozwijać się bez ograniczeń, tak jak w przypadku bieżących danych CLS. Wypróbowaliśmy go również z maksymalnym rozmiarem okna.
Rozmiary okien
Ta wartość może dawać bardzo różne wyniki w zależności od tego, jak duże okna są w rzeczywistości, więc wypróbowaliśmy różne rozmiary okien:
- Każda zmiana jest osobnym oknem (bez okien)
- 100 ms
- 300 ms
- 1 sekunda
- 5 sekund
Podsumowywanie
Próbowaliśmy podsumowywać różne okna.
Centyl
Przyjrzeliśmy się maksymalnej wartości okna, 95. percentyl, 75 centyl i mediana.
Średnia
Przyjrzeliśmy się średniej wartości okna.
Budżety
Zastanawialiśmy się, czy jest jakiś minimalny wynik przesunięcia układu, którego użytkownicy nie zauważą, i możemy po prostu liczyć takie przesunięcia układu w ramach wyniku. Dlatego w przypadku różnych potencjalnych wartości „budżetu” przyjrzeliśmy się procentowi zmian w ramach budżetu i łącznemu wynikowi zmian w ramach budżetu.
Inne strategie
Przyjrzeliśmy się też wielu strategiom, które nie obejmowały okien, na przykład całkowitego przesunięcia układu podzielonego przez czas na stronie czy średniej wartości z najgorszych N 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 wszystkie ścieżki użytkowników według wyniku, a następnie posortowaliśmy dane według tego, jak blisko znajdowały się one w idealnej rankingu.
Aby uzyskać punkt odniesienia, utworzyliśmy też ranking wszystkich witryn według ich aktualnego wyniku CLS. CLS zajęła 32 miejsce i porównywała ją z 13 innymi strategiami, więc okazała się lepsza niż większość permutacji powyższych strategii. Aby wyniki były miarodajne, dodaliśmy też 3 losowe kolejność. Zgodnie z oczekiwaniami kolejność losowa uzyskała wyniki gorsze niż w przypadku każdej przetestowanej strategii.
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óżniono kilka różnych strategii.
Sprawdzone strategie
Podczas ustalania kolejności strategii odkryliśmy, że najlepsze są 3 rodzaje strategii. Każdy z nich uzyskał mniej więcej taką samą skuteczność, dlatego planujemy przeprowadzić dokładniejszą analizę wszystkich 3 elementów. Chcielibyśmy też poznać opinie deweloperów, aby dowiedzieć się, czy istnieją inne czynniki niezwiązane z wrażeniami użytkownika, które powinniśmy wziąć pod uwagę przy wyborze między nimi. (Poniżej dowiesz się, jak przesłać opinię).
Wysokie percentyle 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 wyniki osiągnęły naprawdę dobre wyniki zarówno na 95. percentylu, jak i na maksymalnej wartości.
Jednak w przypadku tak dużych okien martwiliśmy się o zastosowanie 95. percentyla – często sprawdzaliśmy jedynie 4-6 okien, a 95. z tych percentylów stanowi dużą interpolację. Nie jest jasne, jak działa interpolacja w odniesieniu do wartości wskaźnika. Wartość maksymalna jest znacznie wyraźniejsza, więc postanowiliśmy przejść do sprawdzania maksymalnej wartości.
Średnia okien sesji z długimi przerwami
Uśrednienie wyników wszystkich nieograniczonych okien sesji z 5-sekundowymi przerwami przynosiło naprawdę dobre wyniki. Ta strategia ma kilka ciekawych cech:
- Jeśli na stronie nie ma przerw między przesunięciami układu, jest to jedno długie okno sesji z takim samym wynikiem jak bieżący CLS.
- Te dane nie wzięły bezpośrednio pod uwagę czasu bezczynności. Uwzględniały tylko zmiany, które miały miejsce na stronie, a nie punkty w momencie, gdy strona się nie przesuwała.
Wysokie percentyle krótkich okien
Maksymalna długość okna przesuwanego o długości 300 ms to 95 centyl, czyli bardzo wysoko. W przypadku krótszego rozmiaru okna interpolacja centylowa jest mniejsza niż w przypadku większych rozmiarów, ale martwiliśmy się też o „powtarzanie” okien przesuwnych – jeśli zestaw przesunięcia układu następuje w 2 klatkach, istnieje wiele okien 300 ms, które je zawierają. Przejęcie maksimum jest znacznie prostsze i łatwiejsze niż wybranie 95. percentyla. I ponownie, postanowiliśmy przejść do sprawdzania maksymalnej liczby wyświetleń.
Strategie, które się nie sprawdziły
Strategie, które analizował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-centylowych podsumowań dowolnej strategii dotyczącej okien nie ustalono dobrej pozycji witryny. Podobnie nie było z sumą przesunięć układu w czasie.
Oceniliśmy kilka różnych „budżetów” pod kątem możliwych zmian układu:
- Procent przesunięć układu powyżej pewnego budżetu. W przypadku różnych budżetów wszystkie te pozycje w rankingu były dość słabo pozycjonowane.
- Średnie przesunięcie układu powyżej pewnego nadmiaru. Większość odmian tej strategii nie działała dobrze, ale średni nadmiar w dłuższej sesji z dużą przerwami działał prawie tak samo jak średnia z okresów sesji z długimi przerwami. Zdecydowaliśmy się korzystać tylko z tego drugiego rozwiązania, ponieważ jest to prostsze.
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. W przypadku szerszej analizy chcemy zastosować podobne podejście do ustalania pozycji witryn w rankingu na podstawie ich wyników wskaźników:
- Uszereguj wszystkie witryny według CLS i każdego nowego kandydującego wskaźnika.
- Które witryny są klasyfikowane w największym stopniu według CLS i poszczególnych kandydatów? Czy patrząc na te strony, zauważymy coś nieoczekiwanego?
- Jakie są największe różnice między nowymi kandydatami według nowych danych? Czy jakieś różnice przedstawiają zalety lub wady danego kandydata?
- Powtórz powyższą analizę, ale pogrupuj dane według czasu potrzebnego na wczytanie każdej strony. Czy jest oczekiwana poprawa przy długotrwałym wczytywaniu strony przy akceptowalnym przesunięciu układu? Czy w przypadku stron o krótkim czasie działania zauważamy jakieś nieoczekiwane rezultaty?
Opinia na temat naszego podejścia
Chętnie poznamy opinie programistów stron internetowych na temat tych rozwiązań. Oto kilka kwestii, o których warto pamiętać, rozważając nowe podejścia:
Co się nie zmieni
Chcemy podkreślić, że wiele rzeczy nie ulegnie zmianie w przypadku nowego podejścia:
- Żadna z naszych propozycji danych nie zmienia sposobu, w jaki wyniki przesunięcia układu poszczególnych klatek są obliczane, a jedynie sposób, w jaki podsumowujemy wiele klatek. Oznacza to, że interfejs JavaScript API do przesunięć układu pozostanie bez zmian, a bazowe zdarzenia w śladach Chrome, z których korzystają narzędzia dla programistów, pozostaną bez zmian, więc przesunięcia układu w narzędziach takich jak WebPageTest i Chrome Dev Tools będą nadal działać w ten sam sposób.
- Będziemy nadal starali się ułatwić deweloperom korzystanie z danych, m.in. w bibliotece Web Vitals, dokumentując je na stronie web.dev i raportując w naszych narzędziach dla programistó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 będzie prawdopodobnie bardziej reprezentatywna, 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 dowiemy się, 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 e-mailem opinię do naszej grupy dyskusyjnej Google web-vitals-feedback, a jej temat to „[Layout Shift Metrics]”. Chętnie poznamy Twoje zdanie.