CLS skakanie layoutu — jak je wyeliminować

Skakanie layoutu, mierzone wskaźnikiem CLS, 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 mierzy niespodziewane przesunięcia elementów w trakcie całej wizyty na stronie. Wynikiem nie jest jednak suma wszystkich przesunięć, tylko najgorsza ich seria: Google grupuje przesunięcia następujące po sobie w odstępach krótszych niż sekunda w okna trwające najwyżej 5 sekund i bierze pod uwagę okno o najwyższej sumie. 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 pojedynczego przesunięcia to iloczyn tych dwóch wartości.

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

• dobry wynik — CLS do 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.

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 — różnice między nimi opisujemy w tekście jak mierzyć wydajność strony. 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?

O wyniku decyduje najgorsza seria przesunięć następujących krótko po sobie, a nie suma z całej wizyty. Jeden duży skok i kilka małych w krótkim odstępie mogą więc dać podobny wynik, natomiast drobne przesunięcia rozłożone w czasie nie sumują się. Dla użytkownika jedno duże przesunięcie tuż przy głównej treści bywa jednak bardziej dotkliwe 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ć, zajrzyj do oferty 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.