Cumulative Layout Shift (CLS)
Cumulative Layout Shift (CLS) to jeden z kluczowych wskaźników Core Web Vitals. Pokazuje, jak bardzo strona internetowa „skacze” podczas ładowania i interakcji. Wynik CLS to suma największych, nieoczekiwanych przesunięć elementów układu. Te przesunięcia pojawiają się w trakcie całego życia strony. Wysoki wynik oznacza, że użytkownik widzi niestabilny układ. Treści potrafią nagle zmienić pozycję – nawet jeśli niczego nie klika.
Czym jest Cumulative Layout Shift (CLS)
Layout shift, czyli przesunięcie układu, pojawia się, gdy element strony zmienia swoje położenie pomiędzy kolejnymi klatkami renderowania. Dzieje się to, gdy użytkownik nie wykonuje żadnej akcji. CLS rejestruje najwyższy wynik w ramach tzw. okna sesji. Takie okno to seria przesunięć, gdzie przerwa pomiędzy zdarzeniami nie przekracza 1 sekundy. Cały ciąg trwa maksymalnie 5 sekund. To właśnie te krótkie sekwencje mają największy wpływ na odbiór strony.
Jak oblicza się wynik CLS
Każde przesunięcie liczy się według wzoru: layout shift score = impact fraction × distance fraction. Impact fraction mówi, jaką część viewportu zajmuje element przed i po przesunięciu. Z kolei distance fraction pokazuje, o ile procent wysokości lub szerokości viewportu dany element się przesunął. Przykład: jeśli element zajmuje 50% widocznego obszaru i przesuwa się o 20% jego wysokości, wynik to 0,5 × 0,2 = 0,1.
Progi i interpretacja wartości CLS
Google wyznaczył trzy progi oceny CLS. Wynik do 0,1 jest dobry. Zakres od 0,1 do 0,25 sugeruje, że warto wdrożyć poprawki. Wynik powyżej 0,25 jasno wskazuje na poważne problemy ze stabilnością układu. W takiej sytuacji optymalizacja jest konieczna.
Ocena strony bierze pod uwagę 75. percentyl wszystkich ładowań, analizowanych oddzielnie dla urządzeń mobilnych i desktopowych. Strona otrzymuje ocenę tylko wtedy, gdy co najmniej trzy czwarte sesji mieści się w wyznaczonym przedziale. Dlaczego taki próg? Pojedynczy incydent nie powinien decydować o całościowej ocenie.
Najczęstsze przyczyny wysokiego CLS
- Obrazy i wideo bez zadeklarowanych atrybutów width i height. Przeglądarka nie wie, ile miejsca zarezerwować, zanim plik się załaduje.
- Reklamy oraz banery ładowane dynamicznie nad istniejącą treścią. To klasyczny powód nieoczekiwanych przesunięć.
- Webowe czcionki, które wywołują FOIT lub FOUT. Zmieniają one wysokość bloków tekstowych po załadowaniu fontu.
- Asynchroniczne dodawanie elementów DOM powyżej widocznej części strony. Szczególnie jeśli pojawiają się nagle i przesuwają resztę treści w dół.
Jak mierzyć i poprawić CLS
Do analizy CLS możesz wybrać Google PageSpeed Insights, Lighthouse, Chrome DevTools, Google Search Console lub Web Vitals Extension. Lighthouse w trybie laboratoryjnym pozwala zidentyfikować elementy powodujące przesunięcia. Raport Layout Shift Culprits wyłapuje winowajców precyzyjnie. To Twoje okno na konkretne problemy.
Najprostszy sposób na poprawę? Dodaj atrybuty wymiarów do obrazów i wideo. Przy dynamicznych elementach (np. reklamy) rezerwuj miejsce w CSS, zanim zostaną załadowane. Skeleton loading utrzymuje wymiary bloku, zanim pojawi się właściwa treść. To szczególnie skuteczne przy dłuższym ładowaniu. Jeśli stosujesz animacje, używaj właściwości CSS transform – nie powoduje ona layout shift.
Najczęściej zadawane pytania
Lighthouse pokazuje skumulowany wynik przesunięć układu podczas symulowanego ładowania strony w środowisku laboratoryjnym. Nie uwzględnia rzeczywistych danych użytkowników. To test warunków kontrolowanych.
Wartość CLS równa lub niższa niż 0,1 to wynik pozytywny. Jeśli przekracza 0,25, strona wymaga pilnej optymalizacji. Nie warto tego odkładać.
CLS to jeden z sygnałów Page Experience, które algorytm Google bierze pod uwagę przy ustalaniu pozycji strony w wynikach wyszukiwania. Stabilny układ zwiększa szanse na wyższe miejsce.
Najczęściej wystarcza dodanie wymiarów do obrazów, opóźnienie ładowania wtyczek reklamowych i rezerwacja miejsca na dynamiczne elementy przez CSS. Proste działania, a efekt widoczny od razu.
