CLS – jak naprawić Cumulative Layout Shift na stronie

CLS (Cumulative Layout Shift) mierzy stabilność wizualna strony – czyli jak bardzo elementy na stronie "przeskakują" podczas ładowania. Klikasz przycisk, a w tym momencie strona się przesuwa i trafiasz w reklamę. Właśnie to mierzy CLS.

Progi Google:
- Dobry: < 0,1
- Wymaga poprawy: 0,1–0,25
- Zły: > 0,25

CLS jest jednym z trzech Core Web Vitals – czynników rankingowych Google od 2021 roku (obok LCP i INP). Strony ze złym CLS tracą pozycje w wyszukiwarce, szczególnie na mobile.

Zmiana definicji CLS w 2024 – session windows

Ważna zmiana, o której mało kto pisze. Do 2024 roku CLS mierzył łączne przesunięcie przez cały cykl ładowania strony. Teraz Google stosuje metodę "session windows" – mierzy najgorszy 5-sekundowy fragment sesji z 1-sekundowa przerwą między przesunięciami. W praktyce oznacza to, ze pojedyncze duże przesunięcie (np. Banner reklamowy ładujący po 8 sekundach) może mieć większy wpływ na CLS niż kilka drobnych przesunięć rozłożonych w czasie.

Obrazy bez atrybutów width i height

To przyczyna numer jeden. Przegladarka nie wie, ile miejsca zarezerwować na obraz, więc treść pod nim "podskakuje" po załadowaniu grafiki. Dotyczy zarówno zdjęć produktowych, jak i banerów, ikon i tła.

Dynamicznie ładowane reklamy i banery

Reklamy AdSense, bannery afiliacyjne, popupy – wszystko, co wstrzykuje się do DOM po załadowaniu strony. Jeśli reklama nie ma zarezerwowanego miejsca, popycha resztę treści w dół.

Web fonty i FOIT/FOUT

Kiedy przegladarka pobiera niestandardową czcionkę, tekst może się wyświetlić w foncie systemowym (FOUT – Flash of Unstyled Text) lub być niewidoczny do momentu załadowania (FOIT – Flash of Invisible Text). Oba zjawiska powodują przesunięcie layoutu.

Dynamicznie wstrzykiwany content

Cookie banery, chat widgety, powiadomienia push, pop-upy z zapisem na newsletter. Wszystko, co pojawia się po załadowaniu strony i "wypycha" istniejaca treść.

Lazy loading zle zaimplementowany

Lazy loading obrazów to dobra praktyka (oszczędza transfer), ale jeśli obrazy poniżej foldu nie mają zdefiniowanych wymiarów, przeladarka musi je "zgadywać". Efekt – przesunięcie layoutu w momencie ładowania obrazu.

Iframes i embedy bez wymiarów

Osadzone filmy YouTube, mapy Google, posty z social media – jeśli nie mają zdefiniowanego aspect-ratio lub min-height, powodują layout shift. Sprawdź też, jak wpływają na Core Web Vitals.

Dodanie width i height do obrazów

Najprostsze i najskuteczniejsze rozwiązanie. Każdy tag `` powinien mieć atrybuty width i height:

<img src="produkt.webp" width="800" height="600" alt="Opis produktu">

Przegladarka zarezerwuje miejsce na obraz jeszcze przed jego załadowaniem. Nie musisz podawać dokładnych pikseli – wystarczy proporcja (np. 4:3).

CSS aspect-ratio dla responsywnych kontenerów

Dla elementów, których wymiary zmieniają się w zależności od ekranu:

.video-container {
 aspect-ratio: 16 / 9;
 width: 100%;
}

.banner-slot {
 aspect-ratio: 728 / 90;
 min-height: 90px;
}

Aspect-ratio jest wspierany przez wszystkie nowoczesne przeglądarki od 2022 roku. Nie musisz już używać hacka z padding-bottom.

font-display: swap + preload czcionek

Dodaj `font-display: swap` do deklaracji @font-face – tekst wyświetli się od razu w foncie systemowym, a po załadowaniu niestandardowej czcionki podmieni się płynnie. Dodatkowo preloaduj najważniejsze czcionki:

<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>

@font-face {
 font-family: 'MainFont';
 src: url('/fonts/main.woff2') format('woff2');
 font-display: swap;
}

Rezerwacja miejsca na reklamy

Przed załadowaniem reklamy kontener powinien mieć zdefiniowany min-height:

.ad-slot-leaderboard {
 min-height: 90px;
 width: 100%;
 background: #f5f5f5;
}

Nawet jeśli reklama się nie załaduje, układ strony pozostanie stabilny.

Skeleton loading dla dynamicznego contentu

Zamiast wstrzykiwac treść "z niczego", wyświetl placeholder o takich samych wymiarach. Technika znana z aplikacji mobilnych – działa równie dobrze na stronach www.

Potrzebujesz audytu szybkości strony? Sprawdź naszą ofertę pozycjonowania SEO lub skontaktuj się z nami.

Elementor i Divi

Sliders, animacje wejścia, dynamic widgets – te elementy często powodują layout shift, bo ładują się asynchronicznie. Rozwiązanie: ustaw stala wysokość hero section (min-height w px lub vh), wyłącz animacje "fade in" na elementach above the fold, unikaj sliderów z różnym rozmiarem slajdów.

WooCommerce

Galeria produktów (swiper/lightbox) bez zdefiniowanych wymiarów to klasyczne źródło CLS. Podobnie warianty produktu zmieniające cenę i opis – rezerwuj miejsce na najdłuższy wariant. Lazy-loaded images na stronie produktowej powinny mieć explicite width i height.

Wtyczki cache i optymalizacji

WP Rocket i LiteSpeed Cache oferują "Remove Unused CSS" i "Delay JavaScript". Te funkcje mogą pogorszyć CLS, jeśli opóźnia załadowanie CSS odpowiedzialnego za layout. Przetestuj po włączeniu – jeśli CLS wzrośnie, wyłącz opoznianie krytycznego CSS.

Motyw – hero section bez wysokości

Większość motywów WordPress nie definiuje stałej wysokości hero section. Po załadowaniu obrazu tła cala strona "przeskakuje". Poprawka: dodaj min-height do sekcji hero w CSS customizera lub w pliku functions.php.

• PageSpeed Insights (pagespeed.web.dev) – pokazuje zarówno lab data (symulacja) jak i field data (realne dane użytkowników z CrUX). Najważniejsze źródło prawdy o CLS.
• Chrome DevTools > Performance tab – nagraj sesje, znajdź dokładnie który element powoduje layout shift. Szukaj "Layout Shift" w flamegraph.
• Web Vitals Extension (Chrome) – wyświetla CLS, LCP i INP w czasie rzeczywistym podczas przeglądania strony. Świetne do szybkiego testowania po zmianach.
• Google Search Console > Core Web Vitals – raport z danymi field data dla całej witryny. Pokazuje które URL-e mają problem z CLS.
• CrUX Dashboard (Google Data Studio) – historyczne dane Core Web Vitals. Przydatne do śledzenia trendów po wdrożeniu poprawek.

1. Wszystkie obrazy mają atrybuty width i height (lub CSS aspect-ratio)
2. Reklamy i bannery mają zarezerwowane miejsce (min-height)
3. Web fonty uzywaaja font-display: swap + sa preloadowane
4. Iframes i embedy (YouTube, mapy) mają zdefiniowane wymiary
5. Cookie banner i chat widget nie przesuwają treści strony
6. Hero section ma stala wysokość (min-height)
7. Lazy loading nie dotyczy obrazów above the fold
8. Elementor/Divi sliders mają stały rozmiar konteneraa
9. WooCommerce gallery ma zdefiniowane wymiary kontenerów
10. "Remove Unused CSS" w WP Rocket/LiteSpeed nie opóźnia krytycznego CSS

Priorytet naprawy: punkty 1–3 dają największy efekt przy najmniejszym nakładzie pracy. Zacznij od nich – często to wystarczy, żeby zejść poniżej progu 0,1.

Potrzebujesz pomocy z optymalizacja Core Web Vitals? Skontaktuj się z nami – poprawiamy wydajność stron WordPress i WooCommerce.