CLS: dlaczego strona skacze i jak to naprawić

Odpowiedź w trzech zdaniach

CLS (Cumulative Layout Shift, skumulowane przesunięcie układu) to wskaźnik Core Web Vitals, który mierzy, jak bardzo widoczne elementy strony przesuwają się bez udziału użytkownika. Liczy się najgorsza seria przesunięć, a nie każde drgnięcie. Najczęstsza przyczyna to brak zarezerwowanego miejsca na elementy, które ładują się później. W sklepie klient celuje w przycisk „Dodaj do koszyka”, w ostatniej chwili treść się przesuwa i palec ląduje na czymś innym.

Jak Google liczy CLS?

Każde nieoczekiwane przesunięcie dostaje wynik równy udziałowi obszaru razy udziałowi odległości, a CLS to wynik najgorszej serii takich przesunięć. Wynik jest zwykłą liczbą bez jednostki, nie mierzy się go w sekundach jak LCP i INP.

Wzór ma dwa składniki:

impact fraction: część widocznego obszaru okna (viewportu), którą zajmują niestabilne elementy przed przesunięciem i po nim,
distance fraction: największa odległość, o jaką przesunął się którykolwiek element, jako część większego wymiaru viewportu.

Weźmy obraz zajmujący połowę viewportu, który spóźniony baner spycha o jedną czwartą wysokości ekranu. Obszar przed i po przesunięciu to 3/4 viewportu, czyli impact fraction wynosi 0,75. Distance fraction to 0,25, więc wynik tego przesunięcia to 0,75 × 0,25 = 0,1875. Jedno takie zdarzenie wystarcza, żeby strona wypadła poza próg dobrego wyniku. Dobry wynik to do 0,1, słaby to powyżej 0,25, a ocenę liczy się na 75. percentylu wczytań, osobno dla telefonów i komputerów.

Czym są okna sesji?

Okno sesji to seria przesunięć, między którymi mija mniej niż 1 s, a całe okno trwa najwyżej 5 s. Przeglądarka dzieli wizytę na takie okna.

Dlatego długa strona z wieloma drobnymi przesunięciami rozłożonymi w czasie nie musi mieć złego wyniku. Starsze poradniki piszą, że CLS to suma wszystkich przesunięć podczas wizyty. Tak było do 2021 roku; według Calibre definicję zmieniono wtedy na najgorsze okno. Jeśli tekst, który czytasz, wciąż sumuje przesunięcia, jest nieaktualny.

Które przesunięcia się nie liczą?

Nie liczy się przesunięcie oczekiwane, czyli takie, które użytkownik sam wywołał. Przeglądarka pomija zmiany układu do 500 ms po kliknięciu, dotknięciu lub naciśnięciu klawisza, więc rozwijane menu czy akordeon nie psują wyniku.

Trzy uściślenia:

Przewijanie, przeciąganie i powiększanie palcami nie zwalniają przesunięcia z liczenia.
Animacje oparte na transform i opacity w ogóle nie zmieniają układu, więc nie dodają nic do wyniku.
Animowanie top, height czy margin układ zmienia, i takie ruchy się liczą.

Dlaczego strona skacze podczas ładowania?

Strona skacze, gdy przeglądarka nie zna wymiarów elementu, zanim ten się wczyta, albo gdy coś zostaje wstawione nad istniejącą treść. Poprawka prawie zawsze polega na zarezerwowaniu miejsca z góry. Poniższe przyczyny ułożyłem od najprostszej do usunięcia. Zacznij od obrazów, bo to dwa atrybuty, a nie przebudowa strony.

1. Obrazy i wideo bez wymiarów

Przeglądarka nie wie, ile miejsca zostawić, dopóki nie pobierze pliku, więc po załadowaniu obrazu spycha tekst niżej. Dodaj do znacznika atrybuty, na przykład width="1200" height="630", a przeglądarka sama wyliczy proporcje i zarezerwuje miejsce. Alternatywą jest właściwość CSS aspect-ratio, wygodna przy filmach i obrazach w kontenerach o zmiennej szerokości.

WordPress dodaje width i height do obrazów wstawianych z biblioteki mediów, jak opisuje required.com. Problem dotyczy więc obrazów spoza biblioteki mediów, na przykład wklejonych ręcznie w kodzie. Leniwe ładowanie bez placeholdera działa tak samo: obraz pojawia się dopiero przy przewijaniu i bez zarezerwowanego miejsca przesuwa to, co pod nim.

2. Reklamy i boksy partnerów

Reklama ładuje się później niż reszta strony i spycha treść w dół, gdy tylko się pojawi. Nadaj jej kontenerowi minimalną wysokość za pomocą min-height, na przykład 250 px dla typowego boksu. Jeśli reklama nie wypełni miejsca, zostanie puste pole, ale tekst nie ucieknie czytelnikowi spod oczu.

3. Embedy: mapa, film, posty z mediów społecznościowych

Element osadzony w iframe bez wymiarów rośnie po załadowaniu, więc spycha wszystko pod sobą. Ustaw proporcje kontenera, na przykład 16:9 dla filmu, żeby miejsce było zajęte, zanim treść z zewnątrz dotrze.

4. Czcionki z zewnętrznego serwera

Gdy czcionka docelowa dociera po tekście, przeglądarka podmienia font zastępczy, a to zmienia szerokość liter i łamanie wierszy. Ten efekt nazywa się FOUT (Flash of Unstyled Text, mignięcie tekstu niesformatowanego). W deklaracji font-display masz dwie drogi: optional nie podmienia fontu po fakcie i nie przesuwa tekstu. Z kolei swap w parze z size-adjust dopasowuje rozmiar fontu zastępczego do docelowego, więc podmiana jest niemal niewidoczna.

5. Banery cookies, popupy i czaty

Baner wstawiony na górze strony spycha całą treść. Ustaw go jako nakładkę z position: fixed, najlepiej przy dolnej krawędzi ekranu: taki element leży na treści i jej nie przesuwa. To samo dotyczy popupów i widżetów czatu. Na telefonie szkody są większe, bo to samo przesunięcie zajmuje tam większą część viewportu. Przy wyborze wtyczki cookies sprawdź, czy baner jest nakładką.

Jak znaleźć element, który się przesuwa?

Chrome DevTools pokazuje przesuwane obszary i nazwy elementów, więc diagnoza zajmuje kilka minut. Najpierw zmierz, potem poprawiaj. Wtyczka „przyspieszająca wszystko jednym kliknięciem” nie wskaże, co skacze.

Otwórz stronę w Chrome i naciśnij F12 albo Ctrl+Shift+I.
Kliknij menu trzech kropek w panelu DevTools i wybierz More tools, potem Rendering.
Zaznacz opcję Layout Shift Regions i przeładuj stronę. Przesuwane obszary błysną na niebiesko.
Dla pełnej listy elementów otwórz panel Performance, nagraj przeładowanie strony i znajdź ścieżkę Layout shifts. Pokaże, które elementy się przesunęły i kiedy.
Powtórz test w trybie telefonu (Ctrl+Shift+M), bo na małym ekranie skoki są większe i potrafią wyjść dopiero tam.

Elementy odpowiedzialne za przesunięcia wskazuje też raport PageSpeed Insights.

Co jeszcze stabilizuje układ przy powrocie na stronę?

Strona obsługiwana przez bfcache (back/forward cache, pamięć stron przy cofaniu) wraca po kliknięciu „wstecz” z pamięci, bez ponownego ładowania. Nie ma więc ani opóźnionych obrazów, ani spóźnionych reklam, ani przesunięć. Jest to jedyna poprawka, która nie dotyczy pojedynczego elementu, bo działa na całą stronę naraz.

Czy CLS wpływa na pozycję w Google?

Tak, jako jeden z trzech wskaźników Core Web Vitals wchodzi w sygnały doświadczenia strony, obok LCP i INP. Nie zastąpi jednak trafnej treści.

Dlaczego PageSpeed Insights pokazuje inny CLS niż dane od użytkowników?

Test laboratoryjny mierzy samo ładowanie, bez przewijania i klikania, a dane z terenu obejmują całą wizytę, więc wynik z terenu bywa wyższy. Po wprowadzeniu poprawki sprawdź efekt w raporcie PageSpeed Insights.