Jak naprawić CLS (Cumulative Layout Shift) — praktyczny przewodnik krok po kroku [2026]

Aby naprawić CLS (Cumulative Layout Shift), musisz usunąć źródła nieoczekiwanych przesunięć układu: nadać stałe wymiary obrazom i reklamom, zarezerwować miejsce na elementy dynamiczne, poprawić ładowanie fontów i ograniczyć późne wstrzykiwanie treści przez JavaScript. Najszybsza droga to: zdiagnozować problem w PageSpeed Insights i DevTools, wdrożyć poprawki w krytycznych sekcjach strony, a potem potwierdzić efekt na danych rzeczywistych użytkowników.

Dlaczego naprawa CLS jest ważna

CLS to jeden z Core Web Vitals Google i mierzy stabilność wizualną strony. Mówiąc prosto: jeśli użytkownik chce kliknąć przycisk, a w tym momencie wszystko „skacze”, rośnie frustracja, spada konwersja i cierpi SEO.

Google wskazuje, że dobry wynik CLS to maksymalnie 0,1, wynik od 0,1 do 0,25 wymaga poprawy, a powyżej 0,25 jest słaby. To nie jest kosmetyka. To sygnał jakości doświadczenia użytkownika, który wpływa na odbiór całej marki.

Według Google strony spełniające progi Core Web Vitals mają większą szansę dostarczać lepsze doświadczenie użytkownika, a to przekłada się na zachowanie odbiorców i efektywność kanału organicznego. Semrush regularnie pokazuje w analizach technicznych, że problemy z layout shift należą do najczęstszych błędów UX na stronach contentowych i e-commerce.

Dołóż do tego szerszy kontekst biznesowy. Według Gartner do 2026 roku 25% ruchu z tradycyjnych wyszukiwarek może przejść do rozwiązań AI. To oznacza, że strony muszą być nie tylko widoczne, ale też bezbłędne technicznie, bo jakość doświadczenia coraz częściej decyduje o tym, czy użytkownik zostanie. McKinsey wskazuje z kolei, że firmy poprawiające customer experience potrafią zwiększać przychody i obniżać koszty obsługi — a stabilność strony to podstawowy element takiego doświadczenia.

Jak naprawić CLS krok po kroku

Aby naprawić CLS skutecznie, wykonaj następujące kroki:

1. Zmierz CLS w danych laboratoryjnych i rzeczywistych

Zacznij od PageSpeed Insights, Lighthouse i raportu Core Web Vitals w Google Search Console. Nie opieraj się tylko na jednym pomiarze, bo Lighthouse pokaże problem w teście, ale dopiero dane rzeczywiste powiedzą Ci, czy użytkownicy naprawdę cierpią przez przesunięcia układu.

W PageSpeed Insights sprawdź sekcję „Unikaj dużych przesunięć układu” oraz listę elementów powodujących CLS. Jeśli problem dotyczy tylko mobile, nie poprawiaj w ciemno wersji desktopowej — napraw dokładnie to środowisko, w którym błąd występuje.

2. Ustaw width i height dla obrazów, wideo i iframe

To najprostsza i najczęściej pomijana poprawka. Każdy obraz, embed, film lub iframe powinien mieć zdefiniowane wymiary albo przynajmniej proporcje przez CSS, tak aby przeglądarka mogła zarezerwować miejsce jeszcze przed załadowaniem zasobu.

Jeśli używasz responsywnych obrazów, dodaj atrybuty width i height zgodne z natywnym rozmiarem pliku, a skalowanie zostaw CSS. Dzięki temu layout nie będzie „dopiero zgadywał”, ile miejsca ma przeznaczyć na grafikę.

3. Zarezerwuj stałą przestrzeń dla reklam, bannerów i widgetów

Reklamy display, boksy afiliacyjne, pop-upy, sticky bary i widżety opinii to klasyczne źródła wysokiego CLS. Jeśli taki element ładuje się później i wpycha treść niżej, użytkownik od razu odczuje problem.

Zrób to praktycznie: ustaw kontener z minimalną lub stałą wysokością dla slotów reklamowych i komponentów zewnętrznych. Nawet jeśli reklama się nie załaduje, lepiej zostawić pustą przestrzeń niż doprowadzić do skoku całego ekranu.

4. Nie wstrzykuj treści nad już widoczną zawartością

Banery cookies, komunikaty promocyjne, paski zniżkowe i formularze newslettera powinny być projektowane tak, aby nie pojawiały się nagle nad nagłówkiem lub treścią. Jeśli musisz je pokazać, użyj nakładki overlay albo zarezerwuj dla nich miejsce od początku renderowania.

Szczególnie uważaj na SPA i frameworki JS, które po hydracji dociągają komponenty i zmieniają strukturę DOM. Jeśli zawartość pojawia się po czasie, a wcześniej nie było dla niej miejsca, CLS rośnie błyskawicznie.

5. Napraw problem z fontami i miganiem tekstu

Webfonty często powodują przesunięcia, gdy po załadowaniu zmieniają szerokość lub wysokość tekstu. Ustaw font-display: swap lub optional, preloaduj kluczowe fonty i dobierz fallback jak najbardziej zbliżony metrycznie do fontu docelowego.

Jeśli po podmianie fontu nagłówki zmieniają kilka linii tekstu na inną liczbę wierszy, użytkownik zobaczy wyraźne przeskoki. W praktyce czasem lepiej użyć jednego dobrze zoptymalizowanego fontu niż trzech ozdobnych rodzin.

6. Sprawdź komponenty ładowane przez JavaScript

Karuzele, sekcje „produkty podobne”, oceny, recenzje, liczniki i personalizacja często dociągają dane po wyrenderowaniu strony. Jeśli wysokość komponentu zmienia się po załadowaniu danych, to klasyczny layout shift.

Rozwiązanie jest proste: dodaj skeletony lub placeholdery o tej samej wysokości co finalny komponent. Nie pokazuj małego pustego pudełka, które po chwili rozpycha całą sekcję — pokaż od razu kontener w docelowym rozmiarze.

7. Ustabilizuj sekcję hero i elementy above the fold

Najbardziej kosztowny CLS dzieje się zwykle na górze strony, bo to tam użytkownik patrzy i klika najwcześniej. Hero image, H1, CTA, wyszukiwarka, formularz leadowy i menu muszą mieć przewidywalny układ od pierwszego renderu.

Jeśli nad foldem używasz slidera, testów A/B albo dynamicznej personalizacji, najpierw upewnij się, że każdy wariant ma tę samą wysokość. Inaczej nawet dobrze wyglądający eksperyment będzie niszczył UX i wynik CWV.

8. Zweryfikuj poprawki na urządzeniach mobilnych

CLS często wygląda gorzej na mobile niż na desktopie, bo ekran jest węższy, tekst szybciej się zawija, a reklamy i sticky elementy zajmują większą część viewportu. Testuj na realnych urządzeniach, nie tylko w responsywnym podglądzie przeglądarki.

Po wdrożeniu zmian wróć do Search Console i monitoruj dane przez co najmniej 28 dni, bo tyle trwa cykl raportowania dla Core Web Vitals. Dopiero wtedy zobaczysz, czy poprawa z laboratorium przełożyła się na realnych użytkowników.

Narzędzia potrzebne do naprawy CLS

Najczęstsze błędy przy naprawie CLS

• Naprawianie tylko wyniku z Lighthouse bez sprawdzania danych rzeczywistych.
• Brak wymiarów obrazów, iframe i boxów reklamowych.
• Dodawanie bannerów nad treścią bez rezerwacji miejsca.
• Ignorowanie fontów i ich wpływu na układ tekstu.
• Wstrzykiwanie komponentów JS po renderze bez placeholderów.
• Testowanie wyłącznie desktopu, mimo że problem dotyczy mobile.
• Wdrażanie zmian bez monitoringu regresji po kolejnych release’ach.

Checklist: co najczęściej daje najszybszy efekt

• Dodaj width i height do wszystkich obrazów.
• Ustaw aspect-ratio dla mediów responsywnych.
• Zarezerwuj stałą wysokość dla reklam i widgetów.
• Nie doklejaj bannerów nad treścią po załadowaniu strony.
• Preloaduj kluczowe fonty i ustaw font-display.
• Dodaj skeletony dla komponentów renderowanych przez JS.
• Sprawdź hero, menu i CTA na mobile.

Podsumowanie

Naprawa CLS nie polega na „optymalizacji ogólnej”, tylko na usunięciu kilku konkretnych przyczyn przesuwania layoutu. Jeśli zaczniesz od pomiaru, potem poprawisz wymiary mediów, sloty dynamiczne, fonty i komponenty JS, zwykle zobaczysz efekt szybciej, niż myślisz.

Najważniejsze: nie celuj w perfekcję na papierze, tylko w stabilny ekran dla użytkownika. To właśnie ten detal bardzo często decyduje, czy kliknie, kupi i zostanie na stronie.

Jeśli chcesz, możemy w CCZ Group przeanalizować Twoją stronę pod kątem CLS, Core Web Vitals i realnych strat konwersji, a potem przygotować listę poprawek do wdrożenia przez Twój zespół lub wdrożyć je razem z Tobą.

FAQ

Jaki wynik CLS jest dobry?

Dobry wynik CLS to 0,1 lub mniej. Przedział od 0,1 do 0,25 wymaga poprawy, a wynik powyżej 0,25 oznacza słabą stabilność wizualną strony.

Co najczęściej powoduje wysoki CLS?

Najczęstsze przyczyny to obrazy bez zdefiniowanych wymiarów, reklamy i widgety ładowane bez rezerwacji miejsca, fonty zmieniające układ tekstu oraz treści wstrzykiwane przez JavaScript po renderowaniu strony.

Czy CLS wpływa na SEO?

Tak. CLS jest częścią Core Web Vitals, a więc wpływa na ocenę jakości doświadczenia strony przez Google. Sam w sobie nie zastąpi treści i autorytetu, ale przy porównywalnych stronach może być istotnym czynnikiem przewagi.

Dlaczego CLS jest gorszy na mobile?

Na urządzeniach mobilnych jest mniej miejsca, więc tekst częściej się zawija, elementy sticky zajmują większą część ekranu, a dynamiczne komponenty łatwiej wypychają treść. Dlatego wiele stron ma akceptowalny desktop i słaby mobile.

Jak szybko sprawdzić, co powoduje CLS?

Najpierw użyj PageSpeed Insights, aby zobaczyć listę potencjalnych źródeł problemu. Następnie otwórz Chrome DevTools i przeanalizuj przesunięcia layoutu klatka po klatce, aby wskazać konkretny komponent.

Rafał Krawczyk

Od 2020 roku specjalizuję się w zaawansowanym technicznym SEO, GEO i inżynierii GAN. Trenuję modele AI do automatyzacji i optymalizacji rozbudowanych platform e-commerce pod kątem GEO i RAG. Odrzucam ręczne metody – współtworzę wieloagentowe ekosystemy, które automatyzują analizę, dobór strategii i masowe wdrożenia publikacji. Zgłębiam najdrobniejsze detale Web Performance, przekładając je na schematy uczenia naszych algorytmów, by przygotować domeny klientów na erę AI Search. Wolny czas spędzam z rodziną, a hobbystycznie programuję i rozbudowuję swój inteligentny dom.