Cumulative Layout Shift (CLS): stabilność wizualna

Cumulative Layout Shift (CLS) to wskaźnik Core Web Vitals, który mierzy, na ile strona sprawia wrażenie stabilnej lub niestabilnej podczas ładowania i korzystania z niej. Gdy treść przeskakuje, bo doładowuje się obraz bez zarezerwowanego miejsca albo wsuwa się baner cookies, użytkownik klika niewłaściwy przycisk. CLS kwantyfikuje dokładnie to doświadczenie. W tym artykule wyjaśniamy, jak obliczany jest wynik, jakie są przyczyny przesunięć układu, jak ustabilizować obrazy, fonty webowe, banery zgody i komponenty Next.js oraz dlaczego CLS pozostaje przede wszystkim sygnałem UX dla ludzkich użytkowników, podczas gdy crawlery AI patrzą głównie na HTML renderowany po stronie serwera.

Dlaczego stabilność wizualna ma znaczenie dla firm

Od wprowadzenia Core Web Vitals CLS jest, obok Largest Contentful Paint (LCP) i Interaction to Next Paint (INP), oficjalnym sygnałem Page Experience. INP jest przy tym najmłodszym członkiem tej grupy: 12 marca 2024 roku stał się wskaźnikiem Core Web Vitals i zastąpił FID (źródło międzynarodowe, Google). CLS należy do niej od początku i jako jedyny z trzech wskaźników nie opisuje szybkości ani responsywności, lecz wizualny spokój strony.

Efekt biznesowy da się zmierzyć. W udokumentowanym przez Google teście A/B japońskiego sklepu Rakuten 24 zoptymalizowany wariant poprawił wartość CLS o 92,72 procent, a jednocześnie zwiększył przychód na odwiedzającego o 53,37 procent i współczynnik konwersji o 33,13 procent (międzynarodowe studium przypadku).

Yahoo! JAPAN News obniżył CLS w danych laboratoryjnych z około 0,2 do 0 i odnotował potem o 15,1 procent więcej odsłon na sesję, o 13,3 procent dłuższy czas trwania sesji i współczynnik odrzuceń niższy o 1,72 punktu procentowego (międzynarodowe studium przypadku). Takie efekty wpisują się w szersze ustalenie, że już skrócenie czasu ładowania na urządzeniach mobilnych o 0,1 sekundy zwiększa współczynnik konwersji w handlu detalicznym o 8,4 procent, a wydatki o 9,2 procent (badanie międzynarodowe, Deloitte i 55 na zlecenie Google).

Dla rynku austriackiego ma to znaczenie, ponieważ użytkownicy są tam niemal w pełni mobilni i podłączeni do sieci. Na początku 2025 roku penetracja internetu w Austrii wynosiła 95,3 procent przy 8,69 mln internautów i 13,4 mln połączeń komórkowych, czyli 147 procent populacji (Austria). Przesunięcia układu szczególnie dotykają smartfonów, gdzie mniejsze viewporty i wolniejsze połączenia sprawiają, że każdy skok jest bardziej widoczny.

Jak obliczany jest wynik CLS

CLS mierzy okno sesji z najwyższą sumą nieoczekiwanych przesunięć układu. Przesunięcie układu występuje, gdy widoczny element zmienia swoją pozycję początkową między dwiema wyrenderowanymi klatkami, choć nie wywołała tego interakcja użytkownika. Wynik każdego przesunięcia zależy od dwóch czynników.

• Impact Fraction: udział widocznego viewportu, którego dotyczą przesunięte elementy. Jeśli blok zajmujący górną połowę ekranu przesuwa się w dół, przesunięcie obejmuje dużą część viewportu.
• Distance Fraction: odległość, jaką pokonuje najbardziej niestabilny element, podzielona przez większy wymiar viewportu. Opisuje, jak daleko przeskakuje treść.

Wynik przesunięcia układu to iloczyn Impact Fraction i Distance Fraction. CLS nie sumuje naiwnie wszystkich pojedynczych wartości z całego cyklu życia strony, lecz pracuje na oknach sesji: przesunięcia są grupowane w okna, a jedno okno trwa maksymalnie 5 sekund przy odstępie nie większym niż 1 sekunda między kolejnymi przesunięciami. Jako CLS strony liczy się najwyższa wartość okna. Dzięki temu długie sesje nie generują sztucznie złych wyników.

Progi są jasno określone. Według Google strony powinny dążyć do CLS na poziomie 0,1 lub niższym; wartości powyżej 0,25 uznaje się za słabe, mierząc w 75. percentylu odsłon strony osobno dla urządzeń mobilnych i komputerów (źródło międzynarodowe, Google). Wartości od 0,1 do 0,25 oznaczają, że jest coś do poprawy. Pomiar w 75. percentylu oznacza, że cel muszą osiągnąć trzy na cztery odsłony; sama średnia nie wystarczy.

Na urządzeniach mobilnych CLS wypada najlepiej spośród trzech wskaźników Core Web Vitals. Według HTTP Archive Web Almanac w 2025 roku dobry wynik CLS osiąga 72 procent stron na komputerach i 81 procent stron mobilnych (badanie międzynarodowe), podczas gdy na urządzeniach mobilnych tylko 62 procent stron osiąga dobry LCP, a 77 procent dobry INP. Postęp jest wyraźny: odsetek stron mobilnych z dobrym CLS wzrósł z 60 procent w 2020 roku do 79 procent w 2024 roku (badanie międzynarodowe).

Najczęstsze przyczyny przesunięć układu

Niemal wszystkie problemy z CLS sprowadzają się do kilku wzorców. Jeśli je znasz, szybko znajdziesz winowajców.

• Obrazy, filmy i iframe'y bez wymiarów: bez width i height lub zdefiniowanych proporcji przeglądarka poznaje wysokość dopiero po załadowaniu pliku. Do tego czasu element nie zajmuje miejsca, a potem spycha resztę treści w dół.
• Dynamicznie wstawiane treści: reklamy, embedy, banery newslettera, a przede wszystkim okna zgody często pojawiają się po pierwszym renderowaniu i odsuwają istniejące treści na bok.
• Zamiana fontów webowych (FOUT/FOIT): przeglądarka najpierw wyświetla font zastępczy, a potem zamienia go na załadowany font webowy. Jeśli metryki fontów się różnią, zmienia się układ tekstu i treść się przesuwa.
• Późno ładowane komponenty: widżety doładowywane po stronie klienta, skeleton loadery o niewłaściwej wysokości lub treści, które pojawiają się dopiero po hydratacji, przesuwają resztę strony.

Obrazy są przy tym najczęstszą i najłatwiejszą do uniknięcia przyczyną. Według Web Almanac 2025 62 procent stron mobilnych i 65 procent stron na komputerach nie określa wymiarów co najmniej jednego obrazu (badanie międzynarodowe). Większość stron każe więc przeglądarce zgadywać rozmiar co najmniej jednego obrazu.

Stabilizacja obrazów i multimediów

Najskuteczniejszym pojedynczym działaniem jest przekazanie przeglądarce z góry wymiarów każdego elementu multimedialnego. Dzięki temu rezerwuje ona miejsce, zanim plik się załaduje.

• Ustaw width i height jako atrybuty: nowoczesne przeglądarki obliczają proporcje na podstawie atrybutów HTML width i height i utrzymują wolne miejsce, nawet jeśli obraz jest responsywnie skalowany w CSS. To najszybsza dźwignia.
• Użyj CSS aspect-ratio: w kontenerach o stałych proporcjach, ale zmiennych konkretnych wymiarach w pikselach, aspect-ratio rezerwuje miejsce niezależnie od załadowanego pliku.
• min-height dla nieznanych treści: tam, gdzie ostateczna wysokość nie jest znana, na przykład przy doładowywanych listach, rozsądna minimalna wysokość zapobiega zapadnięciu się kontenera.
• Stosuj lazy loading prawidłowo: opóźnione ładowanie oszczędza transfer, ale nigdy nie może odbywać się bez zarezerwowanego miejsca. Obraz ładowany leniwie bez wymiarów to jedno z najczęstszych źródeł CLS, bo wskakuje dokładnie wtedy, gdy użytkownik przewija stronę.

Fonty webowe bez przesunięć układu

Fonty webowe są niemal wszechobecne, a tym samym stanowią systematyczne ryzyko dla CLS. Według Web Almanac 2025 87 procent stron mobilnych korzysta z co najmniej jednego fontu webowego, ale tylko od 15 do 16 procent stron stosuje preload fontów (badanie międzynarodowe). Almanac wprost łączy to z CLS: gdy przeglądarka zamienia font zastępczy na załadowany font webowy, zmieniają się rozmiar i szerokość tekstu, a treść się przesuwa.

• Świadomie wybierz font-display: wartość swap od razu wyświetla tekst fontem zastępczym i zamienia go później, co pozwala uniknąć FOIT, ale może powodować przesunięcia typu FOUT. optional po krótkim czasie całkowicie rezygnuje z zamiany i z punktu widzenia stabilności często jest spokojniejszym wyborem.
• Dopasuj metryki fontu zastępczego: za pomocą size-adjust, ascent-override i descent-override w regule @font-face możesz dostosować font zastępczy tak, by zajmował tyle samo miejsca co font webowy. Zamiana staje się wtedy praktycznie niewidoczna.
• Wczytuj krytyczne fonty z wyprzedzeniem: celowa wskazówka preload dla najważniejszego fontu sprawia, że jest on dostępny wcześnie. Biorąc pod uwagę niską popularność tej techniki, to prosty sposób na przewagę nad konkurencją.
• Postaw na self-hosting: przy fontach hostowanych na własnym serwerze odpada dodatkowe nawiązywanie połączenia z zewnętrznymi dostawcami. Font jest dzięki temu dostępny wcześniej, a okno czasowe, w którym może wystąpić przesunięcie, się skraca. W Europie self-hosting daje ponadto przewagę w zakresie RODO, ponieważ adresy IP nie są przekazywane do zewnętrznych usług z fontami.

CLS w Next.js i frameworkach JavaScript

Nowoczesne frameworki mają własne pułapki związane z CLS, ale dostarczają też odpowiednie narzędzia. Kluczowe jest, by treści renderowane po stronie serwera zachowały ostateczną geometrię w momencie rozpoczęcia hydratacji.

• Używaj next/image: komponent wymusza podanie wymiarów albo fill ze zdefiniowanym kontenerem i w ten sposób automatycznie rezerwuje miejsce. Eliminuje to najczęstsze źródło CLS związane z obrazami już na etapie programowania.
• Korzystaj z next/font: next/font ładuje fonty w czasie budowania jako self-hostowane, eliminuje zewnętrzne żądania i automatycznie oblicza metryki fontu zastępczego, dzięki czemu zamiana fontu nie powoduje przesunięcia.
• Buduj skeleton loadery o właściwych wymiarach: placeholdery muszą mieć dokładnie taką wysokość jak późniejsza treść. Skeleton mniejszy niż docelowy blok przesuwa stronę przy podmianie tak samo jak brak placeholdera.
• Pamiętaj o SSR, streamingu i hydratacji: renderowanie po stronie serwera i streaming wcześnie dostarczają stabilny HTML. Problemy powstają, gdy treści doładowywane po stronie klienta wyświetlają się nad już widocznymi blokami lub między nimi. Takie treści powinny trafiać na dół albo do stałych, zarezerwowanych obszarów.

Banery zgody i reklamy zewnętrzne bez CLS

W obszarze obowiązywania RODO okno zgody jest praktycznie nieuniknione i należy do najczęstszych przyczyn CLS, ponieważ pojawia się wcześnie i w eksponowanym miejscu. Miejsca reklamowe zachowują się podobnie, bo ich rozmiar często jest znany dopiero w czasie działania strony.

• Baner jako nakładka, nie w przepływie: okno zgody wyświetlane jako przypięta nakładka nad treścią niczego nie przesuwa. Natomiast baner, który wsuwa się na górze w przepływ dokumentu i spycha wszystko w dół, powoduje duże przesunięcie.
• Z góry nadaj wymiary miejscom reklamowym: zarezerwuj dla każdego miejsca reklamowego oczekiwaną wysokość za pomocą slot sizingu lub kontenera z aspect-ratio. Jeśli reklama się nie wyświetli, miejsce powinno zwinąć się w kontrolowany sposób, a treść nie powinna przeskakiwać.
• transform zamiast właściwości zmieniających układ: animuj pojawianie się i znikanie elementów za pomocą transform i opacity. Te właściwości przetwarza compositor i nie wywołują one reflow, w przeciwieństwie do top, left, width czy height.

Wydajne animacje i renderowanie

Nieskomponowane animacje to niedoceniane źródło CLS. Według Web Almanac 2024 39 procent stron mobilnych i 42 procent stron na komputerach używa nieskomponowanych animacji (badanie międzynarodowe), które przeliczają style, ponownie układają dokument i przerysowują piksele.

• Animuj tylko transform i opacity: te właściwości działają na GPU i nie zmieniają układu. Animacje właściwości geometrycznych, takich jak width, height czy margin, zmuszają przeglądarkę do reflow i mogą przesuwać sąsiednie elementy.
• Stosuj content-visibility z rozwagą: dzięki content-visibility: auto przeglądarka pomija renderowanie niewidocznych obszarów. W połączeniu z contain-intrinsic-size zarezerwowane miejsce zostaje zachowane, więc gdy obszar wjeżdża w viewport podczas przewijania, nie dochodzi do przesunięcia.
• Korzystaj z CSS containment: właściwość contain ogranicza efekty układu, stylu i malowania danego elementu. Zmiany wewnątrz kontenera nie wpływają dzięki temu na resztę strony.

Pomiar CLS: dane laboratoryjne a dane terenowe

CLS można mierzyć na dwóch poziomach, które się uzupełniają i często różnią. Dane laboratoryjne pokazują powtarzalne wartości w kontrolowanych warunkach, a dane terenowe rzeczywiste doświadczenia prawdziwych użytkowników.

• Dane terenowe (CrUX): Chrome UX Report zbiera zanonimizowane dane rzeczywiste i stanowi podstawę oficjalnej oceny w 75. percentylu. Korzystają z niego raport Core Web Vitals w Google Search Console oraz PageSpeed Insights.
• Dane laboratoryjne (Lighthouse): Lighthouse i laboratoryjna część PageSpeed Insights symulują odsłonę strony. Doskonale nadają się do debugowania, ale rejestrują tylko początkowe ładowanie, a nie późniejsze przesunięcia wywołane interakcjami.
• Real User Monitoring z web-vitals.js: oficjalna biblioteka JavaScript mierzy CLS bezpośrednio w przeglądarce prawdziwych użytkowników przez cały cykl życia strony i może wysyłać wartości do systemu analitycznego. Wypełnia to lukę między danymi laboratoryjnymi a CrUX i uwidacznia również późne przesunięcia.

Najważniejsza różnica: dane laboratoryjne zwykle mierzą tylko ładowanie, a CLS powstaje przez cały cykl życia strony. Strona może mieć idealny CLS w teście Lighthouse, a mimo to wypadać słabo w danych terenowych, na przykład dlatego, że baner wsuwa się dopiero po kilku sekundach albo przy interakcji.

Najczęstsze błędy przy optymalizacji CLS

Powtarzające się wzorce kosztują stabilność, ale można ich celowo unikać.

• Patrzenie wyłącznie na dane laboratoryjne: jeśli sprawdzasz tylko Lighthouse, przeoczysz późne przesunięcia wywołane przez banery zgody, reklamy lub interakcje, które występują tylko w danych terenowych.
• Serwowanie obrazów bez wymiarów: mimo prostego rozwiązania według HTTP Archive problem nadal dotyczy większości stron (62 procent na urządzeniach mobilnych, 65 procent na komputerach).
• Wstawianie banera zgody w przepływ dokumentu: wsuwający się baner często powoduje największe pojedyncze przesunięcie na całej stronie.
• Animowanie właściwości geometrycznych: animacje width, height, top czy left wywołują reflow i przesuwają sąsiednie elementy.
• Skeleton loadery o niewłaściwej wysokości: placeholder, który nie odpowiada docelowej wysokości, przesuwa stronę przy podmianie tak samo jak brak placeholdera.

CLS, Page Experience i kontekst GEO

CLS jest częścią Page Experience i działa jako sygnał uzupełniający, a nie samodzielna dźwignia rankingowa. Przy porównywalnej trafności lepsze doświadczenie użytkownika może przesądzić o wyniku, dlatego CLS często opisuje się jako czynnik rozstrzygający (tie-breaker). W połączeniu z LCP i INP daje to pełny obraz postrzeganej jakości: LCP mierzy, jak szybko pojawia się główna treść, INP, jak responsywna jest strona, a CLS, jak stabilna pozostaje. Na CLS wpływa też pamięć podręczna wstecz/dalej (bfcache): strony, które kwalifikują się do bfcache, przeglądarka przywraca podczas nawigacji wstecz i dalej w pełni załadowane i bez ponownych przesunięć układu (źródło międzynarodowe, Google). Dodatkowo poprawia to CLS w danych terenowych.

W kontekście crawlerów AI i Generative Engine Optimization (GEO) ważne jest jasne rozgraniczenie. CLS to sygnał wizualny dla ludzkich użytkowników, który powstaje w przeglądarce podczas obliczania układu i pikseli. Crawlery AI przetwarzają natomiast przede wszystkim HTML renderowany po stronie serwera i jego strukturę semantyczną. Wysoki CLS nie pogarsza bezpośrednio widoczności w odpowiedziach AI, ponieważ crawler nie dostrzega skoków wizualnych. Związek jest pośredni: działania przeciwko CLS, takie jak czysty server-side rendering, wcześnie dostarczany stabilny HTML i rezygnacja z treści doładowywanych wyłącznie po stronie klienta, jednocześnie poprawiają czytelność maszynową dla crawlerów AI. CLS pozostaje więc przede wszystkim sygnałem UX dla ludzi, a ta sama dyscyplina techniczna służy też widoczności w GEO.

Dalsze materiały i podsumowanie

CLS mierzy stabilność wizualną strony i w 75. percentylu powinien wynosić 0,1 lub mniej. Największa dźwignia jest zarazem najprostsza: serwowanie obrazów, filmów i iframe'ów z określonymi wymiarami, bo to one są najczęstszą i najłatwiejszą do uniknięcia przyczyną. Fonty webowe powinny być hostowane na własnym serwerze i osadzane z dopasowanymi metrykami fontu zastępczego oraz przemyślaną strategią font-display, banery zgody i reklamy potrzebują zarezerwowanego miejsca lub nakładki, a animacje powinny korzystać wyłącznie z transform i opacity. W Next.js dużą część tej pracy automatycznie wykonują next/image i next/font.

Sensowne kolejne kroki to: sprawdzenie raportu Core Web Vitals w Search Console pod kątem problemów z CLS, wdrożenie Real User Monitoring z web-vitals.js, aby wychwytywać późne przesunięcia w danych terenowych, oraz systematyczna kontrola, czy wszystkie multimedia, a także miejsca na banery zgody i reklamy mają zarezerwowaną przestrzeń. Ponieważ efekty biznesowe w udokumentowanych studiach przypadków są znaczne, optymalizacja CLS przekłada się bezpośrednio na konwersje i przychody, niezależnie od rankingu.