Cumulative Layout Shift, czyli CLS, to jedna z wielu miar użyteczności witryny kluczowa nie tylko z perspektywy UX, ale także SEO. Nie od dziś wiadomo przecież, że Google ocenia lepiej strony, które są sprawne pod kątem technicznym i tym samym bardziej przyjazne dla użytkownika. Z artykułu dowiesz się, jak w prosty sposób sprawdzić, czy twój CLS wymaga optymalizacji oraz co zrobić, aby go poprawić.
Co to jest CLS?
CLS – Cumulative Layout Shift jest jednym z parametrów wchodzących w skład Core Web Vitals. Wynik CLS określa poziom niekontrolowanych zmian układu strony (tzw. layout shift) podczas jej ładowania.
Innym wskaźnikiem zaliczanym do Core Web Vitals jest LCP, o którym przeczytasz więcej w tym artykule: LCP – co to jest Largest Contentful Paint i jak go poprawić?
Wynik CLS do pewnego stopnia jest wyznacznikiem poziomu użyteczności serwisu. Każdy z nas doskonale zna to uczucie, kiedy podczas ładowania strony chcemy kliknąć np. w produkt lub kategorię, ale w tej samej sekundzie pojawia się w tym miejscu górna belka z banerem reklamowym, który odsyła nas na zewnętrzną stronę. Dobry wynik CLS eliminuje tego rodzaju błędy, czego efektem jest stabilna strona, która nie zmienia układu podczas ładowania.
Odkryj narzędzia SEO i nie tylko, które pomogą w optymalizacji strony!
Jak analizować CLS?
Analizę wyniku CLS, podobnie jak w przypadku pozostałych parametrów wchodzących w skład Core Web Vitals, można przeprowadzić za pomocą DevTools bezpośrednio w przeglądarce Chrome.
Oto, jak to zrobić:
- Wchodzimy w trybie incognito na stronę, którą chcemy przeanalizować pod kątem CLS.
- Wciskamy klawisz F12.
- Klikamy w zakładkę “Lighthouse”
- Następnie wybieramy “Analyze page load”.
Kiedy warto zoptymalizować wynik CLS?
Narzędzie Google Lighthouse określa dozwolony poziom CLS – wynosi on mniej niż 0,1. Wyniki przekraczające 0,1 kwalifikują się do optymalizacji.
Źródło grafiki: web.dev
- Słaby – powyżej 0,25
- Wymaga poprawy – 0,1 – 0,25
- Dobry – poniżej 0,1
Poprawny CLS to kluczowy element w generowaniu ruchu na stronie!
Najczęstsze problemy z CLS
Do najczęstszych problemów wpływających na słaby wynik CLS można zaliczyć:
- doczytywanie się banerów promocyjnych, reklamowych i zachęcających do ściągnięcia aplikacji mobilnej w czasie ładowania witryny, często przesuwają one niemal wszystkie treści na stronie,
- brak uzupełnionych wymiarów szerokości i wysokości, dokładniej atrybutów <width> i <height> przy poszczególnych obrazach na stronie.
W wielu przypadkach, przesunięcie jednego elementu przekłada się na większość negatywnego wyniku CLS.
Dla przykładu przeanalizujmy wynik CLS jednej z ogólnodostępnych stron. Oto wynik dla listingu: https://www.x-kom.pl/g-4/c/1590-smartfony-i-telefony.html
Jak widać wynik CLS wymaga poprawy. Poniżej widzimy, że za większość tego wyniku – 0,073 odpowiada przesunięcie praktycznie całego contentu na stronie:
Patrząc na ścieżkę wczytywania listingu widzimy, że przesunięcie tego elementu powodują:
- doczytywany baner zachęcający do ściągnięcia aplikacji mobilnej,
- doczytywany baner dotyczący nowości.
Analiza CLS w narzędziu Google Lighthouse może się wydawać dosyć wymagająca. Widzimy, które elementy ulegają layout shiftom, ale brakuje informacji na temat tego, które zachowania podczas ładowania strony je powodują. Nowe narzędzie – Layout Shift Culprits, o którym wspominaliśmy w listopadowym wydaniu SEO MBridge Alert pomaga dokładniej zidentyfikować elementy generujące layout shifty.
Sprawdź 10 heurystyk J. Nielsena, aby usprawnić interakcję użytkownika!
Jak zoptymalizować CLS?
Sposobem na optymalizację słabego lub wymagającego poprawy wyniku CLS jest wcześniejsze zarezerwowanie miejsca na elementy powodujące layout shifty np. poprzez ładowanie szkieletowe.
Dodatkowo warto również uzupełnić brakujące atrybuty <width> i <height>. Google Lighthouse w sekcji “Diagnostics” wskaże nam elementy, które wymagają takiego uzupełnienia.
Rezerwacja miejsca to kluczowy etap optymalizacji CLS. To najprostszy sposób na to, aby uzyskać wynik CLS zgodny z rekomendacjami Google. W efekcie strona przestaje irytować użytkowników niespodziewanymi przesunięciami layoutu. Zyskuje także w ocenie algorytmów Google, które wyżej oceniają serwisy dbające o szybkie ładowanie i inne aspekty techniczne strony. Warto więc uwzględnić optymalizację CLS w swojej strategii SEO.
Wojciech Bębenek
SEO Expert
Przeczytaj nasz artykuł i dowiedz się, jak wybrać firmę SEO!
