Cumulative Layout Shift (CLS)

Milica Mihajlija

Philip Walton

Nieoczekiwane zmiany układu mogą na wiele sposobów przeszkadzać użytkownikom: np. gdy utracą dostęp do miejsca podczas czytania w przypadku nagłego przesunięcia tekstu, a nawet skłaniają go do kliknięcia niewłaściwego linku lub przycisku. W niektórych przypadkach może to spowodować poważne szkody.

Nieoczekiwane przenoszenie treści strony ma zwykle miejsce, gdy zasoby są wczytywane 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ątkowa kreacja zastępcza albo reklamy lub widżety innych firm, które dynamicznie zmieniają swój rozmiar.

Różnice między sposobem działania witryny w trakcie opracowywania a sposobem jej obsługi przez użytkowników pogłębiają ten problem. Na przykład:

• Treści spersonalizowane lub należące do osób trzecich często działają inaczej w trakcie tworzenia i produkcji.
• Obrazy testowe często są już zapisane 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 w środowisku produkcyjnym niezauważalne opóźnienia w opracowywaniu mogą znacznie wzrosnąć.

Skumulowane przesunięcie układu (CLS) pomaga rozwiązać ten problem, mierząc, jak często pojawia się on w przypadku rzeczywistych użytkowników.

Co to jest CLS?

CLS to miara największej serii wyników przesunięcia układu w przypadku każdego nieoczekiwanego przesunięcia układu, do którego dochodzi w całym cyklu życia strony.

Przesunięcie układu ma miejsce za każdym razem, gdy widoczny element zmieni swoją pozycję z jednej renderowanej klatki na następną. Szczegółowe informacje o sposobie obliczania poszczególnych wyników przesunięcia układu znajdziesz w dalszej części tego przewodnika.

Okno sesji to seria przesunięć układu, gdy co najmniej 1 przesunięcie układu następuje w krótkich odstępach czasu, z odstępem mniej niż 1 sekundy między kolejnymi przesunięciami do maksymalnie 5 sekund łącznego czasu trwania okna.

Największa seria to okno sesji z maksymalnym łącznym wynikiem wszystkich przesunięć układu w tym oknie.

Jaki jest dobry wynik CLS?

Aby zadbać o wygodę użytkowników, witryny powinny mieć wynik CLS równy 0,1 lub mniejszy. Aby mieć pewność, że w przypadku większości użytkowników osiągniesz ten cel, warto mierzyć 75 centyl wczytań stron z podziałem na urządzenia mobilne i komputery.

Aby dowiedzieć się więcej o badaniach i metodologii stosowanej w tym celu, zapoznaj się z artykułem Definiowanie wartości progowych dla podstawowych wskaźników internetowych.

Szczegóły zmian układu

Przesunięcia układu są definiowane przez interfejs Layout Instability API. Raportuje on wpisy layout-shift za każdym razem, gdy element widoczny w widocznym obszarze zmieni swoją pozycję początkową (na przykład jego górną i lewą pozycję w domyślnym trybie zapisu) między 2 klatkami. Takie elementy są uważane za elementy niestabilne.

Pamiętaj, że przesunięcia układu występują tylko wtedy, gdy dotychczasowe elementy zmienią swoją pozycję początkową. Jeśli dodasz nowy element do DOM lub zmieni się rozmiar istniejącego elementu, nie będzie to liczone jako przesunięcie układu – o ile zmiana nie spowoduje zmiany pozycji początkowej w innych widocznych elementach.

Wynik przesunięcia układu

Aby obliczyć wynik przesunięcia układu, przeglądarka bierze pod uwagę rozmiar widocznego obszaru oraz ruch niestabilnych elementów w widocznym obszarze między 2 renderowanymi klatkami. Wynik przesunięcia układu jest iloczynem 2 wskaźników tego ruchu: ułamka wpływu i ułamka odległości (oba definicje znajdziesz poniżej).

layout shift score = impact fraction * distance fraction

Odsetek wpływu

Ułamek wpływu pokazuje, jak niestabilne elementy wpływają na obszar widocznego obszaru między 2 klatkami.

Odsetek uderzeń w danej klatce to połączenie wszystkich niestabilnych obszarów widocznych w tej i poprzedniej klatce, które stanowią ułamek całkowitej powierzchni widocznego obszaru.

Na poprzednim obrazie widać element, który zajmuje połowę widocznego obszaru w jednej klatce. Następnie w następnej klatce element przesuwa się w dół o 25% wysokości widocznego obszaru. Czerwony, kropkowany prostokąt wskazuje sumę widocznego obszaru elementu w obu klatkach – w tym przypadku stanowi to 75% całego widocznego obszaru, więc ułamek wpływu wynosi 0.75.

Odległość

Druga część równania wyniku przesunięcia układu mierzy odległość, w jakiej elementy niestabilne zostały przesunięte względem widocznego obszaru. Odsetek odległości to największa odległość w poziomie lub pionie, którą każdy niestabilny element przemieścił w klatce, 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ększym wymiarem widocznego obszaru jest wysokość, a element niestabilny został przesunięty o 25% wysokości, co daje ułamek odległości 0, 25.

W tym przykładzie ułamek wpływu wynosi 0.75, a odległość to 0.25, więc wynik przesunięcia układu to 0.75 * 0.25 = 0.1875.

Przykłady

Następny przykład pokazuje, jak dodanie treści do istniejącego elementu wpływa na wynik przesunięcia układu:

W tym przykładzie rozmiar szarego pola zmienia się, ale jego pozycja początkowa się nie zmienia, więc nie jest to element niestabilny.

Przycisk „Kliknij mnie!” Wcześniej ten przycisk nie znajdował się w DOM, dlatego jego pozycja początkowa również się nie zmieni.

Położenie zielonego pola zmienia się jednak, ponieważ został on przeniesiony częściowo poza widoczny obszar, więc niewidoczny obszar nie jest brany pod uwagę przy obliczaniu ułamka wpływu. Suma widocznych obszarów dla zielonego pola w obu ramkach (oznaczona czerwonym kropkowanym prostokątem) jest taka sama jak obszar zielonego pola w pierwszej ramce, czyli 50% widocznego obszaru. Ułamek wpływu wynosi 0.5.

Odsetek odległości jest oznaczony fioletową strzałką. Zielona ramka przesunęła się w dół o około 14% widocznego obszaru, więc ułamek odległości wynosi 0.14.

Wynik przesunięcia układu to 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 są 4 wyniki żądania do interfejsu API dotyczące 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 pozostaje stabilny. Podobnie nowe elementy dodawane do listy nie znajdowały się wcześniej w modelu DOM, więc ich pozycje początkowe również się nie zmienią. Ale elementy oznaczone etykietą „Pies”, „Konia” i „Zebra” wszystkie zmieniają swoje pozycje początkowe, co sprawia, że są to elementy niestabilne.

Czerwone kropkowane prostokąty także reprezentują 3 niestabilne elementy. przed i po obszarach, które w tym przypadku stanowią około 60% obszaru widocznego obszaru (ułamek wpływu, który wynosi 0.60).

Strzałki oznaczają odległości, o jakie elementy niestabilne przesunęły się z pozycji początkowych. „Zebra” – element (niebieska strzałka) przesunął się najbardziej na około 30% wysokości widocznego obszaru. W ten sposób ułamek odległości w tym przykładzie wynosi 0.3.

Wynik przesunięcia układu to 0.60 x 0.3 = 0.18.

Spodziewane i nieoczekiwane przesunięcia układu

Nie wszystkie przesunięcia układu są niewłaściwe. Wiele dynamicznych aplikacji internetowych często zmienia pozycję początkową elementów na stronie. Przesunięcie układu jest szkodliwe tylko wtedy, gdy użytkownik tego nie spodziewa.

Przesunięcia układu inicjowane przez użytkownika

Zmiany układu występujące w odpowiedzi na interakcje użytkowników (takie jak kliknięcie linku, naciśnięcie przycisku czy wpisanie tekstu w polu wyszukiwania) są zwykle normalne, o ile przesunięcie następuje na tyle blisko interakcji, że relacja jest jasna dla użytkownika.

Jeśli na przykład interakcja użytkownika powoduje uruchomienie żądania sieciowego, którego realizacja może trochę potrwać, najlepiej od razu utworzyć trochę przestrzeni i wyświetlić wskaźnik wczytywania, aby uniknąć nieprzyjemnego przesunięcia układu po zakończeniu żądania. Jeśli użytkownik nie zauważy, że coś się wczytuje lub nie ma pewności, kiedy zasób będzie gotowy, w czasie oczekiwania może spróbować kliknąć coś innego – coś, co mogłoby się wydostać spod niego.

Przesunięcia układu, które mają miejsce w ciągu 500 milisekund od wprowadzenia danych przez użytkownika, będą miały ustawioną flagę hadRecentInput, więc można je wykluczyć z obliczenia.

Animacje i przejścia

Dobre animacje i przejścia to świetny sposób na aktualizację zawartości strony, bez zaskakiwania użytkownika. Treści, które gwałtownie i nieoczekiwanie zmieniają się na stronie, niemal zawsze wywołują negatywne wrażenia u użytkowników. Jednak treści, które przesuwają się stopniowo i naturalnie z jednej pozycji do drugiej, często mogą pomóc użytkownikowi w lepszym zrozumieniu tego, co dzieje się na ekranie i przekierowaniu go do kolejnych zmian stanu.

Pamiętaj o przestrzeganiu ustawień przeglądarki prefers-reduced-motion, ponieważ animacje niektórych użytkowników mogą mieć negatywny wpływ na koncentrację lub problemy.

Właściwość CSS transform umożliwia animowanie elementów bez wywoływania przesunięcia układu:

• Zamiast zmieniać właściwości height i width, użyj transform: scale().
• Aby przenosić elementy, nie zmieniaj właściwości top, right, bottom ani left. Zamiast nich użyj właściwości transform: translate().

Mierzenie CLS

CLS można mierzyć w laboratorium lub w terenie. Wartość ta jest dostępna w tych narzędziach:

Narzędzia terenowe

• Interfejs Chrome dla użytkowników Zgłoś
• PageSpeed Insights
• Search Console (podstawowe wskaźniki internetowe)
• Biblioteka JavaScript web-vitals

Narzędzia laboratoryjne

• Narzędzia deweloperskie w Chrome
• Lighthouse
• PageSpeed Insights
• WebPageTest

Pomiar przesunięć układu w JavaScript

Aby mierzyć przesunięcia układu w JavaScript, użyj interfejsu Layout Instability API.

Ten przykład pokazuje, jak utworzyć PerformanceObserver w celu rejestrowania wpisów layout-shift w konsoli:

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('Layout shift:', entry);
  }
}).observe({type: 'layout-shift', buffered: true});

Pomiar CLS w JavaScripcie

Aby mierzyć CLS w języku JavaScript, musisz zgrupować 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 referencyjną implementację sposobu obliczania CLS.

W większości przypadków bieżąca wartość CLS w momencie wyładowywania strony z pamięci jest ostateczną wartością CLS dla tej strony, ale jest kilka ważnych wyjątków, które opisujemy w następnej sekcji. Biblioteka JavaScript web vitals uwzględnia te kwestie w miarę możliwości w ramach ograniczeń internetowych interfejsów API.

Różnice między danymi a interfejsem API

• Jeśli strona wczytuje się w tle lub działa w tle przed wyrenderowaniem treści przez przeglądarkę, nie powinna podawać żadnych wartości CLS.
• Jeśli strona zostanie przywrócona z pamięci podręcznej stanu strony internetowej, jej wartość CLS powinna zostać zresetowana do 0, ponieważ użytkownicy widzą ją jako odrębną wizytę na stronie.
• Interfejs API nie zgłasza wpisów layout-shift w przypadku zmian zachodzących w elementach iframe, ale dane rejestruje to, ponieważ są one częścią interfejsu strony. Może to wyróżniać się jako różnica między CrUX a RUM. Aby prawidłowo mierzyć CLS, należy je wziąć pod uwagę. Ramki podrzędne mogą używać interfejsu API do raportowania wpisów layout-shift w ramce nadrzędnej w celu agregacji.

Oprócz tych wyjątków CLS jest też bardziej złożony, ponieważ mierzy cały okres ważności strony:

• Użytkownicy mogą otwierać kartę bardzo przez długi czas – dni, tygodnie, miesiące. W rzeczywistości użytkownik nigdy nie zamknie karty.
• W systemach operacyjnych na urządzenia mobilne przeglądarki zwykle nie uruchamiają wyładowywania strony z wywołaniami kart w tle, co utrudnia określenie „ostatecznych”. .

Aby uwzględnić takie przypadki, CLS należy zgłaszać za każdym razem, gdy strona działa w tle – a nie tylko wtedy, gdy zostanie wyjęta z pamięci (zdarzenie visibilitychange obejmuje oba te scenariusze). Systemy analityczne otrzymujące te dane będą musiały obliczyć ostateczną wartość CLS w backendzie.

Zamiast zapamiętywać wszystkie te problemy i zapoznać się z nimi samodzielnie, deweloperzy mogą użyć biblioteki JavaScript web-vitals do pomiaru CLS, która uwzględnia wszystkie wymienione wyżej kwestie z wyjątkiem przypadków związanych z elementami iframe:

import {onCLS} from 'web-vitals';

// Measure and log CLS in all situations
// where it needs to be reported.
onCLS(console.log);

Jak poprawić wartość CLS

Więcej wskazówek dotyczących identyfikowania przesunięć układu w terenie i wykorzystywania danych laboratoryjnych do ich optymalizowania znajdziesz w naszym przewodniku po optymalizacji CLS.

Dodatkowe materiały

• Wskazówki tagu wydawcy Google dotyczące minimalizacji przesunięcia układu
• Zrozumienie skumulowanego przesunięcia układu: Annie Sullivan i Steve Kobes, #PerfMatters (2020)

Historia zmian

Czasami błędy wykrywane są w interfejsach API używanych do pomiaru danych, a czasem w definicjach samych wskaźników. Dlatego czasami konieczne jest wprowadzenie zmian, które mogą być widoczne jako ulepszenia lub regresje w wewnętrznych raportach i panelach.

Aby ułatwić Ci to zadanie, wszystkie zmiany w implementacji lub definicji tych danych będą widoczne w tym dzienniku zmian.

Jeśli chcesz podzielić się opinią na temat tych danych, możesz przesłać ją w grupie dyskusyjnej Google z informacjami o web-vitals-feedback.