Cumulative Layout Shift (CLS) – czym jest i jakie ma znaczenie?

Na doświadczenie użytkownika, odwiedzającego Twoją stronę internetową wpływa wiele elementów. Należą do nich również niezaplanowane sytuacje, takie jak przesuwanie się treści na stronie podczas ładowania się danej witryny. To, jak bardzo zmienia się układ elementów na stronie mierzy natomiast CLS.

Z tego artykułu dowiesz się:

• Czym jest CLS?
• Jakie czynniki wpływają na wartość wskaźnika CLS?
• Ile powinna wynosić poprawna wartość Cumulative Layout Shift?
• Jak mierzyć CLS?
• Jak optymalizować CLS?
• Jakie znaczenie ma wskaźnik CLS?

CLS – definicja

CLS, czyli Cumulative Layout Shift, to element składowy Core Web Vitals, mierzący jak bardzo układ strony zmienia się nieoczekiwanie podczas ładowania elementów, w trakcie przeglądania witryny przez użytkowników. Do przesunięć strony dochodzi, gdy zawartość witryny ładuje się z różnymi prędkościami, co powoduje zmianę układu oraz ma wpływ na finalną wersję, jaką widzi odbiorca.

Cumulative Layout Shift (CLS) to wskaźnik, informujący o tym, w jakim stopniu zmienia się układ strony podczas ładowania się jej poszczególnych elementów.

Definicja Cumulative Layout Shift

Potencjalnymi przyczynami CLS mogą być m.in. długo ładujące się reklamy, pojawiające się filmy o różnym rozmiarze lub pojawiające się elementy DOM (Document Object Model), które spychają treść w dół, co negatywnie wpływa na doświadczenia użytkownika.

Czynniki wpływające na wartość wskaźnika CLS

Google podaje kilka kluczowych wartości, które mają bezpośredni wpływ na wskaźnik CLS. Wśród nich możemy wyszczególnić m.in.:

• obrazy, które nie posiadają określonych wymiarów – mogą one ulec przesuwaniu podczas przeglądania strony oraz zmienić swoją wielkość,
• reklamy oraz elementy osadzone, które nie mają określonych wymiarów w DOM,
• dynamicznie tworzona zawartość,
• czcionki ROIT/FOUT – powodują miganie niewidocznego i niestylizowanego tekstu i są ładowane po utworzeniu strony,
• Strony trzecie, które muszą czekać na odpowiedzi sieciowe w celu aktualizacji DOM.

Nie jest to jednak regułą, zdarzają się też podobne sytuacje, które nie mają wpływu na Cumulative Layout Shift jak np.:

• zmiana układu zainicjowana przez użytkownika, która nie jest wliczana do wartości CLS,
• przyciski uruchamiające animację – mieszczą się w oknie wykluczenia wejścia wynoszącym 500 ms po wprowadzeniu danych przez użytkownika, dzięki czemu kliknięcie ich nie spowoduje zmiany układu, nawet w sytuacji, gdy ma ona na za zadanie wewnętrzną nawigację strony,
• nie wszystkie animacje muszą być odpowiedzialne za wysoki wskaźnik Cumulative Layout Shift, do takich zaliczamy wszelkie animacje transformacji stworzone przy pomocy CSS,
• jedynie ruchy, które występują powyżej zagięcia mają wpływ na wartość CLS, wszelkie przesunięcia poniżej nie rzutują na wynik Cumulative Layout Shift.

Poprawna wartość Cumulative Layout Shift

Wysoki wskaźnik CLS sam w sobie powoduje negatywne doświadczenia odwiedzających, dlatego też powinien być on jak najmniejszy. Jego wartość powinna wynosić maksymalnie 0,1, natomiast wynik powyżej 0,25 to już niedopuszczalny błąd. Wartość pośrednia wymaga niezwłocznej poprawy i optymalizacji wyniku CLS.

Mierzenie CLS

Do obliczenia wartości Cumulative Layout Shift niezbędne są dwie zmienne, czyli “frakcja wpływu” oraz “frakcja odległości” Frakcja wpływu określa ilość miejsca, jakie niestabilny element zajmuje w rzeczywistych wymiarach ekranu. Natomiast frakcja odległości to, na jaką strona przesuwa się od pozycji pierwotnej do końcowej. Pomiaru wartości CLS na swojej witrynie możesz dokonać natomiast na dwa sposoby.

Pierwszy z nich to skorzystanie z pomocy narzędzia Page Speed Insights od Google, gdzie w prosty sposób możesz sprawdzić wydajność swojej witryny za pomocą przycisku „Analizuj”. Narzędzie to umożliwia sprawdzenie produktywności strony na urządzeniach mobilnych oraz stacjonarnych, które można analizować w szybki i prosty sposób, porównując je ze sobą.

Drugą opcją jest Lighthouse Tools, czyli propozycja od Chrome, która umożliwi sprawdzenie CLS za pomocą przeglądarki. Aby móc dostać się do danych należy odnaleźć trzy kropki w rogu okna przeglądarki, a następnie przejść do „Więcej narzędzi” oraz „Narzędzia dla programistów”. Kolejny krok to komenda „Generuj raport”, dzięki czemu otrzymasz wynik, który może nieco różnić się od tego z Page Speed. Dzieje się tak, ponieważ Lighthouse Tools dysponuje znacznie bardziej szczegółowymi wynikami, do których dołącza dokładny audyt, na podstawie którego dostajemy czarno na białym, nad czym należy jeszcze popracować oraz co poprawić.

Optymalizacja CLS

Istnieje kilka sposobów na to, aby poprawić wartość CLS Score w witrynie. Poniżej przedstawiamy kilka sprawdzonych metod na to, w jaki sposób najlepiej zoptymalizować Cumulative Layout Shift:

• Wykorzystaj system zarządzania treścią (CMS), który jest zintegrowany z narzędziami diagnostycznymi. Dzięki temu będziesz w stanie wykryć wszelkie problemy jeszcze przed uruchomieniem witryny.
• Skorzystaj z Google Publisher Tag, który pomoże Ci w zrozumieniu tego, w jaki sposób reklamy mogą wpływać na Twoją witrynę oraz wskaże przydatne wskazówki na to jak zarezerwować odpowiednią ilość miejsca na nie, by nie wpływać negatywnie na wynik CLS.
• Określ konkretny rozmiar filmów oraz zdjęć, dzięki czemu przeglądarka otrzyma dokładne informacje odnośnie tego, jaką ilość miejsca ma do dyspozycji na Twoje media w witrynie.
• Negatywny wpływ na CLS mają jedynie nieoczekiwane przesunięcia układu. Zaplanuj więc różne “oczekiwane zmiany układu”, wychodząc naprzeciw oczekiwaniom swoich odbiorców. Mogą to być przejścia i animacje typu “Czytaj dalej” albo “Rozwiń temat”, które dają użytkownikom możliwość wyboru dalszych działań oraz pozwalają witrynie na załadowanie jedynie części treści, co jest znacznie szybsze i korzystnie wpływa na doświadczenia odwiedzających stronę.

Znaczenie wskaźnika CLS

Wartość CLS jest istotna z dwóch powodów, które wzajemnie na siebie wpływają – rankingu w wyszukiwarkach oraz doświadczeń użytkowników (User Experience). Ranking Google hierarchizuje strony na podstawie ich wydajności, dlatego tak ważna jest właściwa optymalizacja witryny pod kątem zmian układu, która zapewniaj odwiedzającym pozytywne wrażenia. Zadowoleni odbiorcy przekładają się na wyższą pozycję w Google, co z kolei wpływa na generowanie ruchu przychodzącego. Google posiada ściśle określone zasady działania Core Web Vitals, które jeśli nie są przestrzegane, grożą spadkiem pozycji witryny w rankingu. Jeśli więc współczynnik CLS jest niewłaściwy, witryna zostanie „ukarana” przez przeglądarkę, ponieważ nie może kierować użytkowników na stronę, która nie działa poprawnie.

Zadowolenie odwiedzających również ma znaczenie, a ich wymagania są wysokie. Pojawiające się reklamy zasłaniające treść i uniemożliwiające dotarcie do niezbędnych informacji, często są powodem porzucenia witryny na rzecz innej, która będzie bardziej czytelna i przejrzysta. Nawet jeśli użytkownicy pozostaną na stronie, CLS również będzie mógł się zwiększyć poprzez problemy z użytecznością tj.: przypadkowe przejście na inną witrynę przez kliknięcie pojawiającego się baneru, przedwczesne wylogowanie się lub ominięcie części strony. Problem ten szczególnie nasila się podczas użytkowania smartfonów, gdzie niewielki ekran znacznie ogranicza przestrzeń, a dodatkowe okna kumulują się, co wpływa negatywnie na doświadczenie odbiorców. Działania optymalizacyjne pod kątem CLS są więc niezbędne, by zapewnić odpowiedni komfort użytkowników, a co za tym idzie – również wydajność strony.