CLS: co oznacza Cumulative Layout Shift w sklepie

CLS: co oznacza Cumulative Layout Shift

CLS, czyli Cumulative Layout Shift, to metryka opisująca stabilność wizualną strony. Mówiąc prościej, sprawdza, czy użytkownik może spokojnie korzystać z widoku, czy podczas ładowania kolejnych elementów układ strony zaczyna się przesuwać. Nie chodzi więc o sam czas ładowania. Sklep może wyświetlić główną treść stosunkowo szybko, a mimo tego mieć problem z CLS, jeśli po chwili zdjęcie, baner albo inny element zmieni swoje położenie i przesunie znajdującą się niżej treść.

W sklepie internetowym łatwo zauważyć skutki takiego zachowania. Użytkownik chce kliknąć przycisk dodania produktu do koszyka, ale w tym samym momencie nad przyciskiem pojawia się element i przesuwa go niżej. Klient może kliknąć coś innego niż zamierzał. Podobnie wygląda sytuacja, gdy podczas czytania opisu produktu tekst zostaje przesunięty przez później załadowany obraz albo baner.

CLS jest jednym z Core Web Vitals. Google wykorzystuje te metryki do oceny doświadczenia użytkownika związanego między innymi z ładowaniem, interakcją i stabilnością wizualną strony. Dla CLS za dobry poziom przyjmuje się wynik nie większy niż 0,1, natomiast wynik powyżej 0,25 oznacza słabą stabilność wizualną. Pomiędzy tymi wartościami znajduje się obszar wymagający poprawy.

Nie należy jednak patrzeć wyłącznie na jedną liczbę. Sama wartość CLS mówi, że występują przesunięcia, ale nie wyjaśnia jeszcze, który element je powoduje. Dlatego przy optymalizacji trzeba przejść od wyniku do konkretnego elementu strony i sprawdzić, co zmienia swoją pozycję.

Co to jest CLS i co dokładnie mierzy?

Cumulative Layout Shift mierzy nieoczekiwane przesunięcia widocznych elementów. Layout shift występuje wtedy, gdy element widoczny w obszarze ekranu zmienia swoje położenie pomiędzy kolejnymi wyrenderowanymi klatkami.

To rozróżnienie jest istotne. Sam fakt, że na stronie pojawia się nowa treść, nie oznacza automatycznie problemu z CLS. Jeżeli nowy element został dodany w sposób, który nie przesuwa istniejących elementów, nie powoduje on layout shiftu. Problem zaczyna się wtedy, gdy istniejąca treść zostaje przesunięta bez oczekiwania użytkownika.

Metryka uwzględnia między innymi to, jak dużą część widocznego obszaru obejmuje przesuwający się element oraz jak daleko element się przemieścił. W uproszczeniu większy obszar przesuniętej treści i większy dystans ruchu mogą oznaczać większy wynik pojedynczego przesunięcia.

Współczesna definicja CLS bierze pod uwagę największe skupisko przesunięć występujących w krótkim okresie. Dzięki temu wynik nie rośnie bez końca tylko dlatego, że użytkownik długo pozostaje na stronie. Jest to szczególnie istotne w przypadku rozbudowanych stron, list produktów ładowanych dynamicznie oraz aplikacji, w których treść zmienia się po początkowym załadowaniu.

Do wyniku nie powinny trafiać przesunięcia będące bezpośrednią i oczekiwaną reakcją na działanie użytkownika, jeżeli następują wystarczająco blisko tego działania. Inaczej należy traktować sytuację, gdy użytkownik sam kliknie przycisk i w odpowiedzi pojawi się nowy panel, a inaczej przypadkowe przesunięcie strony podczas czytania.

Jeżeli chcesz szerzej uporządkować wszystkie metryki dotyczące szybkości i doświadczenia użytkownika, przydatne będzie zestawienie najważniejsze informacje o Core Web Vitals, ponieważ CLS jest tylko jednym z elementów tej grupy.

Co oznacza CLS na stronie sklepu?

Właściciel sklepu może spotkać się z CLS w wielu miejscach, nawet jeśli podczas zwykłego testu wszystko wygląda poprawnie. Problem często pojawia się dopiero wtedy, gdy strona jest otwierana na konkretnym urządzeniu, przy określonej szybkości połączenia albo bez wcześniejszego zapisania zasobów w pamięci przeglądarki.

Typowym przykładem jest zdjęcie produktu bez określonych wymiarów. Przeglądarka zaczyna budować stronę, ale nie zna jeszcze docelowego rozmiaru obrazu. Tekst, cena lub przyciski mogą zostać umieszczone wyżej. Kiedy obraz zostanie pobrany i przeglądarka pozna jego rozmiar, pozostała część strony zostaje przesunięta.

Podobny problem może powodować baner promocyjny. Sklep może początkowo pozostawić na stronie niewielką ilość miejsca, a po załadowaniu reklamy lub slidera element zwiększa swoją wysokość. Cała treść poniżej przesuwa się wtedy w dół.

Częstym źródłem niestabilności są również czcionki internetowe. Jeżeli najpierw zostanie użyta czcionka zastępcza, a po chwili właściwy font, szerokość znaków i wysokość tekstu mogą się zmienić. W efekcie zmienia się liczba wierszy w nagłówku albo opisie, a znajdujące się niżej elementy zostają przesunięte.

W sklepie problem mogą powodować także komunikaty o cookies, paski promocyjne, pop-upy, widgety zewnętrzne, systemy opinii, czaty, mapy, elementy rekomendacji produktów oraz skrypty reklamowe. Szczególnie podejrzane są komponenty dodawane asynchronicznie, jeżeli nie mają wcześniej zarezerwowanego miejsca.

Niestabilność może pojawić się również na karcie produktu. Przykładowo, jeżeli wariant produktu, komunikat o dostępności albo dodatkowy formularz pojawia się dopiero po wykonaniu zapytania do serwera, trzeba sprawdzić, czy jego pojawienie się przesuwa cenę, zdjęcia, opis lub przycisk zakupu.

Warto przejść przez sklep tak, jak robi to klient. Otwórz stronę kategorii, kartę produktu, koszyk i stronę płatności. Odśwież każdą z nich, obserwuj pierwszy ekran i sprawdź, czy elementy zmieniają położenie po kilku chwilach. Następnie powtórz test po przewijaniu, ponieważ część przesunięć pojawia się dopiero wtedy, gdy użytkownik dociera do kolejnych sekcji.

Najczęstsze przyczyny wysokiego CLS w sklepie

Jedną z najczęstszych przyczyn są obrazy pozbawione określonej przestrzeni. Dotyczy to nie tylko zdjęć produktów, ale również banerów, grafik kategorii, logotypów i elementów promocyjnych. Jeżeli przeglądarka nie może wcześniej określić wymiarów obrazu, może najpierw wyrenderować układ bez niego, a następnie przesunąć treść po jego załadowaniu.

Drugim obszarem są reklamy i elementy zewnętrzne. Kod reklamowy może zostać uruchomiony po załadowaniu głównej treści. Jeżeli kontener nie ma ustalonej wysokości, jego pojawienie się może przesunąć wszystko, co znajduje się niżej.

Kolejny problem stanowią dynamicznie wstrzykiwane elementy. W sklepie może to być pasek z informacją o promocji, komunikat o dostawie, moduł rekomendowanych produktów albo formularz ładowany przez JavaScript. Jeżeli element jest dodawany bez przygotowania miejsca, istnieje ryzyko przesunięcia istniejącej treści.

Osobnej kontroli wymagają fonty. Zmiana kroju pisma po pierwszym renderowaniu może zmienić wysokość nagłówka, przycisku czy całego bloku tekstu. Przy rozbudowanym sklepie efekt może być widoczny w wielu miejscach jednocześnie.

Problem mogą powodować również elementy, które są początkowo ukryte, a następnie pojawiają się w normalnym przepływie dokumentu. Dotyczy to między innymi formularzy, filtrów, komunikatów i niektórych komponentów marketingowych. Jeżeli element ma się pojawić, jego miejsce można przygotować wcześniej albo zastosować rozwiązanie, które nie przesuwa głównego układu strony.

W praktyce podczas audytu warto zacząć od elementów znajdujących się wysoko w widocznym obszarze. Przesunięcie dużego bloku na początku strony może wpłynąć na wiele innych elementów znajdujących się pod nim. Pomocne jest również sprawdzenie, czy problem występuje tylko na urządzeniach mobilnych, tylko na desktopie, czy w obu wariantach.

Jeżeli problem CLS jest częścią większego problemu z szybkością działania sklepu, przydatne może być również sprawdzenie co realnie skraca czas ładowania sklepu, ponieważ te obszary często mają wspólne przyczyny techniczne, choć CLS i czas ładowania są różnymi zagadnieniami.

Jak sprawdzić CLS sklepu?

Jeżeli zastanawiasz się, jak sprawdzić CLS sklepu, nie ograniczaj się do ręcznego odświeżenia strony. Pierwszym krokiem może być PageSpeed Insights, gdzie można zobaczyć dane dotyczące Core Web Vitals oraz wyniki pomiarów laboratoryjnych. Warto rozróżniać dane rzeczywistych użytkowników od wyników pojedynczego testu laboratoryjnego.

Dane polowe pokazują doświadczenia użytkowników w rzeczywistych warunkach. Mogą więc ujawnić problemy, których nie widać podczas lokalnego testu. Wynik laboratoryjny jest natomiast przydatny do kontrolowanego sprawdzania konkretnej strony i szukania technicznych przyczyn problemu.

Do analizy można wykorzystać także Chrome DevTools. Narzędzia wydajności przeglądarki pozwalają nagrać zachowanie strony i znaleźć zdarzenia związane z przesunięciami układu. To szczególnie przydatne wtedy, gdy sklep wygląda stabilnie podczas zwykłego oglądania, ale wynik CLS nadal jest niezadowalający.

W przypadku danych zebranych od użytkowników przydatny jest również raport Core Web Vitals w Google Search Console. Pozwala on zobaczyć, które grupy adresów mają problemy z daną metryką. Dla sklepu oznacza to możliwość znalezienia wzorca, na przykład sytuacji, w której wiele kart produktów korzystających z tego samego szablonu ma podobny problem.

Podczas sprawdzania CLS zwróć uwagę na trzy rzeczy. Najpierw sprawdź sam wynik. Następnie znajdź elementy, które zmieniają pozycję. Na końcu ustal, dlaczego przeglądarka nie mogła wcześniej ustabilizować układu.

Samo zmniejszenie liczby skryptów bez sprawdzenia przyczyny nie jest jeszcze rozwiązaniem problemu. Jeżeli źródłem CLS jest obraz bez wymiarów, trzeba zająć się obrazem i jego kontenerem. Jeżeli problem powoduje font, trzeba przeanalizować sposób jego ładowania i dopasowanie fontu zastępczego. Jeżeli przesuwa się baner, trzeba sprawdzić jego miejsce w układzie.

Przy większym sklepie dobrze jest testować nie jedną stronę, ale reprezentatywne typy podstron. Inaczej może zachowywać się strona główna, inaczej lista kategorii, karta produktu, koszyk i checkout. Szczególnie ważne są szablony współdzielone przez dużą liczbę adresów.

Jak ograniczyć przesunięcia elementów?

Pierwszy krok to zapewnienie przestrzeni dla elementów, których rozmiar jest znany. W przypadku obrazów i filmów przeglądarka powinna móc określić proporcje lub docelowy obszar przed zakończeniem pobierania zasobu. Dzięki temu kolejne elementy nie muszą czekać na jego załadowanie, aby ustalić swoją pozycję.

W przypadku banerów i reklam trzeba przygotować kontener o odpowiednim rozmiarze. Nie należy najpierw wyświetlać pustego miejsca o minimalnej wysokości, a później nagle zwiększać jego wysokości, jeśli można od początku określić właściwy obszar. Trzeba też uważać na sytuację odwrotną, czyli usuwanie zarezerwowanego miejsca, gdy element zewnętrzny nie zwróci treści.

Przy elementach dynamicznych sprawdź, czy naprawdę muszą być dodawane w miejscu, które przesuwa główną treść. Jeżeli komunikat lub panel może zostać pokazany jako nakładka, bez zmiany pozycji całej strony, takie rozwiązanie może ograniczyć ryzyko przesunięć. Nie zawsze będzie jednak właściwe z punktu widzenia użyteczności, dlatego trzeba ocenić konkretny komponent.

Fonty wymagają osobnej analizy. Sprawdź, jaki font jest używany podczas pierwszego renderowania i jak wygląda jego zamiana na właściwy krój. Jeżeli oba fonty znacząco różnią się wymiarami, po załadowaniu właściwego pliku może zmienić się układ tekstu. Przy optymalizacji można wykorzystać między innymi ustawienia związane z font-display oraz parametry dopasowania fontu zastępczego.

Nie zakładaj też, że lazy loading automatycznie rozwiązuje problem. Opóźnione ładowanie obrazu może być korzystne dla wydajności, ale jeśli miejsce dla obrazu nie jest wcześniej zarezerwowane, jego pojawienie się może spowodować przesunięcie treści. Wydajność trzeba więc analizować jako całość, a nie przez pojedynczą technikę.

Jeżeli sklep korzysta z wielu dodatkowych modułów, sprawdź je osobno. W WooCommerce mogą to być wtyczki marketingowe, systemy opinii, integracje płatności, rekomendacje produktów i skrypty analityczne. W PrestaShop podobną rolę mogą odgrywać moduły dodające bannery, pop-upy, rekomendacje, czaty i zewnętrzne widgety. Sam fakt, że moduł jest potrzebny biznesowo, nie oznacza, że powinien być ładowany bez przygotowania miejsca w układzie.

Przy problemach z wydajnością całego sklepu można również sprawdzić jak przyspieszyć sklep WooCommerce i PrestaShop, szczególnie gdy CLS występuje razem z innymi problemami z ładowaniem strony.

Jak czytać wynik CLS i nie wyciągać błędnych wniosków?

CLS jest wartością bez jednostki. Nie oznacza sekund ani milisekund. Jest wynikiem obliczenia uwzględniającego zakres i odległość przesunięcia elementów.

W uproszczonej interpretacji można przyjąć, że wynik do 0,1 mieści się w zalecanym dobrym zakresie. Wynik powyżej 0,25 wskazuje na słabą stabilność wizualną. Jeżeli wynik znajduje się pomiędzy tymi wartościami, strona wymaga analizy i poprawy konkretnych źródeł przesunięć.

Nie należy jednak porównywać dwóch wyników bez sprawdzenia, w jaki sposób zostały zebrane. Narzędzia laboratoryjne i dane rzeczywistych użytkowników mogą pokazywać inne wartości. Lab test uruchamia stronę w kontrolowanych warunkach i zwykle obserwuje określony przebieg. Dane polowe mogą uwzględniać zachowanie strony przez cały czas wizyty użytkownika.

Różnica między wynikami nie oznacza automatycznie błędu pomiarowego. Może wskazywać na przesunięcia, które pojawiają się dopiero po pierwszym załadowaniu, podczas przewijania albo po wykonaniu określonych działań. Dlatego przy analizie sklepu trzeba sprawdzać nie tylko początkowy ekran, ale również dalsze elementy strony.

Najważniejsze pojęcia związane z CLS i ich znaczenie

Pojęcie	Znaczenie
CLS	Metryka opisująca nieoczekiwane przesunięcia widocznych elementów strony.
Cumulative Layout Shift	Pełna nazwa metryki CLS, związana ze stabilnością wizualną strony.
Layout shift	Zmiana pozycji widocznego elementu pomiędzy kolejnymi klatkami renderowania.
Impact fraction	Udział obszaru widoku objętego przesunięciem elementów.
Distance fraction	Wielkość przesunięcia elementu względem rozmiaru obszaru widoku.
Session window	Skupisko przesunięć używane przy obliczaniu współczesnej metryki CLS.
Core Web Vitals	Zestaw metryk służących do oceny wybranych aspektów doświadczenia użytkownika.
Dane polowe	Dane pochodzące z rzeczywistych wizyt użytkowników.
Dane laboratoryjne	Wyniki testu przeprowadzonego w kontrolowanym środowisku pomiarowym.

CLS a doświadczenie zakupowe

W sklepie CLS nie jest wyłącznie parametrem technicznym. Przesunięcie elementów może bezpośrednio zmienić sposób, w jaki użytkownik korzysta z interfejsu. Jeżeli przycisk, filtr, zdjęcie albo informacja o dostawie zmieni położenie w momencie, gdy klient próbuje z niego skorzystać, problem staje się widoczny bez żadnego narzędzia diagnostycznego.

Szczególną uwagę trzeba zwrócić na elementy interaktywne. Przyciski dodania do koszyka, wybór wariantu, filtry, sortowanie, przejście do koszyka oraz przyciski rozpoczęcia płatności powinny zachowywać stabilną pozycję. Warto wykonać test ręczny na telefonie, ponieważ ograniczona szerokość ekranu sprawia, że nawet niewielka zmiana wysokości tekstu może przesunąć dużą część widoku.

Dobrym testem jest także przejście przez zakup bez korzystania z pamięci podręcznej przeglądarki. Wtedy łatwiej zauważyć elementy, które pojawiają się dopiero po pobraniu zewnętrznych zasobów. W przypadku sklepu produkcyjnego trzeba dodatkowo sprawdzić wersję mobilną, różne typy produktów oraz strony, na których działają dodatkowe skrypty.

Nie każdą zmianę układu trzeba eliminować. Interfejs sklepu może reagować na działania użytkownika i dynamicznie pokazywać nowe informacje. Celem jest ograniczenie nieoczekiwanych przesunięć, a nie zamrożenie całej strony. Jeżeli zmiana jest konsekwencją świadomego kliknięcia i użytkownik wie, czego się spodziewać, sytuacja jest inna niż w przypadku samoczynnego przeskoczenia treści.

CLS w praktycznym audycie sklepu

Przy audycie najlepiej zacząć od stron, które mają znaczenie dla sprzedaży i jednocześnie reprezentują główne szablony sklepu. Nie trzeba od razu analizować każdego adresu osobno. Najpierw znajdź powtarzające się komponenty.

Sprawdź stronę główną, kategorię, kartę produktu oraz proces koszyka i zamówienia. Na każdej stronie wykonaj test w warunkach zbliżonych do rzeczywistego użytkownika. Obserwuj pierwszy ekran, przewijanie i pojawianie się elementów zewnętrznych.

Następnie przejdź do narzędzia pomiarowego i sprawdź CLS oraz elementy wskazane jako przesuwające się. Jeżeli kilka podstron ma wspólny komponent powodujący przesunięcie, najpierw analizuj źródło wspólne dla tych stron. Naprawa szablonu może wtedy dotyczyć wielu adresów jednocześnie.

Sprawdź kod odpowiedzialny za obrazy, kontenery reklamowe, fonty i dynamiczne elementy. Zobacz, czy rozmiar elementu jest znany przed jego załadowaniem. Jeżeli nie, ustal, czy można zarezerwować przestrzeń. W przypadku skryptów zewnętrznych sprawdź, czy są naprawdę potrzebne na danej podstronie i czy ich sposób działania wymusza zmianę układu.

Po zmianach wykonaj ponowny pomiar. Nie zakładaj, że pojedyncza modyfikacja rozwiązała problem tylko dlatego, że podczas ręcznego odświeżenia strona wygląda lepiej. Trzeba ponownie sprawdzić wynik oraz konkretne przesunięcia.

Jeżeli sklep ma rozbudowany kod, wiele integracji i różne szablony, co naprawdę sprawdzić w Core Web Vitals sklepu może pomóc uporządkować szerszą kontrolę wydajności zamiast analizowania CLS w całkowitym oderwaniu od pozostałych metryk.

W praktyce właśnie takie podejście daje najwięcej informacji: najpierw znaleźć element, który się przesuwa, później ustalić, co powoduje zmianę jego pozycji, a na końcu sprawdzić, czy po modyfikacji problem rzeczywiście zniknął z pomiaru.

Podsumowanie: CLS trzeba sprowadzić do konkretnego elementu

CLS odpowiada na proste pytanie: czy zawartość strony pozostaje stabilna, czy użytkownik obserwuje nieoczekiwane przesunięcia? W sklepie źródłem problemu mogą być obrazy bez określonych wymiarów, reklamy, banery, fonty, widgety, skrypty zewnętrzne oraz dynamicznie dodawana treść.

Jeżeli wynik CLS jest zbyt wysoki, nie zaczynaj od przypadkowego wyłączania wtyczek albo skryptów. Najpierw znajdź elementy odpowiedzialne za przesunięcia. Następnie sprawdź, dlaczego ich rozmiar lub pozycja nie są znane przeglądarce odpowiednio wcześnie.

Do sprawdzenia wykorzystaj dane rzeczywistych użytkowników, PageSpeed Insights, Search Console oraz narzędzia dostępne w Chrome DevTools. Porównuj wyniki z uwzględnieniem różnicy między pomiarem laboratoryjnym a danymi polowymi.

Jeżeli chcesz przełożyć pomiar CLS na konkretną listę problemów technicznych w swoim sklepie, audyt szybkości sklepu internetowego pozwala przejść od samego wyniku metryki do analizy elementów, które wymagają sprawdzenia.

CLS nie jest abstrakcyjną liczbą w raporcie. Za każdym wynikiem stoją konkretne elementy strony. To właśnie ich zachowanie trzeba znaleźć, zmierzyć i poprawić.