Czytasz tekst, nagle ładuje się obraz nad nim i wszystko przesuwa się w dół. Klikasz w przycisk, który w ostatniej chwili skacze do góry i trafiasz w inny link. To właśnie takie nieoczekiwane przesunięcia układu mierzy CLS.
Co to jest CLS
Cumulative Layout Shift (CLS) to wskaźnik stabilności wizualnej strony. Mierzy, jak bardzo widoczne elementy strony zmieniają swoją pozycję podczas ładowania — i czy robią to nieoczekiwanie, bez interakcji użytkownika.
CLS należy do grupy Core Web Vitals, zestawu metryk, które Google traktuje jako sygnał jakości technicznej stron w wynikach wyszukiwania.
Jak obliczany jest wynik CLS
Każde przesunięcie elementu na stronie jest punktowane według wzoru:
Layout Shift Score = Impact Fraction × Distance Fraction
- Impact Fraction — jaki procent powierzchni ekranu był objęty przesunięciem (zarówno stara, jak i nowa pozycja elementu)
- Distance Fraction — o jaką część ekranu element się przesunął
Pojedyncze przesunięcia są sumowane w ramach “okien sesyjnych”: grup przesunięć, które nastąpiły w ciągu 5 sekund z przerwami krótszymi niż 1 sekunda między nimi. Końcowy wynik CLS strony to wynik najgorszego okna sesyjnego — nie suma wszystkich przesunięć.
Progi oceny CLS
| Wynik | Ocena |
|---|---|
| ≤ 0.1 | Dobry |
| 0.1 – 0.25 | Wymaga poprawy |
| > 0.25 | Słaby |
Cel to utrzymanie CLS poniżej 0.1.
Kiedy przesunięcie nie wpływa na CLS
Przeglądarka ignoruje przesunięcia, które nastąpiły w ciągu 500 ms od interakcji użytkownika — kliknięcia, dotknięcia lub wciśnięcia klawisza.
Rozwinięcie akordeonu po kliknięciu zmienia układ strony, ale nie jest błędem CLS. Animowane menu po dotknięciu — tak samo. CLS rejestruje wyłącznie przesunięcia nieoczekiwane, które zaskakują użytkownika bez jego działania.
Główne przyczyny CLS w WordPress
Brak wymiarów obrazów. Jeśli tag <img> nie ma atrybutów width i height, przeglądarka nie wie, ile miejsca zarezerwować przed załadowaniem pliku. Gdy obraz się załaduje — tekst poniżej przeskakuje w dół. To najczęstsza przyczyna wysokiego CLS.
Czcionki webowe. Gdy zewnętrzny font ładuje się z opóźnieniem, przeglądarka najpierw wyświetla tekst w foncie systemowym (FOUT — Flash of Unstyled Text). Gdy docelowy font się załaduje i ma inne metryki (wysokość linii, odstępy) — układ się przesuwa.
Dynamiczne reklamy i banery. Reklamy wstrzykiwane przez JavaScript po załadowaniu strony, bez zarezerwowanego miejsca w HTML, są jedną z najczęstszych przyczyn wysokiego CLS na stronach wydawniczych.
Embedy i iframe. Osadzane filmy YouTube, posty z mediów społecznościowych, formularze z zewnętrznych serwisów — jeśli mają dynamiczne wymiary, mogą przesuwać zawartość strony podczas wczytywania.
Jak poprawić CLS w WordPress
Dodaj wymiary do obrazów. WordPress od wersji 5.5 automatycznie dodaje atrybuty width i height do obrazów wstawianych przez edytor, jeśli są dostępne w bazie mediów. Dla starszych obrazów bez tych danych — warto uzupełnić ręcznie lub przez wtyczkę.
Zarezerwuj miejsce dla reklam. Jeśli strona wyświetla reklamy, stwórz kontenery z góry zdefiniowanymi rozmiarami za pomocą CSS — nawet jeśli reklama się nie załaduje, miejsce jest zarezerwowane i układ nie skacze.
Zoptymalizuj ładowanie fontów. Użyj właściwości CSS font-display: swap w połączeniu z preloadem lub preconnect dla fontów zewnętrznych. Rozważenie self-hostingu Google Fonts eliminuje zależność od zewnętrznego serwera i zmiennych czasów odpowiedzi.
Określ rozmiary dla embedów. Dla iframe z YouTube i podobnych serwisów używaj kontenerów z ustaloną proporcją (np. technika padding-top: 56.25%) lub atrybutów width i height bezpośrednio na tagu <iframe>.
Animacje CSS a CLS
Nie każda animacja wpływa na wynik CLS. To ważna różnica.
Animacje oparte na właściwościach CSS transform: translate() lub transform: scale() nie wpływają na CLS. Nie powodują ponownego przeliczenia układu strony (reflow) przez silnik przeglądarki — działają na poziomie kompozytora graficznego.
Animacje operujące na właściwościach top, left, margin, height lub width — już tak. Zmiana tych właściwości zmusza przeglądarkę do przeliczenia całego układu, co może generować przesunięcia.
CLS to nie problem serwera
CLS jest błędem struktury kodu HTML i CSS, a nie wydajności serwera. Zmiana hostingu na szybszy VPS nie poprawi CLS, jeśli obrazy nie mają zdefiniowanych wymiarów lub reklamy wskakują bez zarezerwowanego miejsca.
Żeby diagnozować CLS, użyj zakładki Core Web Vitals w Chrome DevTools (panel Performance) lub PageSpeed Insights — oba narzędzia wskazują konkretne elementy odpowiedzialne za przesunięcia.
CLS a inne metryki
CLS mierzy stabilność wizualną — coś zupełnie innego niż prędkość ładowania mierzona przez LCP i FCP. Strona może ładować się szybko i mieć wysoki CLS. I odwrotnie: wolna strona może mieć zerowy CLS.