CLS skakanie layoutu — jak je wyeliminować

CLS skakanie layoutu to sytuacja, w której elementy na stronie przesuwają się w trakcie ładowania lub użytkowania — obraz nagle „wypycha" tekst w dół, przycisk zmienia pozycję tuż przed kliknięciem, a baner reklamowy lub powiadomienie o cookies wsuwa się i rozjeżdża cały układ. To jeden z trzech wskaźników Core Web Vitals ocenianych przez Google i jednocześnie jeden z najbardziej frustrujących problemów z punktu widzenia użytkownika — bo dotyka bezpośrednio tego, czy interfejs zachowuje się przewidywalnie.

W tym artykule wyjaśniamy, czym dokładnie jest CLS, jakie mechanizmy najczęściej powodują skakanie layoutu oraz jakie konkretne rozwiązania techniczne pozwalają je wyeliminować. Jeśli chcesz najpierw poznać szerszy kontekst Core Web Vitals, w tym LCP i INP, zajrzyj do naszego przewodnika po Core Web Vitals w 2026 roku — tutaj skupiamy się wyłącznie na CLS i praktycznych sposobach jego naprawy.

Czym jest CLS i jak się go liczy

Cumulative Layout Shift to suma wszystkich niespodziewanych przesunięć wizualnych elementów na stronie w trakcie całego jej życia — od momentu wejścia użytkownika aż do opuszczenia karty lub zamknięcia sesji. Każde przesunięcie jest oceniane na podstawie dwóch czynników: jak duży obszar ekranu zmienił położenie oraz na jaką odległość względem widocznego obszaru się przesunął. Wynik CLS to iloczyn tych dwóch wartości, zsumowany dla wszystkich przesunięć w danej sesji.

Google przyjmuje następujące progi oceny CLS, mierzone na 75. percentylu wizyt:

• dobry wynik — CLS poniżej 0,1;
• wymaga poprawy — CLS w przedziale 0,1–0,25;
• słaby wynik — CLS powyżej 0,25.

Co istotne, algorytm liczy tylko przesunięcia niespodziewane — jeśli element zmienia położenie w bezpośredniej reakcji na kliknięcie lub inną interakcję użytkownika, nie jest to traktowane jako problem. Kłopotem są przesunięcia, których użytkownik się nie spodziewa i nie wywołał: dogrywający się obraz, czcionka zamieniająca układ tekstu czy element wstrzykiwany przez skrypt reklamowy w losowym momencie.

CLS skakanie layoutu — najczęstsze przyczyny

Zdecydowana większość przypadków skakania layoutu daje się sprowadzić do kilku powtarzających się mechanizmów. Warto je znać, bo diagnoza jest zwykle szybsza niż naprawa.

Obrazy i wideo bez zarezerwowanego miejsca

To najczęstsza przyczyna. Jeśli w kodzie HTML nie ma informacji o wymiarach obrazu, przeglądarka nie wie, ile miejsca zarezerwować, zanim plik się pobierze — treść pod obrazem zaczyna się renderować od razu, a po chwili zostaje zepchnięta w dół, gdy obraz się doładuje. Dotyczy to również elementów wideo, osadzonych map i odtwarzaczy multimedialnych.

Czcionki webowe (web fonts)

Gdy strona korzysta z czcionki niestandardowej, przeglądarka najpierw renderuje tekst czcionką systemową, a po pobraniu właściwego pliku podmienia go — zjawisko znane jako FOUT (flash of unstyled text). Jeśli czcionka zastępcza i docelowa mają inną szerokość znaków, cały blok tekstu zmienia rozmiar i przesuwa elementy dookoła.

Treści wstrzykiwane dynamicznie

Banery reklamowe, widżety zgody na cookies, powiadomienia promocyjne czy elementy doładowywane przez skrypty analityczne bardzo często pojawiają się z opóźnieniem, wstawiając się w istniejący układ i przesuwając wszystko poniżej. Problem nasila się, gdy takie elementy nie mają zdefiniowanej wysokości z góry.

Animacje wykonywane na złych właściwościach CSS

Animowanie właściwości takich jak width, height, top czy margin zmienia geometrię elementu i wymusza przeliczenie układu strony klatka po klatce, co może być odczytywane jako ciągłe, drobne przesunięcia.

Treść wstawiana nad istniejącym contentem bez rezerwacji miejsca

Popularny wzorzec w e-commerce i mediach — komunikat systemowy, pasek promocyjny lub alert wstawiany na górze strony po jej wczytaniu — potrafi zepchnąć całą resztę interfejsu, jeśli miejsce na niego nie zostało przewidziane wcześniej.

Jak wyeliminować CLS — konkretne rozwiązania

Naprawa CLS w większości przypadków nie wymaga przebudowy strony, tylko konsekwentnego stosowania kilku zasad przy każdym elemencie, który może zmienić swoje wymiary.

• Zawsze podawaj wymiary obrazów i wideo — atrybuty width i height w znaczniku (lub odpowiadające im proporcje w CSS) pozwalają przeglądarce zarezerwować miejsce, zanim plik się pobierze. Więcej o technikach optymalizacji plików graficznych opisujemy w artykule o optymalizacji obrazów na stronie.
• Rezerwuj miejsce na treści dynamiczne — dla reklam, widżetów i banerów ustaw stałą minimalną wysokość kontenera, nawet zanim treść się załaduje, tak aby jej pojawienie się nie przesuwało niczego poniżej.
• Stosuj font-display: optional lub swap z rozważnie dobraną czcionką zastępczą — a najlepiej dobierz czcionkę systemową o zbliżonej szerokości znaków lub użyj font-size-adjust, aby zminimalizować różnicę w zajmowanym miejscu.
• Preloaduj kluczowe zasoby — czcionki i obraz główny (hero) warto wskazać przeglądarce z wyprzedzeniem, aby ograniczyć opóźnienie, które prowadzi do przesunięć.
• Animuj wyłącznie transform i opacity — te właściwości są obsługiwane przez kompozytor przeglądarki i nie wymuszają przeliczania układu strony, w przeciwieństwie do zmian szerokości, wysokości czy marginesów.
• Unikaj wstawiania treści powyżej istniejącego contentu — jeśli komunikat lub pasek informacyjny musi się pojawić, zaplanuj dla niego miejsce w układzie od samego początku, zamiast wstrzykiwać go później.
• Testuj na realnych warunkach sieciowych — wolniejsze łącze ujawnia przesunięcia, które na szybkim komputerze testowym są niewidoczne, bo wszystko ładuje się niemal natychmiast.

Jak mierzyć i monitorować CLS

Do diagnozy CLS warto korzystać z dwóch typów narzędzi. Dane laboratoryjne — z Lighthouse lub PageSpeed Insights — pozwalają zobaczyć, które konkretnie elementy powodują przesunięcia w kontrolowanych warunkach testowych i szybko zlokalizować przyczynę. Dane terenowe — z raportu Chrome User Experience Report, widoczne w Google Search Console w sekcji Core Web Vitals — pokazują, jak realni użytkownicy doświadczają strony na swoich urządzeniach i łączach.

Oba źródła się uzupełniają: laboratoryjne dane ułatwiają debugowanie konkretnego elementu, a dane terenowe potwierdzają, czy wprowadzona poprawka faktycznie przełożyła się na lepszy wynik u realnych odwiedzających. Warto też pamiętać, że CLS jest tylko jednym z elementów szerszego obrazu — dobra wydajność strony przekłada się bezpośrednio na zachowanie użytkowników, co szerzej opisujemy w artykule o szybkości strony a pozycji i konwersji.

Dlaczego CLS jest łatwiejszy do opanowania w architekturze headless

W klasycznym WordPressie z motywem opartym na wielu wtyczkach skakanie layoutu bywa trudne do wyeliminowania na trwałe, bo każda aktualizacja wtyczki lub dodanie nowego widżetu może wprowadzić element bez zarezerwowanego miejsca. W architekturze headless, gdzie front-end jest budowany od podstaw w Next.js, kontrola nad wymiarami obrazów, ładowaniem czcionek i kolejnością renderowania elementów jest znacznie bardziej precyzyjna — bo deweloper świadomie projektuje każdy komponent z myślą o stabilności układu, zamiast polegać na kodzie generowanym przez zewnętrzne wtyczki.

To jeden z powodów, dla których strony budowane w takim modelu utrzymują niski CLS długoterminowo, a nie tylko w momencie jednorazowego audytu.

Najczęstsze pytania

Czy CLS dotyczy tylko urządzeń mobilnych?

Nie. Skakanie layoutu może wystąpić zarówno na urządzeniach mobilnych, jak i na desktopie, choć na słabszych łączach mobilnych efekt bywa bardziej zauważalny, bo obrazy i skrypty ładują się wolniej i przesunięcia są bardziej rozciągnięte w czasie.

Czy jeden duży skok layoutu jest gorszy niż kilka małych?

CLS to suma wszystkich przesunięć w sesji, więc z punktu widzenia wyniku liczy się łączny efekt. W praktyce jednak jedno duże przesunięcie tuż przy głównej treści bywa bardziej dotkliwe dla użytkownika niż kilka drobnych zmian w mniej eksponowanych miejscach strony.

Czy reklamy zawsze pogarszają CLS?

Same reklamy nie są problemem — problemem jest brak zarezerwowanego miejsca na nie. Jeśli kontener reklamowy ma z góry ustaloną wysokość, jego pojawienie się nie powoduje przesunięcia reszty strony.

Czy poprawa CLS wymaga zmian w kodzie serwera?

Najczęściej nie — większość poprawek dotyczy front-endu: atrybutów HTML, reguł CSS i sposobu ładowania czcionek oraz skryptów. W niektórych przypadkach pomaga też zmiana kolejności ładowania zasobów, co bywa łatwiejsze do wdrożenia w architekturze headless niż w klasycznym CMS-ie.

Jak szybko widać efekty poprawy CLS w Google Search Console?

Dane terenowe w Search Console opierają się na danych z ostatnich 28 dni, więc pełny obraz poprawy pojawia się dopiero po tym okresie. Efekt w narzędziach laboratoryjnych, takich jak PageSpeed Insights, widać natychmiast po wdrożeniu zmiany.

Jeśli Twoja strona ma problem ze skakaniem layoutu i chcesz to trwale rozwiązać, a nie tylko punktowo załatać, sprawdź naszą ofertę optymalizacji Core Web Vitals — audytujemy przyczyny przesunięć i wdrażamy poprawki, które utrzymują dobry wynik długoterminowo, a nie tylko w jednym teście.