CLS – jak naprawic Cumulative Layout Shift na stronie

CLS (Cumulative Layout Shift) mierzy stabilnosc wizualna strony – czyli jak bardzo elementy na stronie "przeskakuja" podczas ladowania. Klikasz przycisk, a w tym momencie strona sie przesuwa i trafiasz w reklame. Wlasnie to mierzy CLS.

Progi Google:
- Dobry: < 0,1
- Wymaga poprawy: 0,1–0,25
- Zly: > 0,25

CLS jest jednym z trzech Core Web Vitals – czynnikow rankingowych Google od 2021 roku (obok LCP i INP). Strony ze zlym CLS traca pozycje w wyszukiwarce, szczegolnie na mobile.

Zmiana definicji CLS w 2024 – session windows

Wazna zmiana, o ktorej malo kto pisze. Do 2024 roku CLS mierzyl laczne przesuniecie przez caly cykl ladowania strony. Teraz Google stosuje metode "session windows" – mierzy najgorszy 5-sekundowy fragment sesji z 1-sekundowa przerwa miedzy przesunięciami. W praktyce oznacza to, ze pojedyncze duze przesuniecie (np. Banner reklamowy ladujacy po 8 sekundach) moze miec wiekszy wplyw na CLS niz kilka drobnych przesuniec rozlozonych w czasie.

Obrazy bez atrybutow width i height

To przyczyna numer jeden. Przegladarka nie wie, ile miejsca zarezerwowac na obraz, wiec tresc pod nim "podskakuje" po zaladowaniu grafiki. Dotyczy zarowno zdjec produktowych, jak i banerow, ikon i tla.

Dynamicznie ladowane reklamy i banery

Reklamy AdSense, bannery afiliacyjne, popupy – wszystko, co wstrzykuje sie do DOM po zaladowaniu strony. Jesli reklama nie ma zarezerwowanego miejsca, popycha reszte tresci w dol.

Web fonty i FOIT/FOUT

Kiedy przegladarka pobiera niestandardowa czcionke, tekst moze sie wyswietlic w foncie systemowym (FOUT – Flash of Unstyled Text) lub byc niewidoczny do momentu zaladowania (FOIT – Flash of Invisible Text). Oba zjawiska powoduja przesuniecie layoutu.

Dynamicznie wstrzykiwany content

Cookie banery, chat widgety, powiadomienia push, pop-upy z zapisem na newsletter. Wszystko, co pojawia sie po zaladowaniu strony i "wypycha" istniejaca tresc.

Lazy loading zle zaimplementowany

Lazy loading obrazow to dobra praktyka (oszczedza transfer), ale jesli obrazy ponizej foldu nie maja zdefiniowanych wymiarow, przeladarka musi je "zgadywac". Efekt – przesuniecie layoutu w momencie ladowania obrazu.

Iframes i embedy bez wymiarow

Osadzone filmy YouTube, mapy Google, posty z social media – jesli nie maja zdefiniowanego aspect-ratio lub min-height, powoduja layout shift. Sprawdz tez, jak wplywaja na Core Web Vitals.

Dodanie width i height do obrazow

Najprostsze i najskuteczniejsze rozwiazanie. Kazdy tag `` powinien miec atrybuty width i height:

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

Przegladarka zarezerwuje miejsce na obraz jeszcze przed jego zaladowaniem. Nie musisz podawac dokladnych pikseli – wystarczy proporcja (np. 4:3).

CSS aspect-ratio dla responsywnych kontenerow

Dla elementow, ktorych wymiary zmieniaja sie w zaleznosci 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 przegladarki od 2022 roku. Nie musisz juz uzywac hacka z padding-bottom.

font-display: swap + preload czcionek

Dodaj `font-display: swap` do deklaracji @font-face – tekst wyswietli sie od razu w foncie systemowym, a po zaladowaniu niestandardowej czcionki podmieni sie plynnie. Dodatkowo preloaduj najwazniejsze 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 zaladowaniem reklamy kontener powinien miec zdefiniowany min-height:

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

Nawet jesli reklama sie nie zaladuje, uklad strony pozostanie stabilny.

Skeleton loading dla dynamicznego contentu

Zamiast wstrzykiwac tresc "z niczego", wyswietl placeholder o takich samych wymiarach. Technika znana z aplikacji mobilnych – dziala rownie dobrze na stronach www.

Potrzebujesz audytu szybkosci strony? Sprawdz nasza oferte pozycjonowania SEO lub skontaktuj sie z nami.

Elementor i Divi

Sliders, animacje wejscia, dynamic widgets – te elementy czesto powoduja layout shift, bo laduja sie asynchronicznie. Rozwiazanie: ustaw stala wysokosc hero section (min-height w px lub vh), wylacz animacje "fade in" na elementach above the fold, unikaj sliderow z roznym rozmiarem slajdow.

WooCommerce

Galeria produktow (swiper/lightbox) bez zdefiniowanych wymiarow to klasyczne zrodlo CLS. Podobnie warianty produktu zmieniajace cene i opis – rezerwuj miejsce na najdluzszy wariant. Lazy-loaded images na stronie produktowej powinny miec explicite width i height.

Wtyczki cache i optymalizacji

WP Rocket i LiteSpeed Cache oferuja "Remove Unused CSS" i "Delay JavaScript". Te funkcje moga pogorszyc CLS, jesli opoznia zaladowanie CSS odpowiedzialnego za layout. Przetestuj po wlaczeniu – jesli CLS wzrosnie, wylacz opoznianie krytycznego CSS.

Motyw – hero section bez wysokosci

Wiekszosc motywow WordPress nie definiuje stalej wysokosci hero section. Po zaladowaniu obrazu tla cala strona "przeskakuje". Poprawka: dodaj min-height do sekcji hero w CSS customizera lub w pliku functions.php.

• PageSpeed Insights (pagespeed.web.dev) – pokazuje zarowno lab data (symulacja) jak i field data (realne dane uzytkownikow z CrUX). Najwazniejsze zrodlo prawdy o CLS.
• Chrome DevTools > Performance tab – nagraj sesje, znajdz dokladnie ktory element powoduje layout shift. Szukaj "Layout Shift" w flamegraph.
• Web Vitals Extension (Chrome) – wyswietla CLS, LCP i INP w czasie rzeczywistym podczas przegladania strony. Swietne do szybkiego testowania po zmianach.
• Google Search Console > Core Web Vitals – raport z danymi field data dla calej witryny. Pokazuje ktore URL-e maja problem z CLS.
• CrUX Dashboard (Google Data Studio) – historyczne dane Core Web Vitals. Przydatne do sledzenia trendow po wdrozeniu poprawek.

1. Wszystkie obrazy maja atrybuty width i height (lub CSS aspect-ratio)
2. Reklamy i bannery maja zarezerwowane miejsce (min-height)
3. Web fonty uzywaaja font-display: swap + sa preloadowane
4. Iframes i embedy (YouTube, mapy) maja zdefiniowane wymiary
5. Cookie banner i chat widget nie przesuwaja tresci strony
6. Hero section ma stala wysokosc (min-height)
7. Lazy loading nie dotyczy obrazow above the fold
8. Elementor/Divi sliders maja staly rozmiar konteneraa
9. WooCommerce gallery ma zdefiniowane wymiary kontenerow
10. "Remove Unused CSS" w WP Rocket/LiteSpeed nie opoznia krytycznego CSS

Priorytet naprawy: punkty 1–3 daja najwiekszy efekt przy najmniejszym nakladzie pracy. Zacznij od nich – czesto to wystarczy, zeby zejsc ponizej progu 0,1.

Potrzebujesz pomocy z optymalizacja Core Web Vitals? Skontaktuj sie z nami – poprawiamy wydajnosc stron WordPress i WooCommerce.