Cumulative Layout Shift (CLS) – czym jest i jak go poprawić?

Co to jest CLS? Dlaczego stabilność układu jest ważna?

Cumulative Layout Shift (CLS) to wskaźnik z grupy Core Web Vitals. Mierzy on stabilność wizualną strony, czyli określa, jak często i w jakim stopniu dochodzi do nieoczekiwanych przesunięć elementów układu widocznych na ekranie podczas korzystania ze strony.

CLS nie mierzy czasu, lecz łączny wpływ wszystkich nagłych zmian w układzie – im wyższa wartość, tym bardziej strona „skacze” podczas ładowania lub interakcji. 

Dlaczego wskaźnik CLS jest ważny dla Google i użytkownika?

Wysoki CLS oznacza, że elementy na stronie skaczą lub przesuwają się w trakcie ładowania, dezorientując użytkownika. Jak to w praktyce wygląda? 

Zdarzyło Ci się, że gdy czytasz artykuł na stronie, w pewnym momencie tekst nagle zjeżdża w dół, bo wczytało się opóźnione zdjęcie lub reklama. Takie nieoczekiwane przesunięcia są frustrujące – użytkownik gubi się w tekście, traci wątek i irytuje się na zaistniałą sytuację, co może go skłonić do opuszczenia witryny. Zwłaszcza jeżeli powtarza się to kilka raz w niedługim oknie czasowym. 

W praktyce strona ze zbyt dużymi przesunięciami układu nie tylko denerwuje odbiorców, ale od maja 2021 może także tracić pozycje w wynikach wyszukiwania – Google uwzględnia CLS jako czynnik rankingowy.

Jaki wynik CLS jest dobry?

Google uznaje stabilność wizualną za istotny element doświadczenia użytkownika, dlatego CLS o wartości 0,1 i mniejszej uznawany jest za wynik dobry, natomiast powyżej 0,25 za słaby (wyniki pośrednie wymagają poprawy) [1]. 

Zaleca się, aby przynajmniej 75% odwiedzin strony osiągało CLS ≤ 0,1. [2] 

Tak więc: im niższy CLS, tym lepiej!

Jak obliczany jest CLS? 

Wynik testu Cumulative Layout Shift obliczany jest na podstawie analizy zmian pozycji elementów na stronie między kolejnymi klatkami renderowania. Przeglądarka sprawdza, które elementy widoczne w obszarze ekranu zmieniły swoją pozycję początkową (np. przesunęły się w dół lub w bok). Tylko takie elementy są traktowane jako niestabilne i uwzględniane w obliczeniach.

Sam wynik przesunięcia układu to iloczyn dwóch czynników:

• ułamek wpływu (impact fraction) – wskazuje, jaką część widocznego obszaru zajęły elementy, które się przesunęły,
• ułamek odległości (distance fraction) – określa, jak daleko przesunęły się te elementy w stosunku do rozmiaru widocznego obszaru. [1]

CLS rośnie wraz ze wzrostem liczby i skali przesunięć – im więcej i dalej przesuwają się elementy, tym większa wartość wskaźnika.

Najczęstsze przyczyny niestabilności układu (wysokiego CLS)

Wysoki CLS zwykle wynika z konkretnych decyzji projektowych lub technicznych. Co zalicza się do najczęstszych przyczyn niestabilności układu strony oraz opóźnionych przesunięć zawartości?

• Obrazy (i inne media) bez określonych wymiarów – brak zadeklarowanej szerokości i wysokości dla obrazów lub elementów wideo sprawia, że przeglądarka nie wie, ile miejsca zarezerwować. Gdy obraz się wczyta i okaże się większy, niż przewidziano domyślnie, wypycha inne elementy, powodując „skok” treści. [4] Podobnie działa to w drugą stronę – jeśli element graficzny zajmie mniej miejsca, niż oczekiwano, inne treści mogą się przesunąć w górę.
• Reklamy oraz osadzone elementy (iframes) wczytywane dynamicznie – wszelkie banery reklamowe, okienka z social mediów, mapy itp. wczytywane z opóźnieniem mogą spowodować duże przesunięcia, jeśli nie mają z góry ustalonej przestrzeni. Gdy np. reklama pojawi się dopiero po kilku sekundach nad treścią artykułu, przepchnie tekst w dół lub w bok. Problem jest jeszcze większy, jeśli reklamy mają zmienne rozmiary. [4]
• Dynamiczne pojawianie się treści po załadowaniu strony – rozszerzane sekcje (np. tzw. akordeony), wyskakujące powiadomienia, bannery cookies pojawiające się na górze czy moduły „więcej artykułów” dokładane po pewnym czasie od załadowania strony mogą powodować wysoki CLS, o ile dodają się one, bez wcześniejszego zarezerwowania miejsca. [4]
• Wczytywanie fontów webowych – stosowanie niestandardowych fontów może powodować efekt FOIT (Flash of Invisible Text) lub FOUT (Flash of Unstyled Text). Przeglądarka najpierw wyświetla tekst fontem zastępczym (lub chwilowo wcale), a po pobraniu fontu właściwego tekst zostaje przestylowany. Jeśli krój pisma różni się metrykami (np. szerokością znaków, wysokością linii) od fontu zastępczego, całe akapity mogą się przemieszczać lub zmieniać swoją objętość. [4] Zwykle takie przesunięcia są niewielkie (zwłaszcza przy dobrze dobranych fontach zastępczych), ale w skrajnych przypadkach mogą istotnie pogorszyć doświadczenie użytkownika.
• Animacje i zmiany CSS wpływające na układ – niektóre animacje lub skrypty modyfikujące styl mogą wywoływać reflow, czyli ponowne przeliczenie układu strony. Gdy animacja zmienia pozycję lub rozmiar elementu, inne obiekty mogą zostać przesunięte [4]. Jeśli te zmiany następują bez interakcji użytkownika lub z opóźnieniem, będą liczyć się do CLS. Źle zaimplementowane efekty (np. rozwijanie menu, pojawianie się cieni) również mogą powodować drobne „podskoki” layoutu.

Jak poprawić CLS?

Optymalizacja CLS wcale nie musi być skomplikowana, zwłaszcza jeżeli ściśle współpracujesz z deweloperem oraz designerem i wiesz, czego unikać. 

Najważniejsze jest odpowiednie planowanie miejsca dla treści już na starcie. Dzięki temu unikniesz niespodziewanych zmian w układzie strony.  

Jak optymalizować stronę, aby poprawić CLS?

• Zawsze definiuj wymiary obrazów (oraz filmów, iframe itp.) – najprostszym i zarazem bardzo skutecznym sposobem na eliminację przesunięć jest podanie atrybutów width i height dla elementów obrazów w HTML lub CSS. Dzięki temu przeglądarka przed pobraniem obrazka wie, jak duży obszar ma dla niego zarezerwować. [2] Jeśli strona korzysta z responsive images, warto zapewnić spójny aspect-ratio dla wszystkich wersji obrazu – to umożliwi podanie atrybutów wymiarów i zachowanie właściwego miejsca niezależnie od załadowanej rozdzielczości. 
• Rezerwuj przestrzeń dla reklam i osadzonych elementów – reklamy i dynamiczne widgety to częsty winowajca wysokiego CLS, dlatego trzeba zawczasu zaplanować dla nich miejsce. Najlepiej ustawić placeholdery o znanych wymiarach (np. kontener o minimalnej wysokości) tam, gdzie wczytywane są reklamy czy np. posty z social media [4]. Nawet jeśli reklama się nie pojawi lub będzie mniejsza od maksymalnego przewidywanego rozmiaru, to lepiej, żeby pozostała tam pusta przestrzeń, niż aby obraz skakał. Deweloperzy często stosują strategię podawania największego możliwego rozmiaru reklamy na danej pozycji (na podstawie historycznych danych lub specyfikacji sieci reklamowej), a jeśli trafi się mniejsza – po prostu zostaje trochę wolnego miejsca. [4] Lepiej nie usuwaj całkowicie zarezerwowanego kontenera (np. gdy reklama nie przyjdzie) – zniknięcie pustego bloku też powoduje taki sam layout shift, jak gdyby pojawił się nowy element. 
• Unikaj nagłego dodawania nowych elementów bez interakcji użytkownika – wszelkie moduły typu „polecane artykuły”, powiadomienia czy okienka wyskakujące nie powinny niespodziewanie pojawiać się na ekranie i spychać reszty zawartości. Jeśli muszą się pojawić automatycznie, rozważ zaprojektowanie ich jako nakładki (overlay) na istniejący układ, albo umieść je na dole strony, gdzie ewentualne przesunięcie nie zaburzy czytania. 
• Optymalizuj wczytywanie fontów webowych – za pomocą <link rel=”preload”> możesz załadować font jeszcze przed resztą zasobów, aby skrócić czas oczekiwania na właściwy krój pisma. To redukuje ryzyko wystąpienia FOIT/FOUT. [4] Możesz też ustawić font-display: optional (lub swap) w @font-face, aby przeglądarka nie czekała z wyświetleniem tekstu – jeżeli font nie zdąży się załadować na czas pierwszego renderu, użyty zostanie na stałe font zastępczy. [4] Dzięki temu użytkownik od razu widzi treść, a ewentualna późniejsza zmiana jest mniej zauważalna. [2]
• Stosuj przyjazne dla layoutu techniki animacji – jeśli na stronie używasz animacji lub interakcji zmieniających układ, zadbaj, by nie wprowadzały one niepotrzebnych przesunięć. [2] Zasadą jest unikanie animowania właściwości, które wpływają na położenie innych elementów. Zamiast zmieniać bezpośrednio wartości top, left, width czy height, lepiej używać transformacji CSS, które odbywają się na poziomie kompozycji grafiki (np. transform: translate do przesunięcia elementu bez wpływu na resztę układu). [4]. Podobnie, animacje oparte o opacity czy transform nie wywołują reflow, więc nie zwiększają CLS. 
• Zadbaj o kwalifikację strony do bufora wstecznego i do przodu (bfcache) – pamięć podręczna stanu strony pozwala przeglądarce przechować w pełni załadowaną stronę i natychmiast ją odtworzyć przy ponownej wizycie. Dzięki temu użytkownik nie doświadcza ponownych przesunięć układu podczas nawigacji „wstecz” lub „dalej”. Sprawdź, czy Twoja witryna spełnia wymagania korzystania z bfcache i wyeliminuj problemy, które mogą blokować tę funkcję – to prosta metoda na ograniczenie wpływu CLS w typowych scenariuszach przeglądania. [2]

Narzędzia do pomiaru i diagnostyki CLS – jak sprawdzić wynik CLS?

Monitorowanie i poprawa CLS byłaby trudna bez odpowiednich narzędzi. Jakich?

• PageSpeed Insights – to darmowe narzędzie od Google, które raportuje wydajność strony zarówno na podstawie danych lab (symulacja w kontrolowanych warunkach), jak i danych field z rzeczywistych użytkowań strony. W raporcie PSI znajdziesz wartość CLS w sekcji Core Web Vitals opartej o prawdziwe doświadczenia użytkowników z ostatnich 28 dni oraz osobno w sekcji diagnostycznej Lighthouse (dla jednorazowego ładowania testowego). 

Nie wiesz, jak wykonać taki test? W Harbingers możemy przygotować dla Ciebie test Page Speed Insights oraz CWV. 

• Google Search Console – w tym narzędziu znajdziesz raport „Podstawowe wskaźniki internetowe”, gdzie ujęte są adresy URL pogrupowane według statusu CWV (dobre, wymagające poprawy, słabe) osobno dla urządzeń mobilnych i desktop. Raport opiera się na prawdziwych danych użytkowników (CrUX) i odświeża się z pewnym opóźnieniem (dane z 28 dni), więc warto po wprowadzeniu poprawek cierpliwie czekać na aktualizację statusu.
• Chrome DevTools (Performance) – przeglądarka Chrome udostępnia świetne narzędzia do debuggowania layout shifts. Po otwarciu DevTools (F12) i przejściu do zakładki Performance, możesz nagrać profil ładowania strony. W sekcji wyników zobaczysz wykres z zaznaczonymi fioletowymi słupkami i diamentami, które oznaczają wykryte layout shifty i ich skumulowane grupy [5]. Co więcej, klikając w konkretny „diament” na osi czasu, DevTools podświetli na stronie elementy, które się przemieściły (na ekranie migną czerwone obramowania w miejscach przesunięć). W panelu Summary zobaczysz zaś szczegóły – wartość tego przesunięcia, czas wystąpienia oraz listę elementów, które zmieniły położenie. [5] To potężna pomoc w namierzeniu dokładnej przyczyny – np. dowiesz się, że to konkretny element przesunął się o X pikseli z powodu doładowania jakiejś treści.

Podsumowanie

Optymalizacja Cumulative Layout Shift sprowadza się do utrzymania stabilności wizualnej strony. Dbając o web usability przyczyniasz się do poprawy pozycji rankingowej swojej strony w Google. Aby osiągnąć niski wynik CLS (czyli pozytywny), odpowiednio planuj przestrzeń na stronie już na etapie jej projektowania. Wykonuj testy i monitoruj na bieżąco wskaźniki Core Web Vitals, aby Twoja strona była przyjemna w odbiorze dla użytkownika i zyskiwała wysokie pozycje w wynikach wyszukiwania. 

Źródła:

[1] web.dev

[2] web.dev

[3] support.google.com

[4] nitropack.io

[5] web.dev