CLS – co to jest i jak skutecznie zoptymalizować Cumulative Layout Shift

Niespodziewane “skoki” treści na stronie są frustrujące i mogą zniechęcać użytkowników. Cumulative Layout Shift (CLS) to metryka Core Web Vitals, która mierzy wizualną stabilność witryny, sumując te irytujące przesunięcia. Zrozumienie, jak działa CLS i co wpływa na jego wartość, jest niezbędne dla każdego, kto dba o doświadczenie użytkownika i pozycjonowanie w Google. Poznaj sposoby, by Twoja strona była przewidywalna i komfortowa w obsłudze.

CLS – co to jest?

Cumulative Layout Shift (CLS) to jedna z metryk z grupy Core Web Vitals, która pozwala określić wizualną stabilność strony internetowej poprzez analizę i sumowanie wszystkich nieoczekiwanych przesunięć elementów układu, które zachodzą podczas jej renderowania.

Innymi słowy, wskaźnik ten stara się odpowiedzieć na pytanie, jak bardzo elementy na stronie – długo ładujące się reklamy, multimedia o zmiennych rozmiarach czy dynamicznie dodawane elementy DOM – zmieniają swoje położenie, spychając istniejącą treść i wpływając na komfort korzystania z witryny.

Wartość CLS wyliczana jest na podstawie wzoru, w którym Layout Shift Score (wynik przesunięcia układu) to iloczyn dwóch ułamków:

Impact Fraction (ułamek wpływu) – określającego, jak dużą część ekranu zajmuje niestabilny element,
Distance Fraction (ułamek odległości) – mierzącego dystans, o jaki ten element się przemieścił.

Im wyższa suma poszczególnych przesunięć, tym bardziej frustrujące dla użytkowników, utrudniające nawigację i prowadzące do błędnych kliknięć mogą one być – co w sklepach internetowych może oznaczać utratę klienta – a w konsekwencji zniechęcać do dalszego korzystania ze strony.

Dlaczego stabilność wizualna strony jest ważna?

Wizualna stabilność strony, mierzona za pomocą wskaźnika Cumulative Layout Shift (CLS), jest ważna, ponieważ bezpośrednio wpływa na UX, SEO i wskaźniki konwersji. Stanowi fundament dla płynnej, przewidywalnej i profesjonalnej interakcji z witryną.

Wpływ CLS na doświadczenia użytkownika

Wysoki wskaźnik CLS negatywnie wpływa na doświadczenia użytkownika z kilku powodów.

Po pierwsze, nieoczekiwane przesunięcia układu często prowadzą do przypadkowych kliknięć w błędne elementy, utraty miejsca podczas czytania treści oraz ogólnej frustracji, która może skłonić do porzucenia strony. Problem jest szczególnie dotkliwy na stronach e-commerce, gdzie nagłe zmiany layoutu mogą skutkować niezamierzonym dodaniem produktu do koszyka lub przedwczesnym wysłaniem formularza, podważając zaufanie do niezawodności i profesjonalizmu witryny.

Po drugie, niestabilność wizualna jest bardziej uciążliwa na urządzeniach mobilnych, gdzie ograniczona przestrzeń ekranu sprawia, że każde przesunięcie treści ma znacznie większy i bardziej destrukcyjny wpływ na interakcję niż na komputerach stacjonarnych.

Wreszcie, strony z niskim wskaźnikiem CLS (optymalnie poniżej 0,1) ładują się w przewidywalny sposób, co zapewnia użytkownikom komfort i pewność podczas interakcji, przekładając się na lepsze metryki biznesowe, takie jak wyższe wskaźniki konwersji, niższy współczynnik odrzuceń oraz dłuższy czas spędzony na stronie.

Związek CLS z pozycjonowaniem w Google

Czy Cumulative Layout Shift ma bezpośredni wpływ na pozycjonowanie? Jak najbardziej! CLS jest jednym z trzech wskaźników Core Web Vitals, które Google wykorzystuje jako czynnik rankingowy. To znaczy, że Google bierze pod uwagę, jak stabilna jest strona podczas ładowania. Jeśli strona ma wysoki wskaźnik CLS, co oznacza, że treści przesuwają się często i irytująco, algorytmy Google mogą uznać, że oferujesz słabe doświadczenie użytkownika i mogą obniżyć Twoją pozycję w wynikach wyszukiwania.

Jak niestabilny layout obniża konwersję

Niestabilny układ, czyli strona z wysokim CLS, zabija konwersje. Dlaczego? Bo nieoczekiwane przesuwanie się elementów podczas ładowania strony frustruje użytkowników i prowadzi do błędnych interakcji – np. przypadkowego kliknięcia w niewłaściwy przycisk.

Wyobraź sobie, że podczas finalizacji zakupów w sklepie internetowym nagle nad przyciskiem „Do kasy” pojawia się baner reklamowy zachęcający do zapisania się na newsletter. Użytkownik, zamiast kliknąć „Do kasy”, omyłkowo naciska „Usuń z koszyka”. Takie doświadczenie zniechęca do dalszych zakupów i sprawia, że wielu użytkowników po prostu zrezygnuje z transakcji.

Wysoki CLS psuje UX – a to nie tylko kwestia utraty zaufania i klientów, ale również jeden z czynników, które Google bierze pod uwagę przy ustalaniu rankingu w wynikach wyszukiwania. Sklep z kiepskim wynikiem CLS może więc łatwiej wpaść w spiralę porażki:

niższa pozycja w Google → mniejszy ruch organiczny → mniej potencjalnych konwersji,
niestabilna wizualnie i wolno ładująca się witryna zniechęca użytkowników już na początku → szybko opuszczają stronę → tracisz sprzedaż.

Jak Google oblicza i mierzy wskaźnik CLS?

Google oblicza wskaźnik Cumulative Layout Shift (CLS) poprzez zsumowanie wartości wszystkich nieoczekiwanych przesunięć układu, które mają miejsce podczas ładowania strony. Wartość każdego pojedynczego przesunięcia to iloczyn ułamka wpływu (impact fraction) i ułamka odległości (distance fraction).

Podstawy obliczeń – ułamek wpływu

Ułamek wpływu (ang. impact fraction) to jedna z kluczowych miar w obliczeniach CLS, która mówi nam, jak duża część widocznego obszaru ekranu (viewportu) została zajęta przez niestabilny element w trakcie jego przesunięcia między dwiema klatkami renderowania.

Inaczej mówiąc, „impact fraction” kwantyfikuje wizualny wpływ przesunięcia – jeśli ruch danego elementu dotyczy większego obszaru ekranu, to ułamek ten będzie wyższy, a tym samym większy jego wkład w ostateczny wynik CLS.

W praktyce „impact fraction” obliczamy poprzez dodanie widocznych obszarów niestabilnego elementu w jego pozycji początkowej i końcowej, a następnie podzielenie ich przez całkowity obszar viewportu. W ten sposób dowiadujemy się, jaki procent ekranu był zaangażowany w ruch.

Kluczowy element – ułamek odległości

Drugi fundamentalny składnik wzoru na CLS to ułamek odległości (distance fraction). Komponent ten mierzy, jak daleko niestabilny element przesunął się na stronie w relacji do wymiarów widocznego obszaru ekranu (viewportu).

Wartość obliczamy, dzieląc maksymalną odległość, o jaką element przemieścił się w pionie lub poziomie, przez największy wymiar viewportu – jego wysokość lub szerokość. Przykładowo: jeśli element przesunął się o 25% wysokości ekranu, ułamek odległości wyniesie 0,25.

Następnie, ułamek odległości mnożymy przez ułamek wpływu, by otrzymać ostateczny wynik dla pojedynczego przesunięcia układu. Dla przykładu: 0,75 × 0,25 = 0,1875.

Istota tej miary jest następująca: duży element, który przesuwa się minimalnie, będzie miał mały wkład w CLS. Dzięki temu możesz dokładnie ocenić, jaki realny wpływ przesunięcie ma na UX, uwzględniając skalę zmiany i jej zasięg.

Narzędzia do analizy Cumulative Layout Shift

Do analizy Cumulative Layout Shift (CLS) służy szereg narzędzi Google, z których każde oferuje nieco inne możliwości:

Google PageSpeed Insights – najbardziej popularne narzędzie, które dostarcza kompleksowych raportów uwzględniających zarówno lab data (dane laboratoryjne), jak i field data (dane z rzeczywistego użytkowania). Wskazuje konkretne elementy powodujące przesunięcia oraz podpowiada, jak je naprawić.
Google Lighthouse – narzędzie zintegrowane z Chrome DevTools, które pozwala na przeprowadzanie szczegółowych audytów w kontrolowanych warunkach laboratoryjnych. Generuje precyzyjne dane o CLS oraz rekomendacje optymalizacyjne.
Chrome DevTools – same narzędzia deweloperskie przeglądarki Chrome umożliwiają monitorowanie przesunięć układu w czasie rzeczywistym podczas interakcji ze stroną, co pozwala natychmiastowo zobaczyć problematyczne elementy i zrozumieć przyczyny niestabilności.
Google Search Console – to narzędzie dostarcza raporty dotyczące Core Web Vitals, w tym CLS, które oparte są na danych zebranych od rzeczywistych użytkowników (field data). Dzięki temu można monitorować wskaźnik w skali całej witryny i identyfikować problemy na szeroką skalę.

Interpretacja wyników – jaki jest dobry wynik CLS

W interpretacji wyników Cumulative Layout Shift (CLS) obowiązują progi wyznaczone przez Google. Jeśli chcesz zapewnić użytkownikom płynne i komfortowe doświadczenie, dąż do wartości poniżej 0,1. Oznacza to, że przesunięcia układu są minimalne i niemal niezauważalne.

Wynik CLS, który mieści się w zakresie 0,1-0,25, jest traktowany jako „do poprawy”. Wartość ta wskazuje, że przesunięcia występują, a co za tym idzie, użytkownicy mogą odczuwać irytację wynikającą z nich, ale nadal są w stanie korzystać z witryny.

Gdy Cumulative Layout Shift przekracza próg 0,25, mamy do czynienia ze słabym wynikiem. Taki rezultat świadczy o poważnych problemach ze stabilnością wizualną strony, które mogą prowadzić do znacznej frustracji użytkowników i negatywnie wpłynąć na ich ogólne wrażenia z wizyty.

Warto pamiętać, że powyższe progi nie są jedynie wytycznymi mającymi na celu pomoc właścicielom stron internetowych. Są one bowiem bezpośrednio wykorzystywane przez algorytmy Google do oceny jakości strony w ramach Core Web Vitals, a co za tym idzie, mają wpływ na jej pozycjonowanie w organicznych wynikach wyszukiwania.

Co najczęściej powoduje problemy z wysokim CLS?

Najczęstsze problemy, które prowadzą do wysokiego CLS, to głównie sytuacje, w których elementy ładują się dynamicznie, a dla nich nie jest wcześniej rezerwowana przestrzeń. Dotyczy to m.in.:

obrazów i multimediów bez określonych wymiarów,
reklam i banerów,
niestandardowych czcionek internetowych,
dynamicznie wstrzykiwanych treści, które pojawiają się powyżej istniejących elementów.

Obrazy i multimedia bez zdefiniowanych wymiarów

Obrazy, pliki wideo oraz elementy iframe, które nie mają zdefiniowanych atrybutów szerokości (width) i wysokości (height), to jedna z głównych przyczyn wysokiego CLS. Przeglądarka nie wie, ile miejsca ma dla nich zarezerwować, zanim się załadują. W efekcie, kiedy taki element multimedialny w końcu zostanie pobrany i wyrenderowany, jego rzeczywisty rozmiar wypycha inne, już wyświetlone treści, powodując nagłe przesunięcie układu – ów „skok” na stronie, który rzuca się w oczy i irytuje użytkownika.

Im większy obraz czy wideo, tym większe przesunięcie i tym bardziej negatywny wpływ na wynik CLS. Okazuje się więc, że prostym, ale niezwykle skutecznym sposobem na poprawę tego parametru jest zdefiniowanie atrybutów width i height w kodzie HTML.

Dzięki temu przeglądarka od razu wie, jaką przestrzeń ma zarezerwować i uwzględnia miejsce o właściwych proporcjach. To eliminuje ryzyko przesunięć i stabilizuje layout podczas ładowania strony.

Dynamicznie ładowane reklamy i banery

Dynamicznie ładowane reklamy i banery są zmorą CLS, bo często pojawiają się na stronie z opóźnieniem, po jej początkowym wyrenderowaniu, i wstrzykują się w miejsca, dla których nie zarezerwowano wcześniej odpowiedniej przestrzeni. Problem potęguje fakt, że reklamy i widżety od firm trzecich mogą mieć różne, nieprzewidywalne rozmiary w zależności od kampanii czy profilu użytkownika, co skutkuje gwałtownymi skokami układu po ich załadowaniu.

Typowym przykładem generującym przesunięcia są też banery zgody na pliki „cookies” – jako że zazwyczaj pojawiają się na samej górze strony, to przesuwają całą zawartość w dół i zwiększają szansę na przypadkowe kliknięcia. Jeśli nie ustalisz z góry wysokości i szerokości slotów reklamowych i innych dynamicznych boksów, twój układ strony stanie się niestabilny, a to bezpośrednio pogorszy stabilność wizualną i satysfakcję użytkownika.

Niestandardowe czcionki internetowe i efekt FOIT/FOUT

Niestandardowe czcionki internetowe są jedną z najczęstszych przyczyn wysokiego CLS, a to z dwóch powodów:

FOIT (Flash of Invisible Text) – przez jakiś czas tekst jest niewidoczny, dopóki czcionka się nie załaduje. Gdy nagle się pojawia, może przesunąć inne elementy,
FOUT (Flash of Unstyled Text) – początkowo tekst jest wyświetlany w czcionce zastępczej, a potem zamieniany na docelową. Gdy zmienią się jego rozmiar i układ, spowoduje to reflow strony.

Problem to różnice w wymiarach (np. szerokości i wysokości znaków) między systemową czcionką zastępczą a niestandardową docelową. Gdy ta druga się załaduje, przemieszcza to linie tekstu i sąsiednie elementy, tworząc layout shift. Efekty są tym bardziej widoczne, im większe lub wolniej ładowane są pliki czcionek – przez to wydłuża się czas, w którym strona jest wizualnie niestabilna.

Dlatego w optymalizacji CLS ważne jest, by zminimalizować negatywny wpływ fontów. Stosuje się preload czcionek, używa CSS „font-display: swap” i stara się precyzyjnie dopasować krój zastępczy, by ograniczyć skalę przesunięć podczas zamiany fontów.

Treści wstrzykiwane dynamicznie powyżej istniejących elementów

Dynamiczne wstrzykiwanie nowych treści, takich jak paski powiadomień, banery promocyjne czy sekcje z powiązanymi artykułami, powyżej już załadowanych i widocznych elementów to jedna z najczęstszych przyczyn wysokiego CLS. Powoduje ona, że cała istniejąca zawartość musi zostać przesunięta w dół lub w bok, co stanowi duże, nieoczekiwane przesunięcie.

Jeśli taki shift następuje bez Twojej świadomej interakcji – na przykład kliknięcia czy najechania kursorem – oko naturalnie go śledzi. To prowadzi do repaintu i reflowu strony, które są odnotowywane jako znaczący layout shift, drastycznie pogarszając stabilność wizualną witryny.

Aby zapobiec negatywnemu wpływowi na CLS, ważne jest:

rezerwowanie odpowiedniej przestrzeni dla dynamicznych treści za pomocą statycznych placeholderów o ustalonych wymiarach jeszcze przed ich załadowaniem,
wstrzykiwanie nowych elementów poniżej widocznej części strony.

Lepszym rozwiązaniem będzie też uzależnienie wyświetlania takich treści od konkretnej akcji użytkownika. Wtedy zmiana układu stanie się oczekiwana i nie wpłynie negatywnie na wynik CLS.

W jaki sposób można skutecznie zoptymalizować CLS?

Skuteczna optymalizacja Cumulative Layout Shift (CLS) przede wszystkim zapewnia wizualną stabilność Twojej strony. Oznacza to, że należy:

rezerwować przestrzeń dla obrazów i reklam,
inteligentnie zarządzać ładowaniem czcionek,
unikać nieoczekiwanych zmian w treści,
wykorzystywać transformacje CSS do animacji zamiast modyfikacji geometrii elementów.

Rezerwowanie przestrzeni dla obrazów i reklam

Rezerwowanie przestrzeni dla obrazów, wideo i reklam to jedna z podstawowych technik optymalizacji CLS. Polega na poinformowaniu przeglądarki o wymiarach tych elementów jeszcze przed ich załadowaniem. Dzięki czemu przeglądarka może od razu zarezerwować odpowiednią ilość miejsca w layoucie i uniknąć nagłych przesunięć układu.

Najprostszym sposobem jest stosowanie atrybutów width i height bezpośrednio w tagach HTML obrazów i elementów multimedialnych. Dzięki temu przeglądarka wie od razu, ile miejsca ma zarezerwować na dany element, nawet jeśli sam obraz jeszcze się nie załadował.

W przypadku responsywnych projektów świetnie sprawdza się też nowa właściwość CSS aspect-ratio, która pozwala utrzymać stałe proporcje kontenera i dynamicznie dostosować jego wysokość do szerokości. Dzięki temu można zapobiec zapadaniu się przestrzeni przed załadowaniem obrazu.

W przypadku dynamicznie ładowanych reklam, które często mają zmienne rozmiary, warto rezerwować miejsce odpowiadające największemu możliwemu formatowi reklamy lub wyświetlać statyczny placeholder. Dzięki temu zachowasz przestrzeń, nawet jeśli reklama się nie załaduje, co wyeliminuje „skakanie” treści.

Zarządzanie ładowaniem czcionek

Efektywne zarządzanie ładowaniem czcionek jest istotne dla optymalizacji CLS, ponieważ minimalizuje przesunięcia układu wynikające z FOIT i FOUT (opóźnione renderowanie tekstu lub jego podmianę z czcionki zastępczej na docelową).

Zastosowanie atrybutu rel="preload" w tagu <link> dla kluczowych plików czcionek sygnalizuje przeglądarce, aby pobrała je z wysokim priorytetem. Dzięki temu są dostępne wcześniej, a tekst może być od razu wyrenderowany w docelowym kroju, eliminując przesunięcia.

Użycie właściwości CSS font-display z wartością swap pozwala na natychmiastowe wyświetlenie tekstu w czcionce systemowej i płynną zamianę po załadowaniu fontu docelowego, ograniczając efekt FOIT. Wartość optional może całkowicie zapobiec podmianie, jeśli ładowanie trwa zbyt długo.

Hosting czcionek na własnym serwerze (lokalnie) zamiast korzystania z zewnętrznych dostawców skraca czas ich ładowania, co w połączeniu z preloadingiem i odpowiednim użyciem font-display skutecznie stabilizuje układ i obniża wartość CLS.

Unikanie nieoczekiwanych zmian w treści

Optymalizacja CLS to przede wszystkim unikanie nieoczekiwanych zmian w treści. Innymi słowy, nie dopuść do sytuacji, w której nowe elementy będą dynamicznie wstrzykiwane nad istniejącą zawartością bez wyraźnej interakcji użytkownika, ponieważ spowoduje to przesunięcie całej struktury strony.

Zamiast automatycznego dodawania kolejnej porcji treści, ładuj ją w odpowiedzi na akcję użytkownika, np. kliknięcie przycisku „Załaduj więcej”. W ten sposób zmiana w układzie będzie oczekiwana i nie zostanie odebrana jako błąd. Jeśli jednak konieczne jest dynamiczne dodanie treści bez interakcji, zadbaj, aby pojawiła się ona w sposób niewpływający na położenie już widocznych elementów – umieść ją na przykład na dole strony lub w osobnym, nakładanym oknie.

Pamiętaj również o animacjach oraz przejściach, które mogłyby modyfikować układ. Zadbaj, aby były realizowane za pomocą właściwości CSS, które nie powodują przeliczenia layoutu (np. transform, opacity). Unikaj zmiany top, margin czy padding – to zapewni płynność animacji bez generowania layout shiftów.

Wykorzystanie transformacji CSS zamiast zmiany geometrii

Jednym z najważniejszych trików optymalizacji CLS jest wykorzystanie transformacji CSS, takich jak: `transform: translate()`, `scale()` czy `rotate()`. Dlaczego? Ponieważ te operacje nie powodują przeliczenia układu strony (layout recalculation), w przeciwieństwie do zmiany właściwości geometrycznych, takich jak: `top`, `left`, `width` czy `height`.

Gdy animujesz elementy, przesuwając je, np. za pomocą `top` czy `left` albo zmieniając ich `width` i `height`, przeglądarka musi przeliczyć pozycje wszystkich zależnych elementów. To generuje kosztowne przesunięcia układu i podbija CLS. Transformacje CSS działają na oddzielnej warstwie kompozycji (compositor layer), dzięki czemu mogą być płynnie animowane z użyciem akceleracji sprzętowej (GPU) bez wpływu na geometrię i pozycję innych elementów na stronie. Dzięki temu unikasz nieoczekiwanych layout shiftów.

Z tego powodu zawsze powinno się używać `transform: translate()` do przesuwania elementów oraz `transform: scale()` do ich skalowania. To zapewnia wydajne i stabilne wizualnie animacje, które nie psują wyniku CLS i poprawiają ogólne doświadczenie użytkownika.

Podsumowując…

Cumulative Layout Shift (CLS) to metryka Core Web Vitals, która ocenia stabilność wizualną strony internetowej, mierząc nieoczekiwane przesunięcia elementów układu podczas renderowania. Wskaźnik ten sumuje przesunięcia, które wpływają na komfort użytkownika, mogą prowadzić do błędnych kliknięć i frustracji, szczególnie gdy długo ładujące się reklamy, multimedia o zmiennych rozmiarach lub dynamicznie dodawane elementy DOM zmieniają swoje położenie.

Wartość CLS jest obliczana na podstawie iloczynu ułamka wpływu (impact fraction), który określa, jaką część ekranu zajmuje niestabilny element, i ułamka odległości (distance fraction), który mierzy dystans, o jaki ten element się przemieścił. Wysoki wskaźnik CLS negatywnie wpływa na UX, SEO i wskaźniki konwersji, dlatego optymalizacja CLS jest kluczowa dla zapewnienia płynnej i przewidywalnej interakcji z witryną.

Wysoki CLS prowadzi do przypadkowych kliknięć, utraty orientacji podczas czytania treści i frustracji, co zwiększa współczynnik odrzuceń.
Google uwzględnia CLS jako czynnik rankingowy, co oznacza, że strony z wysokim CLS mogą być gorzej pozycjonowane w wynikach wyszukiwania.
Niestabilny układ strony obniża konwersję, ponieważ użytkownicy mogą rezygnować z transakcji z powodu błędnych interakcji.
Google oblicza CLS sumując wartości przesunięć układu, gdzie każda wartość to iloczyn ułamka wpływu i ułamka odległości.
Do analizy CLS służą narzędzia takie jak Google PageSpeed Insights, Lighthouse, Chrome DevTools i Google Search Console.
Dobry wynik CLS to poniżej 0,1, wynik w zakresie 0,1-0,25 wymaga poprawy, a powyżej 0,25 jest uważany za słaby.
Problemy z CLS często wynikają z obrazów i multimediów bez określonych wymiarów, dynamicznie ładowanych reklam, niestandardowych czcionek internetowych oraz treści wstrzykiwanych powyżej istniejących elementów.
Skuteczna optymalizacja CLS obejmuje rezerwowanie przestrzeni dla obrazów i reklam, zarządzanie ładowaniem czcionek, unikanie nieoczekiwanych zmian w treści oraz wykorzystywanie transformacji CSS zamiast modyfikacji geometrii elementów.
Użycie atrybutów width i height w tagach HTML obrazów i elementów multimedialnych pomaga przeglądarce zarezerwować odpowiednią ilość miejsca.
Wykorzystanie transformacji CSS, takich jak transform: translate(), scale() czy rotate(), minimalizuje przeliczanie układu strony i poprawia stabilność wizualną.