skumulowane przesunięcie układu (CLS) to stabilny podstawowy wskaźnik internetowy. To ważne, skoncentrowane na użytkownikach dane do pomiaru stabilności wizualnej, ponieważ pomagają określić, jak często użytkownicy napotykają nieoczekiwane zmiany układu. Niski wskaźnik CLS pomaga zapewnić, że strona będzie atrakcyjna.
Nieoczekiwane przesunięcia układu mogą zakłócić korzystanie z aplikacji na wiele sposobów, m.in. zniechęcając użytkowników w trakcie czytania, jeśli tekst przesunie się nagle, po kliknięcia niewłaściwego linku lub przycisku. Czasem 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 jej treścią. Przyczyną tego ruchu może być obraz lub film o nieznanych wymiarach, czcionka, która renderuje się w rozmiarze większym lub mniejszym niż kreacja zastępcza, albo reklama lub widżet innej firmy, który dynamicznie zmienia swój rozmiar.
Problemy pogarszają się na podstawie różnic między sposobem działania witryny w fazie rozwoju a wrażeniami użytkowników. 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 ich wczytywanie trwa dłużej.
- Wywołania interfejsu API wykonywane lokalnie są często tak szybkie, że niezauważalne opóźnienia w pracy mogą być 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 okresie działania 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 pomiaru tych przesunięć znajdziesz w sekcji Wynik przesunięcia układu.
Seria przesunięcia układu, nazywana oknem sesji, ma miejsce, gdy co najmniej 1 pojedynczy układ ma miejsce w szybkim odstępie, a między każdym przesunięciem następuje mniej niż 1 sekunda w ciągu maksymalnie 5 sekund.
Największa seria to okno sesji z maksymalnym skumulowanym wynikiem wszystkich zmian układu w tym oknie.
Jaki jest dobry wynik CLS?
Aby zapewnić użytkownikom wygodę, wynik CLS witryny musi wynosić 0,1 lub mniej. Aby mieć pewność, że w przypadku większości użytkowników osiągasz ten cel, zalecamy pomiar 75 centyla 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 zgłasza wpisy layout-shift za każdym razem, gdy element widoczny w widocznym obszarze zmieni swoją pozycję początkową (np. górną i lewą pozycję w domyślnym trybie zapisu) między 2 klatkami. Elementy, których pozycje początkowe zmieniają się, są uznawane za elementy niestabilne.
Przesunięcia układu mają miejsce tylko wtedy, gdy istniejące elementy zmieniają swoją pozycję początkową. Dodanie nowego elementu do DOM lub zmiana rozmiaru istniejącego elementu liczy się jako przesunięcie układu tylko wtedy, gdy zmiana powoduje zmianę 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 widocznym 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.
layout shift score = impact fraction * distance fraction
Odsetek wpływu
Ułamek wpływu mierzy, jak niestabilne elementy wpływają na obszar widoczny między 2 klatkami.
Odsetek wpływu danej klatki to suma widocznych obszarów wszystkich niestabilnych elementów tej klatki i poprzedniej klatki jako odsetek całkowitej powierzchni widocznego obszaru.
Ten obraz przedstawia element, który w jednej klatce zajmuje połowę widocznego obszaru. W następnej ramce element przesuwa się w dół o 25% wysokości widocznego obszaru. Czerwona przerywana ramka wskazuje widoczny obszar elementu w obu klatkach, czyli w tym przypadku 75% całkowitego widocznego obszaru, więc jego odsetek wpływu 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ą przesunął się dowolny element niestabilny w ramce, podzielona przez największy wymiar widocznego obszaru (szerokość lub wysokość – w zależności od tego, który rozmiar jest większy).
W tym przykładzie największy wymiar widocznego obszaru to wysokość, a element niestabilny przesunął się o 25% wysokości widocznego obszaru, co sprawia, że ułamek odległości to 0.25.
Ułamek wpływu 0.75 i ułamek odległości 0.25 dają wynik przesunięcia układu wynoszący 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 się nie zmienia, więc nie jest to element niestabilny.
Przycisk „Kliknij mnie!” wcześniej nie znajdował się w modelu DOM, więc jego pozycja początkowa również się nie zmieni.
Pozycja początkowa zielonego pola się zmienia, ale została przeniesiona częściowo poza widoczny obszar, a niewidoczny obszar nie jest brany pod uwagę przy obliczaniu odsetka wpływu. Powiązanie widocznych obszarów zielonego pola w obu klatkach (czerwony, przerywany prostokąt) jest takie samo jak obszar zielonego pola w pierwszej klatce, czyli 50% widocznego obszaru. Odsetek wpływu wynosi 0.5.
Ułamek odległości jest oznaczony niebieską 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:
Pierwszy element na liście („Kot”) nie zmienia swojej pozycji początkowej między klatkami, więc jest stabilny. Nowych elementów dodanych do listy nie było wcześniej w modelu DOM, więc ich pozycje początkowe również się nie zmienią. Jednak elementy oznaczone jako „Pies”, „Koń” i „Zebra” zmieniają pozycję początkową, przez co są niestabilne.
Ponownie czerwony prostokąt z przekreślonymi liniami reprezentuje pole tych 3 niestabilnych elementów przed przesunięciem i po nim, co w tym przypadku stanowi około 60% obszaru widocznego obszaru (ułamek uderzeniowy 0.60).
Strzałki oznaczają odległość, o jaką niestabilne elementy zostały przeniesione z pozycji początkowej. Element „Zebra” (reprezentowany niebieską strzałką) przesunął się najbardziej o ok. 30% wysokości widocznego obszaru. To sprawia, że w tym przykładzie ułamek odległości 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. 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 wynikają z interakcji użytkownika (takich jak kliknięcie linku, naciśnięcie przycisku czy wpisanie tekstu w polu wyszukiwania), są zwykle niewielkie, o ile zachodzą na tyle blisko interakcji, że relacja jest dla użytkownika jasna.
Jeśli na przykład interakcja użytkownika powoduje wysłanie żądania sieciowego, którego wykonanie 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 ma pojęcia, kiedy zasób będzie gotowy, może w tym czasie próbować kliknąć coś innego – w przeciwnym razie element może wysunąć się spod spod spod nóg, gdy zakończy się wczytywanie pierwszego.
Przesunięcia układu, które mają miejsce w ciągu 500 milisekund od danych wejściowych użytkownika, są oznaczone flagą hadRecentInput, co pozwala wykluczyć je z obliczeń.
Animacje i przejścia
Dobrze wykonane animacje i przejścia to świetny sposób na odświeżenie treści strony bez zaskakiwania użytkownika. Treści, które nagle zmieniają się w niezamierzony sposób, niemal zawsze negatywnie wpływają na wrażenia użytkownika. Jednak treści, które przemieszczają się stopniowo i w naturalny sposób z jednej pozycji na drugą, mogą często pomóc użytkownikowi lepiej zrozumieć, co się dzieje, i ukierunkować go pomiędzy zmianami w poszczególnych stanach.
Pamiętaj, aby przestrzegać ustawień przeglądarki prefers-reduced-motion, ponieważ animacje mogą powodować problemy ze zdrowiem lub uważnością niektórych użytkowników witryny.
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(). - Do przenoszenia elementów używaj
transform: translate(), zamiast zmieniać właściwościtop,right,bottomlubleft.
Jak mierzyć CLS
CLS można mierzyć w module lub w terenie. Ta funkcja jest dostępna w narzędziach wymienionych poniżej.
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
Aby zmierzyć przesunięcia układu w JavaScript, użyj 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 mierzyć CLS w skrypcie JavaScript, pogrupuj nieoczekiwane wpisy layout-shift, w których jesteś zalogowany(-a) w sesjach, i oblicz maksymalną wartość sesji. Informacje o implementacji znajdziesz w kodzie źródłowym biblioteki JavaScript web vitals.
W większości przypadków wartość CLS w momencie wyładowywania strony jest ostateczną wartością CLS tej strony, ale w następnej sekcji jest kilka ważnych wyjątków. 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 wyrenderuje jakiekolwiek treści, nie powinna zgłaszać żadnej wartości CLS.
- Jeśli strona zostanie przywrócona z pamięci podręcznej stanu strony internetowej, jej wartość CLS powinna zostać zresetowana do zera, ponieważ jest to traktowane jak osobne wizytę na stronie.
- Interfejs API nie zgłasza wpisów
layout-shiftw przypadku przesunięć, które zachodzą w elementach iframe, ale dane to robią, ponieważ są one częścią wrażeń użytkownika strony. Może to różnić się między wartościami CrUX i RUM. Aby prawidłowo mierzyć wartość CLS, musisz uwzględnić elementy iframe. Ramki podrzędne mogą używać interfejsu API do raportowania swoich wpisówlayout-shiftdo ramki nadrzędnej na potrzeby agregacji.
Oprócz tych wyjątków CLS jest jeszcze bardziej złożony, ponieważ mierzy cały okres ważności strony:
- Użytkownicy mogą pozostawać otwartą kartę przez bardzo długi czas – dni, tygodnie, a nawet miesiące. Jednak w rzeczywistości użytkownik nigdy nie może zamknąć karty.
- W mobilnych systemach operacyjnych przeglądarki zazwyczaj nie uruchamiają wywołań zwrotnych stron w tle, co utrudnia raportowanie wartości końcowej.
Aby radzić sobie z takimi sytuacjami, zalecamy, aby system zgłaszał CLS za każdym razem, gdy strona działa w tle, a także za każdym razem, gdy jest wczytywana. Zdarzenie visibilitychange obejmuje oba te scenariusze. Systemy Analytics odbierające te dane będą musiały obliczyć ostateczną wartość CLS w backendzie.
Zamiast samodzielnie zapamiętywać każdy z tych przypadków i mierzyć się z nim, programiści mogą użyć biblioteki JavaScriptu web-vitals do pomiaru CLS, która uwzględnia wszystkie wymienione tu 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 optymalizacji za pomocą danych laboratoryjnych znajdziesz w naszym przewodniku po optymalizacji CLS.
Dodatkowe zasoby
- Wskazówki dotyczące tagu wydawcy Google na temat minimalizowania przesunięcia układu
- Czym jest skumulowane przesunięcie układu – Annie Sullivan i Steve Kobes na stronie #PerfMatters (2020)
Historia zmian
Czasami błędy wykrywane są w interfejsach API używanych do pomiaru danych, a niekiedy w definicjach samych wskaźników. Dlatego czasem trzeba wprowadzać zmiany, które mogą się pojawiać jako ulepszenia lub regresje w wewnętrznych raportach i panelach.
Aby Ci w tym pomóc, wszystkie zmiany w implementacji lub definicji tych danych są opisane w tej historii zmian.
Jeśli chcesz podzielić się opinią na temat tych danych, prześlij ją w grupie dyskusyjnej Google web-vitals-feedback.