Nieoczekiwane przesunięcia układu mogą zakłócić korzystanie z aplikacji na wiele sposobów – mogą np. zniechęcić użytkowników podczas czytania, jeśli tekst przesunie się nagle, albo kliknąć niewłaściwy link lub przycisk. W niektórych przypadkach może to spowodować poważne szkody.
Nieoczekiwany ruch treści strony następuje zwykle wtedy, gdy zasoby wczytują się asynchronicznie lub gdy elementy DOM są dynamicznie dodawane do strony przed istniejącą treścią. Przyczyną przesunięć układu mogą być obrazy lub filmy o nieznanych wymiarach, czcionki renderujące większe lub mniejsze niż początkowe wartości zastępcze oraz reklamy lub widżety innych firm, które dynamicznie zmieniają swój rozmiar.
Problem ten pogarszają się w związku z tym, jak witryna funkcjonuje w fazie opracowywania i w jaki sposób korzystają z niej użytkownicy. Na przykład:
- Treści spersonalizowane i treści osób trzecich często zachowują się inaczej w fazie tworzenia i produkcji.
- Obrazy testowe często znajdują się w pamięci podręcznej przeglądarki dewelopera, ale wczytują się dłużej.
- Wywołania interfejsu API wykonywane lokalnie są często tak szybkie, że niezauważalne opóźnienia w pracy mogą stać się znaczne.
Dane skumulowane przesunięcie układu (CLS) pomagają rozwiązać ten problem, sprawdzając, jak często występuje on w przypadku rzeczywistych użytkowników.
Co to jest CLS?
CLS to miara największej liczby wyników przesunięcia układu w przypadku każdego nieoczekiwanego przesunięcia układu, do którego doszło w całym cyklu życia strony.
Przesunięcie układu ma miejsce za każdym razem, gdy widoczny element zmienia swoją pozycję z jednej wyrenderowanej klatki na następną. Szczegółowe informacje o sposobie obliczania poszczególnych wyników zmiany układu znajdziesz w dalszej części tego przewodnika.
Seria przesunięcia układu, nazywana oknem sesji, ma miejsce, gdy co najmniej 1 pojedyncze przesunięcie układu następuje szybko po sobie, przy czym każda zmiana musi zająć mniej niż sekundę, a maksymalny czas trwania okna to 5 sekund.
Największa seria to okno sesji z maksymalnym skumulowanym wynikiem wszystkich przesunięć układu w ramach tego okna.
Jaki jest dobry wynik CLS?
W trosce o wygodę użytkowników witryny powinny mieć wynik CLS wynoszący 0, 1 lub mniejszy. Aby mieć pewność, że w przypadku większości użytkowników osiągasz ten cel, dobrym progiem jest 75 centyl wczytań stron w podziale na urządzenia mobilne i komputery.
Więcej informacji o badaniach i metodologii stojącej za tą rekomendacją znajdziesz w artykule Określanie progów podstawowych wskaźników internetowych.
Szczegółowość układu
Przesunięcia układu są zdefiniowane za pomocą interfejsu Layout Instability API, który rejestruje wpisy layout-shift za każdym razem, gdy element widoczny w widocznym obszarze zmieni swoją pozycję początkową (na przykład górną i lewą pozycję w domyślnym trybie zapisu) między 2 klatkami. Takie elementy są uznawane za elementy niestabilne.
Pamiętaj, że przesunięcie układu następuje tylko wtedy, gdy istniejące elementy zmieniają swoją pozycję początkową. Jeśli dodasz do DOM nowy element lub istniejący element zmieni rozmiar, nie będzie to liczone jako przesunięcie układu, o ile nie powoduje to zmiany pozycji początkowej innych widocznych elementów.
Wynik przesunięcia układu
Aby obliczyć wynik przesunięcia układu, przeglądarka bierze pod uwagę rozmiar widocznego obszaru i przenoszenie niestabilnych elementów w tym obszarze między 2 wyrenderowanymi klatkami. Wynik przesunięcia układu jest iloczynem 2 wskaźników tego ruchu: ułamka wpływu i ułamka odległości (obu zdefiniowanych poniżej).
layout shift score = impact fraction * distance fraction
Odsetek wpływu
Ułamek wpływu określa, jak elementy niestabilne wpływają na widoczny obszar między 2 klatkami.
Odsetek wpływu danej klatki to suma widocznych obszarów wszystkich niestabilnych elementów w tej i poprzedniej klatce jako odsetek całkowitej powierzchni widocznego obszaru.
Na poprzednim obrazie znajduje się element, który zajmuje połowę widocznego obszaru w 1 klatce. Następnie w następnej ramce element przesuwa się w dół o 25% wysokości widocznego obszaru. Czerwony prostokąt z kropkami wskazuje sumę widocznego obszaru elementu w obu ramkach, czyli w tym przypadku 75% całkowitej widocznego obszaru, więc jego udział wynosi 0.75.
Ułamek odległości
Druga część równania z wynikiem przesunięcia układu mierzy odległość, na jaką przesunęły się niestabilne elementy względem widocznego obszaru. Ułamek odległości to największa odległość w poziomie lub w pionie, jaką każdy element niestabilny przesunął się w ramce, podzielona przez największy wymiar widocznego obszaru (szerokość lub wysokość – w zależności od tego, która wartość jest większa).
W poprzednim przykładzie największy wymiar widocznego obszaru to wysokość, a element niestabilny przesunął się o 25% wysokości widocznego obszaru, co daje ułamek odległości 0, 25.
W tym przykładzie ułamek wpływu to 0.75, a ułamek odległości – 0.25, więc wynik zmiany układu wynosi 0.75 * 0.25 = 0.1875.
Przykłady
W następnym przykładzie widać, jak dodanie treści do istniejącego elementu wpływa na wynik przesunięcia układu:
W tym przykładzie szare pole zmienia rozmiar, ale jego pozycja początkowa nie zmienia się, więc nie jest elementem niestabilnym.
Przycisk „Kliknij mnie!” nie znajdował się wcześniej w modelu DOM, więc jego pozycja początkowa również się nie zmieni.
Położenie zielonego pola zmienia się jednak, ale ponieważ zostało częściowo przeniesione poza widoczny obszar, niewidoczny obszar nie jest brany pod uwagę podczas obliczania ułamka wpływu. Podział widocznych obszarów zielonego pola w obu ramkach (zilustrowany czerwonym, przerywanym prostokątem) jest taki sam jak obszar zielonego pola w pierwszej klatce – 50% widocznego obszaru. Odsetek wpływu wynosi 0.5.
Ułamek odległości jest oznaczony fioletową strzałką. Zielone pole przesunęło się w dół o około 14% widocznego obszaru, więc ułamek odległości wynosi 0.14.
Wynik przesunięcia układu: 0.5 x 0.14 = 0.07.
Ten przykład pokazuje, jak wiele niestabilnych elementów wpływa na wynik przesunięcia układu strony:
W pierwszej ramce na poprzednim obrazie znajdują się 4 wyniki żądania API dotyczącego zwierząt, posortowane w kolejności alfabetycznej. W drugiej ramce do posortowanej listy zostanie dodanych więcej wyników.
Pierwszy element na liście („Kot”) nie zmienia swojej pozycji początkowej między klatkami, więc jest stabilny. Podobnie nowe elementy dodane do listy nie znajdowały się wcześniej w modelu DOM, więc ich pozycje początkowe również się nie zmienią. Jednak elementy oznaczone etykietami „Pies”, „Koń” i „Zebra” zmieniają pozycję początkową, przez co stają się elementami niestabilnymi.
Ponownie czerwone prostokąty z kropkami reprezentują sumę tych 3 elementów niestabilnych przed obszarami i za nimi, co w tym przypadku stanowi około 60% powierzchni widocznego obszaru (ułamek uderzenia wynoszący 0.60).
Strzałki oznaczają odległości, które elementy niestabilne zostały przeniesione od pozycji początkowego. Element „Zebra” (reprezentowany niebieską strzałką) przesunął się najbardziej o około 30% wysokości widocznego obszaru. W ten sposób ułamek odległości w tym przykładzie to 0.3.
Wynik przesunięcia układu: 0.60 x 0.3 = 0.18.
Oczekiwane i nieoczekiwane przesunięcia układu
Nie wszystkie przesunięcia układu są złe. W rzeczywistości wiele dynamicznych aplikacji internetowych często zmienia pozycję początkową elementów na stronie. Przesunięcie układu jest niewłaściwe tylko wtedy, gdy użytkownik go nie spodziewał.
Przesunięcia układu inicjowane przez użytkownika
Przesunięcia układu, które mają związek z interakcjami użytkownika (np. kliknięciem lub dotknięciem linku, naciśnięciem przycisku czy wpisaniem tekstu w polu wyszukiwania), są zasadniczo prawidłowe, o ile zmiana ta odbywa się na tyle blisko interakcji, że relacja z użytkownikiem jest jasna.
Jeśli na przykład interakcja użytkownika powoduje wysłanie żądania sieciowego, którego realizacja może zająć trochę czasu, warto od razu utworzyć pewien obszar i wyświetlić wskaźnik wczytywania, aby uniknąć nieprzyjemnych zmian układu po ukończeniu żądania. Jeśli użytkownik nie wie, że coś się wczytuje lub nie wie, kiedy zasób będzie gotowy, może w tym czasie spróbować kliknąć coś innego – coś, co może wysunąć się spod jego pudełka.
Przesunięcia układu, które mają miejsce w ciągu 500 milisekund od danych wejściowych użytkownika, będą miały ustawioną flagę hadRecentInput, więc można je wykluczyć z obliczeń.
Animacje i przejścia
Dobrze wykonane animacje i przejścia to świetny sposób na odświeżenie treści strony bez zaskoczenia użytkownika. Treści, które nagle przenoszą się na stronie niespodziewanie, niemal zawsze wywierają złe wrażenie na użytkownikach. Jednak treści, które przechodzą z jednej pozycji na drugą w sposób naturalny, często pomagają użytkownikowi zrozumieć, co się dzieje, i ułatwiają mu zrozumienie poszczególnych sytuacji.
Pamiętaj o przestrzeganiu ustawień przeglądarki prefers-reduced-motion, ponieważ niektórzy użytkownicy witryny mogą zauważyć w niej nieprawidłowe efekty lub problemy z uwagą związane z animacjami.
Właściwość CSS transform umożliwia animowanie elementów bez wywoływania przesunięcia układu:
- Zamiast zmieniać właściwości
heightiwidth, użyjtransform: scale(). - Jeśli chcesz przenosić elementy, nie zmieniaj właściwości
top,right,bottomanilefti zamiast tego używaj elementutransform: translate().
Jak mierzyć CLS
CLS można mierzyć w module lub w terenie. Ta funkcja jest dostępna w tych narzędziach:
Narzędzia terenowe
- Raport na temat użytkowania Chrome
- PageSpeed Insights
- Search Console (raport dotyczący podstawowych wskaźników internetowych)
- Biblioteka JavaScript
web-vitals
Narzędzia laboratoryjne
Mierzenie przesunięć układu w JavaScript
Do pomiaru przesunięć układu w JavaScript możesz używać interfejsu Layout Instability API.
Poniższy przykład pokazuje, jak utworzyć PerformanceObserver, aby rejestrować w konsoli wpisy layout-shift:
new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntries()) {
console.log('Layout shift:', entry);
}
}).observe({type: 'layout-shift', buffered: true});
Mierz CLS w JavaScript
Aby zmierzyć CLS w JavaScripcie, musisz pogrupować te nieoczekiwane wpisy layout-shift w sesje i obliczyć maksymalną wartość sesji. Możesz skorzystać z kodu źródłowego biblioteki JavaScript web vitals, który zawiera dokumentację referencyjną dotyczącą obliczania CLS.
W większości przypadków bieżąca wartość CLS w chwili wyładowywania strony jest ostateczną wartością CLS tej strony, ale jest kilka ważnych wyjątków, o których wspomniano w następnej sekcji. Biblioteka JavaScript web vitals respektuje ich w jak największym stopniu zgodnie z ograniczeniami internetowych interfejsów API.
Różnice między danymi a interfejsem API
- Jeśli strona wczytuje się w tle lub działa w tle, zanim przeglądarka wyświetli jakiekolwiek treści, nie powinna zgłaszać żadnej wartości CLS.
- W przypadku przywrócenia strony z pamięci podręcznej stanu strony internetowej jej wartość CLS należy zresetować do 0, ponieważ użytkownicy traktują to jako osobną wizytę na stronie.
- Interfejs API nie raportuje wpisów
layout-shiftw przypadku przesunięć, które zachodzą w elementach iframe, ale te dane wyświetlają się, ponieważ są częścią wrażeń użytkownika na stronie. Może to różnić się między CrUX i RUM. Aby prawidłowo mierzyć CLS, weź je pod uwagę. Ramki podrzędne mogą używać interfejsu API do zgłaszania swoich wpisówlayout-shiftdo ramki nadrzędnej na potrzeby agregacji.
Oprócz tych wyjątków CLS jest nieco bardziej skomplikowany, ponieważ mierzy cały okres ważności strony:
- Użytkownicy mogą pozostawać otwartą kartę przez bardzo długo – dni, tygodnie lub miesiące. Jednak w rzeczywistości użytkownik nigdy nie może zamknąć karty.
- W systemach operacyjnych na urządzenia mobilne przeglądarki zazwyczaj nie uruchamiają wywołań zwrotnych stron w tle, co utrudnia zaraportowanie wartości „końcowej”.
Aby radzić sobie z takimi przypadkami, wskaźnik CLS powinien być raportowany za każdym razem, gdy strona działa w tle, a nie tylko za każdym razem, gdy jest wyładowywana (zdarzenie visibilitychange obejmuje oba te scenariusze). Systemy analityczne odbierające te dane będą musiały obliczyć ostateczną wartość CLS w backendzie.
Zamiast zapamiętywać wszystkie te sytuacje i mierzyć się z nimi samodzielnie, programiści mogą użyć biblioteki JavaScriptu web-vitals do pomiaru CLS, która uwzględnia wszystkie wymienione powyżej czynniki z wyjątkiem przypadku elementu iframe:
import {onCLS} from 'web-vitals';
// Measure and log CLS in all situations
// where it needs to be reported.
onCLS(console.log);
Jak poprawić CLS
Więcej wskazówek na temat identyfikowania zmian układu w terenie i wykorzystywania danych laboratoryjnych do ich optymalizacji znajdziesz w naszym przewodniku po optymalizacji CLS.
Dodatkowe materiały
- Wskazówki dotyczące minimalizacji przesunięcia układu – tagi wydawcy Google
- Czym jest skumulowane przesunięcie układu – Annie Sullivan i Steve Kobes, na konferencji #PerfMatters (2020)
Historia zmian
Czasami błędy wykrywane są w interfejsach API używanych do pomiaru danych, a czasem w definicjach samych danych. Dlatego czasem trzeba wprowadzać określone zmiany, które mogą być widoczne w wewnętrznych raportach i panelach jako ulepszenia lub regresje.
Aby Ci w tym pomóc, wszystkie zmiany w implementacji lub definicji tych danych będą pojawiać się w tej historii zmian.
Jeśli chcesz podzielić się swoją opinią na temat tych danych, możesz ją przekazać w grupie dyskusyjnej Google web-vitals-feedback.