Cumulative Layout Shift (CLS)
Cumulative Layout Shift, czyli CLS, to wskaźnik mierzący stabilność wizualną strony podczas jej ładowania i użytkowania. Pokazuje, czy elementy na stronie niespodziewanie przesuwają się po ekranie, na przykład gdy tekst nagle spada niżej, przycisk zmienia położenie albo baner reklamowy wczytuje się z opóźnieniem i przepycha treść. Z punktu widzenia użytkownika taki problem jest irytujący, bo może prowadzić do przypadkowego kliknięcia w niewłaściwy element lub utrudniać czytanie strony. W SEO CLS należy do Core Web Vitals i jest analizowany razem z LCP oraz INP jako element oceny jakości doświadczenia użytkownika. Za dobry wynik CLS uznaje się wartość poniżej 0,1.
Co najczęściej powoduje wysoki Cumulative Layout Shift?
Wysoki CLS zwykle oznacza, że przeglądarka nie zna wcześniej rozmiaru ważnych elementów lub musi zmienić układ strony po ich późniejszym załadowaniu. Problem często pojawia się na stronach z dużą liczbą grafik, reklam, osadzonych materiałów, sliderów, popupów, dynamicznych modułów produktowych albo czcionek ładowanych z opóźnieniem. W praktyce na pogorszenie CLS mogą wpływać między innymi:
- obrazy i wideo bez określonych wymiarów szerokości oraz wysokości,
- reklamy, banery lub iframe’y wczytywane bez zarezerwowanego miejsca,
- dynamiczne sekcje dodawane nad już widoczną treścią,
- fonty powodujące przeskok tekstu po załadowaniu,
- popupy, paski promocyjne i komunikaty cookies przesuwające układ strony,
- nieoptymalne moduły sklepu internetowego, karuzele produktów lub elementy rekomendacji.
Dlaczego CLS warto analizować na realnych podstronach, a nie tylko na stronie głównej?
CLS może wyglądać zupełnie inaczej na różnych typach podstron, dlatego nie powinno się oceniać całego serwisu wyłącznie po stronie głównej. W sklepie internetowym problem może występować głównie na kartach produktów, gdzie późno ładują się zdjęcia, opinie, warianty, moduły dostawy albo rekomendacje. Na blogu przesunięcia mogą wynikać z banerów, osadzonych filmów, spisu treści lub reklam umieszczonych między akapitami. W serwisie usługowym przyczyną może być formularz, widget czatu, mapa, sekcja opinii albo pasek CTA. Dlatego analiza CLS powinna obejmować konkretne szablony stron, dane z PageSpeed Insights, raport Core Web Vitals w Search Console oraz obserwację zachowania strony na urządzeniach mobilnych. Dopiero wtedy można ustalić, czy problem wynika z pojedynczego modułu, globalnego szablonu, reklam, grafik czy sposobu ładowania skryptów.
