Skumulowane przesunięcie układu (CLS)

Milica Mihajlija

Philip Walton

Nieoczekiwane zmiany układu mogą zakłócać wrażenia użytkownika na wiele sposobów, np. powodować utratę miejsca podczas czytania, jeśli tekst nagle się przesunie, lub kliknięcie niewłaściwego linku lub przycisku. W niektórych przypadkach może to spowodować poważne uszkodzenia.

Nieoczekiwane przemieszczanie się treści na stronie występuje zwykle, gdy zasoby są wczytywane asynchronicznie lub elementy DOM są dynamicznie dodawane do strony przed istniejącymi treściami. Przyczyną przesunięć układu mogą być obrazy lub filmy o nieznanych wymiarach, czcionki renderowane w większym lub mniejszym rozmiarze niż ich początkowe ustawienie domyślne albo reklamy lub widżety innych firm, które dynamicznie zmieniają rozmiar.

Problem ten pogłębiają różnice między tym, jak witryna działa podczas tworzenia, a jak widzą ją użytkownicy. Na przykład:

• Treści spersonalizowane lub pochodzące od innych firm często zachowują się inaczej podczas tworzenia i w produkcji.
• Obrazy testowe są często już w pamięci podręcznej przeglądarki dewelopera, ale wczytują się dłużej dla użytkownika końcowego.
• Wywołania interfejsu API wykonywane lokalnie są często tak szybkie, że niezauważalne opóźnienia w procesie tworzenia mogą stać się znaczące w produkcji.

Dane Cumulative Layout Shift (CLS) pomagają rozwiązać ten problem, ponieważ pozwalają mierzyć, jak często występuje on u prawdziwych użytkowników.

Co to jest CLS?

CLS to pomiar największej serii wartości przesunięcia układu dla każdego nieoczekiwanego przesunięcia układu, do którego doszło w całym okresie działania strony.

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

Seria zmian układu, zwana oknem sesji, to sytuacja, w której co najmniej 1 pojedyncza zmiana układu następuje po sobie z przedziałem krótszym niż 1 sekunda i nie dłuższym niż 5 sekund.

Najdłuższa seria to okno sesji z maksymalnym skumulowanym wynikiem wszystkich przesunięć układu w tym oknie.

Jaki wynik CLS jest dobry?

Aby wygodnie korzystać z witryny, użytkownicy powinni mieć wynik CLS wynoszący 0,1 lub mniej. Aby mieć pewność, że osiągasz ten cel w przypadku większości użytkowników, warto mierzyć 50. percentyl wczytywania stron w grupach urządzeń mobilnych i komputerów.

Więcej informacji o badaniach i metodologii, na których opierają się te zalecenia, znajdziesz w artykule Definiowanie progów podstawowych wskaźników internetowych.

Szczegóły przesunięć układu

Zmiany układu są definiowane przez interfejs API niestabilności układu, który w przypadku każdego elementu widocznego w widoku portu zmieniającego swoją pozycję początkową (np. górną i lewą pozycję w domyślnym trybie pisania) między 2 klatkami.layout-shift Takie elementy są uważane za niestabilne.

Pamiętaj, że zmiany układu występują tylko wtedy, gdy dotychczasowe elementy zmienią swoją pozycję początkową. Dodanie nowego elementu do DOM lub zmiana rozmiaru istniejącego elementu nie jest zmianą układu, o ile nie powoduje zmiany pozycji początkowej innych widocznych elementów.

Wynik przesunięcia układu

Aby obliczyć wynik przesunięcia układu, przeglądarka sprawdza rozmiar widocznego obszaru oraz ruch niestabilnych elementów w widocznym obszarze między 2 renderowanymi klatkami. Wynik przesunięcia układu jest iloczynem 2 miar tego przesunięcia: ułamka wpływu i ułamka odległości (obie definicje znajdują się poniżej).

layout shift score = impact fraction * distance fraction

Ułamek wpływu

Ułamek wpływu mierzy, jak niestabilne elementy wpływają na obszar widoku między 2 klatkami.

Ułamek wpływu danej klatki to kombinacja widocznych obszarów wszystkich niestabilnych elementów w tej klatce i poprzedniej klatce jako ułamek całkowitej powierzchni widoku.