CLS: skąd biorą się przeskoki układu strony i jak je trwale usunąć

Czym jest CLS i co dokładnie mierzy

CLS mierzy stabilność wizualną strony, czyli to, czy jej elementy pozostają na swoich miejscach, gdy użytkownik już na nią patrzy. Dokumentacja web.dev opisuje go jako miarę największej serii niespodziewanych przesunięć układu, do jakich dochodzi w całym okresie życia strony. Przesunięcie układu następuje wtedy, gdy widoczny element zmienia położenie między jedną wyświetloną klatką a następną.

Każdy zna tę sytuację z własnego doświadczenia. Czytelnik zaczyna czytać akapit, nad tekstem doładowuje się zdjęcie i cała treść zjeżdża w dół. Klient sklepu chce nacisnąć przycisk dodania produktu do koszyka, w ostatniej chwili nad przyciskiem pojawia się baner i palec trafia w zupełnie inny odnośnik. Dla właściciela firmy to nie tylko kwestia estetyki. Takie przeskoki powodują pomyłki przy wypełnianiu formularzy, przypadkowe kliknięcia i zwykłe zniecierpliwienie.

CLS jest jednym z trzech wskaźników Core Web Vitals (podstawowych wskaźników internetowych). Należy do tej samej grupy co LCP, który opisuje szybkość wyświetlenia głównej treści, oraz INP, który opisuje szybkość reakcji strony na działania użytkownika. Wszystkie trzy omawiamy szerzej we wpisie Core Web Vitals: jak poprawić LCP, INP i CLS na stronie firmy. Tutaj skupiamy się wyłącznie na przesunięciach układu, ponieważ mają one inne przyczyny niż wolne ładowanie i wymagają innych poprawek.

Jakie znaczenie ma CLS dla widoczności w Google

Google w dokumentacji Search Central wyjaśnia, że jego główne systemy rankingowe starają się nagradzać strony zapewniające dobre wrażenia z korzystania, a podstawowe wskaźniki internetowe są jednym z elementów tej oceny, obok innych aspektów jakości strony. Nie oznacza to, że sam dobry wynik CLS podniesie pozycje. Stabilny układ to jeden z wielu czynników, a o widoczności w dużo większym stopniu decyduje trafność i jakość treści. Warto go jednak poprawić także z innego powodu: strona, na której nic nie przeskakuje, jest po prostu wygodniejsza dla klientów.

Jak liczony jest wynik CLS

Wynik pojedynczego przesunięcia to iloczyn dwóch wartości: udziału obszaru objętego zmianą i udziału odległości. Tak opisuje to dokumentacja web.dev. Pierwsza wartość mówi, jaką część widocznego obszaru ekranu zajęły niestabilne elementy, licząc łącznie ich położenie przed przesunięciem i po nim. Druga mówi, o jaki ułamek większego wymiaru ekranu przesunął się element, który przebył najdłuższą drogę.

Najłatwiej zrozumieć to na przykładzie podanym w dokumentacji. Element zajmuje połowę widocznego obszaru i przesuwa się w dół o jedną czwartą wysokości ekranu. Obszar objęty zmianą to trzy czwarte ekranu, czyli 0,75. Odległość to 0,25. Wynik przesunięcia wynosi 0,75 razy 0,25, czyli 0,1875. Jedno takie zdarzenie wystarcza, aby strona wyszła poza próg dobrej oceny.

Z tego wzoru płyną dwa praktyczne wnioski. Duży element przesunięty o kilka pikseli szkodzi wynikowi niewiele, bo odległość jest mała. Natomiast niewielki baner wstawiony na samej górze strony szkodzi bardzo, ponieważ spycha w dół całą resztę treści, a więc obejmuje zmianą niemal cały ekran.

Dlaczego liczy się największa seria, a nie suma wszystkich przesunięć

CLS nie jest sumą wszystkich przesunięć z całej wizyty. Przesunięcia następujące szybko po sobie łączone są w serie, które dokumentacja nazywa oknami sesji. Do jednej serii należą przesunięcia oddzielone przerwą krótszą niż 1 sekunda, a cała seria trwa najwyżej 5 sekund. Wynikiem strony jest seria o najwyższej łącznej wartości. Dzięki temu strona otwarta przez długi czas, na przykład panel klienta albo długa lista produktów, nie jest karana za samą długość wizyty.

Które przesunięcia nie są wliczane

Do wyniku liczą się tylko przesunięcia niespodziewane. Jeśli użytkownik naciska przycisk i w odpowiedzi rozwija się lista albo formularz, jest to zmiana oczekiwana. Według web.dev przesunięcia, które następują w ciągu 500 milisekund od działania użytkownika, otrzymują specjalne oznaczenie i mogą zostać pominięte w obliczeniach. Dotyczy to jednak wyłącznie pojedynczych działań, takich jak dotknięcie, kliknięcie lub naciśnięcie klawisza. Przewijanie strony, przeciąganie i powiększanie palcami nie są traktowane jako takie działanie, dlatego treść doskakująca podczas przewijania nadal obciąża wynik.

Progi te odnoszą się do 75. percentyla wizyt, osobno dla telefonów i komputerów. Mówiąc prościej: strona uzyskuje dobrą ocenę, gdy co najmniej trzy czwarte odwiedzin kończy się wynikiem 0,1 lub niższym. Nie wystarczy więc, że strona działa stabilnie na szybkim komputerze w biurze. Liczy się to, co widzi większość klientów, także tych z wolniejszym telefonem i słabszym zasięgiem.

CLS jest liczbą bez jednostki, a nie czasem w sekundach, dlatego nie poprawi go samo przyspieszenie serwera.

Skąd biorą się przeskoki układu: najczęstsze przyczyny

Przeskoki układu biorą się niemal zawsze z tego samego błędu: przeglądarka nie wie, ile miejsca zajmie element, dopóki go nie pobierze. Najpierw rozkłada na ekranie tekst, a gdy po chwili pojawia się zdjęcie, reklama albo baner, musi rozsunąć treść, aby zrobić dla nich miejsce. Dokumentacja web.dev dotycząca optymalizacji CLS wymienia cztery główne grupy przyczyn: obrazy bez wymiarów, reklamy, osadzone treści i ramki bez wymiarów, treści wstawiane dynamicznie oraz czcionki internetowe. Do tej listy warto dopisać animacje, które zmieniają wymiary lub położenie elementów.

W praktyce naszej agencji te przyczyny rzadko występują pojedynczo. Hydraulik z Łodzi może mieć na stronie baner zgody na pliki cookie wsuwany od góry i zdjęcia realizacji bez podanych wymiarów. Sklep z Poznania zwykle zmaga się z miniaturami produktów, paskiem promocji i opiniami doładowywanymi po czasie. Kancelaria z Krakowa ma prostą stronę, na której jedynym źródłem przeskoku okazuje się ozdobna czcionka nagłówków. Każdy z tych przypadków wymaga innej poprawki, dlatego najpierw trzeba ustalić, co dokładnie się przesuwa.

Dokumentacja dotycząca diagnozowania przesunięć podaje przydatną wskazówkę: duże przesunięcie w dół zwykle oznacza, że coś zostało wstawione nad treścią, natomiast przesunięcie o jeden lub dwa piksele wskazuje raczej na kolidujące reguły stylów albo na podmianę czcionki.

Gdzie sprawdzić CLS swojej strony

Wynik CLS najszybciej sprawdzić w dwóch miejscach: w narzędziu PageSpeed Insights, które działa bez logowania, oraz w raporcie Core Web Vitals w Google Search Console. Oba pokazują dane zebrane od prawdziwych użytkowników przeglądarki Chrome, czyli z raportu na temat użytkowania Chrome, w skrócie CrUX. To te dane, a nie pojedynczy test, opisują rzeczywiste wrażenia klientów.

PageSpeed Insights

Na stronie pagespeed.web.dev wystarczy wpisać adres podstrony w pole na górze i uruchomić analizę przyciskiem obok. Wynik składa się z dwóch części. Górna pokazuje, czego doświadczają rzeczywiści użytkownicy, i to tam znajduje się CLS z danych CrUX. Dolna, poświęcona diagnozie problemów z wydajnością, pokazuje wynik testu laboratoryjnego, czyli jednorazowego wczytania strony w sztucznych warunkach.

Przy odczycie warto zwrócić uwagę na dwie rzeczy. Po pierwsze, czy dane dotyczą konkretnego adresu, czy całej witryny. Gdy podstrona ma zbyt mało odwiedzin, narzędzie pokazuje wynik zbiorczy dla całej domeny. Po drugie, wynik należy sprawdzić osobno dla telefonów i dla komputerów, ponieważ układ na wąskim ekranie przesuwa się zwykle inaczej niż na szerokim.

Raport Core Web Vitals w Search Console

W Search Console służy do tego raport Core Web Vitals, w polskich materiałach Google nazywany także raportem podstawowych wskaźników internetowych. Zgodnie z pomocą Search Console adresy są w nim dzielone na grupy stron o podobnym działaniu, a każda grupa otrzymuje jeden z trzech stanów: dobrej jakości, wymagana poprawa albo słabej jakości. Stan grupy odpowiada jej najsłabszemu wskaźnikowi, więc grupa z dobrym LCP i słabym CLS zostanie oznaczona jako słaba.

Raport grupuje problemy według stanu i rodzaju wskaźnika, a przy każdej grupie podaje przykładowe adresy. To cenna informacja: jeśli w grupie z problemem CLS znajdują się same karty produktów, źródła przeskoku należy szukać w szablonie karty produktu, a nie na stronie głównej.

Po wdrożeniu poprawek można w tym samym raporcie uruchomić weryfikację przyciskiem sprawdzenia poprawki. Pomoc Search Console wyjaśnia, że rozpoczyna to 28-dniowy okres obserwacji, a problem zostaje uznany za naprawiony, jeśli w tym czasie nie wystąpił na żadnym adresie z grupy. Na potwierdzenie trzeba więc poczekać kilka tygodni i nie warto wyciągać wniosków po dwóch dniach.

Dlaczego test pokazuje zero, a użytkownicy widzą przeskoki

Test laboratoryjny mierzy przesunięcia tylko podczas wczytywania strony, natomiast dane od użytkowników obejmują całą wizytę. Dokumentacja web.dev podkreśla, że z tego powodu wynik laboratoryjny bywa niższy niż rzeczywisty. Duża różnica między obiema częściami raportu PageSpeed Insights zwykle wskazuje, że przesunięcia powstają po załadowaniu: podczas przewijania, po doczytaniu kolejnych produktów albo po pojawieniu się okna czatu. Dochodzi do tego różnica warunków. Na komputerze osoby, która tworzy stronę, obrazy są zapisane w pamięci przeglądarki i pojawiają się natychmiast, a u klienta pobierają się dłużej.

Jak nagrać przesunięcia w narzędziach Chrome

Konkretny element odpowiedzialny za przeskok najłatwiej wskazać w panelu Performance (Wydajność) w narzędziach dla programistów przeglądarki Chrome. Narzędzia otwiera klawisz F12 albo polecenie zbadania elementu z menu pod prawym przyciskiem myszy. Sposób pracy opisuje dokumentacja web.dev poświęcona diagnozowaniu przesunięć układu.

Panel Performance po otwarciu pokazuje widok wskaźników na żywo. Wartość CLS zmienia się tam na bieżąco w trakcie korzystania ze strony, więc już samo przewinięcie podstrony od góry do dołu i kliknięcie kilku elementów pozwala stwierdzić, w którym momencie wynik rośnie. Aby dowiedzieć się, co dokładnie się przesunęło, trzeba nagrać zapis działania strony.

1. Przygotowanie warunków

   W narzędziach warto włączyć widok urządzenia mobilnego i spowolnienie sieci. Przy szybkim łączu zdjęcia i czcionki pojawiają się tak szybko, że przesunięcie trudno zauważyć.

2. Nagranie z przeładowaniem strony

   W panelu Performance należy uruchomić nagrywanie połączone z ponownym wczytaniem strony, odczekać do pełnego załadowania, przewinąć stronę i zatrzymać zapis.

3. Odczytanie ścieżki Layout Shifts

   W zapisie pojawia się ścieżka Layout Shifts (przesunięcia układu). Fioletowe paski oznaczają serie przesunięć, a romby pojedyncze zdarzenia. Im większy romb, tym większe przesunięcie.

4. Kliknięcie w romb

   Po kliknięciu przeglądarka odtwarza animację przesunięcia, a w podsumowaniu podaje czas zdarzenia, jego wynik oraz listę elementów, które zmieniły położenie.

5. Przejrzenie podpowiedzi

   W części z analizami znajduje się pozycja Layout shift culprits, czyli lista prawdopodobnych sprawców przesunięć razem z łącznym wynikiem CLS dla nagrania.

Przy czytaniu wyników łatwo o pomyłkę, przed którą ostrzega dokumentacja: element wskazany jako przesunięty często jest ofiarą, a nie sprawcą. Jeśli przesunął się akapit, to przyczyną jest zazwyczaj coś, co pojawiło się nad nim. Trzeba więc sprawdzić, jaki element w tym samym momencie został wstawiony albo zmienił wysokość.

Podświetlanie przesunięć na żywo

Drugim przydatnym narzędziem jest opcja Layout Shift Regions (obszary przesunięć układu). Znajduje się w zakładce Rendering, którą otwiera się z menu narzędzi w pozycji More tools. Po jej włączeniu każdy fragment strony, który zmienił położenie, na moment podświetla się na fioletowo. To wygodny sposób, aby pokazać problem osobie nietechnicznej: wystarczy wczytać stronę i obserwować, które miejsca migają.

Dokumentacja radzi, aby przesunięć szukać cierpliwie: przez kilka do dziesięciu minut korzystać ze strony tak jak klient, na różnych urządzeniach i przy wolniejszym połączeniu. Wiele przeskoków ujawnia się dopiero po otwarciu menu, zmianie wariantu produktu albo rozwinięciu opisu. Z naszych obserwacji wynika, że nagranie warto wykonać osobno dla każdego typu podstrony, ponieważ każdy szablon ma zwykle własne źródło przesunięć.

Jeśli chcą Państwo zamówić SEO techniczne, zachęcamy do kontaktu: tel. 222 500 844 lub mailowo: biuro@pozycjonowaniestron.pl

Obrazy, filmy i osadzone treści: jak zarezerwować miejsce

Miejsce na obraz rezerwuje się przez podanie jego szerokości i wysokości w kodzie strony. Przeglądarka wylicza z tych dwóch liczb proporcje i od razu zostawia odpowiednio duży prostokąt, jeszcze zanim pobierze plik. Gdy zdjęcie się pojawia, wypełnia przygotowane pole i nic wokół się nie przesuwa. To najprostsza i zarazem najczęściej pomijana poprawka.

<img src="lazienka-po-remoncie.jpg" width="640" height="360" alt="Łazienka po remoncie">

img {
  width: 100%;
  height: auto;
}

Wartości w atrybutach nie muszą odpowiadać rozmiarowi, w jakim obraz jest ostatecznie wyświetlany. Ważne, aby zgadzały się proporcje. Reguła z wysokością ustawioną na wartość automatyczną sprawia, że zdjęcie dopasowuje się do szerokości kontenera, zachowując właściwy kształt. Dokumentacja web.dev zwraca uwagę, że przy obrazach podawanych w kilku rozmiarach dla różnych ekranów wszystkie wersje powinny mieć te same proporcje, bo wtedy wystarcza jedna para wymiarów. O formatach plików, nazwach i opisach zdjęć piszemy osobno we wpisie o obrazach na stronie a SEO.

Tam, gdzie nie ma znacznika obrazu, na przykład przy oknie odtwarzacza filmu, miejsce rezerwuje właściwość aspect-ratio w arkuszu stylów. Kontener o stałych proporcjach zajmuje właściwą wysokość od pierwszej chwili, niezależnie od tego, kiedy pojawi się jego zawartość.

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

.reklama {
  min-height: 250px;
}

Reklamy, mapy i inne ramki

Reklamy, mapy, osadzone filmy i okna zewnętrznych usług wymagają kontenera o minimalnej wysokości albo o stałych proporcjach. Kłopot polega na tym, że reklama może mieć różne rozmiary. Dokumentacja wskazuje dwa wyjścia: zarezerwować miejsce na najmniejszy możliwy format i pogodzić się z niewielkim przesunięciem albo przygotować większy kontener kosztem pustego pola wokół mniejszej reklamy. Różnice między telefonem a komputerem obsługuje się osobnymi regułami dla różnych szerokości ekranu.

Częstym błędem jest zwijanie pustego kontenera, gdy reklama się nie wyświetli. Usunięcie zarezerwowanego miejsca przesuwa treść tak samo jak wstawienie nowego elementu, dlatego lepiej pozostawić w tym polu element zastępczy. Warto też umieszczać elementy ładujące się z opóźnieniem niżej na stronie, gdzie ich wpływ na wynik jest mniejszy niż na samej górze.

Czcionki internetowe a przesunięcia tekstu

Czcionka internetowa powoduje przesunięcie wtedy, gdy przeglądarka najpierw wyświetla tekst czcionką zastępczą, a po pobraniu właściwego pliku ją podmienia. Litery obu krojów mają inną szerokość i wysokość, więc nagłówek, który mieścił się w jednym wierszu, nagle zajmuje dwa i spycha w dół resztę strony. Dokumentacja zaznacza, że problem występuje również wtedy, gdy tekst jest przez chwilę niewidoczny, ponieważ także niewidoczny tekst zajmuje miejsce wyliczone dla czcionki zastępczej.

O tym, jak przeglądarka zachowuje się w czasie pobierania kroju, decyduje właściwość font-display. Opracowanie web.dev o dobrych praktykach dotyczących czcionek wyjaśnia, że wartości auto, block, swap i fallback mogą prowadzić do przesunięcia w chwili podmiany. Jedynie wartość optional daje pewność, że podmiana nie przesunie układu, ponieważ czcionka internetowa zostaje użyta tylko wtedy, gdy jest dostępna niemal od razu. Ceną jest to, że przy wolnym połączeniu użytkownik zobaczy stronę w kroju zastępczym.

Jeżeli firmowy krój ma być widoczny zawsze, pozostaje ograniczanie skutków podmiany. Pomagają w tym trzy działania opisane w dokumentacji. Pierwsze to wskazanie rozsądnej czcionki zastępczej w regule font-family, podobnej kształtem do docelowej. Bez takiego wskazania Chrome sięga po krój Times, który rzadko przypomina nowoczesne czcionki bezszeryfowe. Drugie to dopasowanie wymiarów czcionki zastępczej właściwościami size-adjust, ascent-override, descent-override i line-gap-override, tak aby tekst w obu krojach zajmował tyle samo miejsca. Trzecie to wcześniejsze pobranie najważniejszego pliku czcionki za pomocą znacznika link z atrybutem rel o wartości preload. Z tym ostatnim należy postępować ostrożnie, ponieważ wcześniejsze pobieranie zabiera zasoby przeglądarki innym plikom i powinno obejmować tylko najważniejsze kroje.

@font-face {
  font-family: "Zastepcza";
  src: local("Arial");
  size-adjust: 105%;
  ascent-override: 92%;
}

h1, h2, p {
  font-family: "Krój firmowy", "Zastepcza", sans-serif;
}

Banery, komunikaty i treści doładowywane po czasie

Baner albo komunikat nie powinien być wstawiany nad treścią, która jest już widoczna. Jeżeli musi się pojawić, to albo w miejscu przygotowanym z góry, albo jako nakładka, która leży nad stroną i nie rozpycha jej zawartości. Dokumentacja wymienia tu banery, formularze zapisu i komunikaty o plikach cookie jako typowe elementy dopisywane do strony z opóźnieniem.

Baner zgody na pliki cookie

Opracowanie web.dev o komunikatach dotyczących plików cookie nazywa je bardzo częstym źródłem przesunięć układu. Najwięcej problemów sprawia pasek wyświetlany na górze ekranu, który po załadowaniu spycha całą stronę w dół. Zalecane jest umieszczenie komunikatu przy dolnej krawędzi jako przyklejonej stopki albo w formie okna nakładanego na stronę. Oba rozwiązania nie należą do zwykłego układu treści, więc ich pojawienie się niczego nie przesuwa. Mniejsze okno jest przy tym bezpieczniejsze dla wygody użytkownika niż plansza zasłaniająca większość ekranu.

Ostrożności wymagają efekty wsuwania, bo zależnie od wykonania mogą same wywoływać przesunięcia. Od strony prawnej sposób zbierania zgód to odrębne zagadnienie, które warto omówić z prawnikiem. Od strony technicznej chodzi wyłącznie o to, aby komunikat nie rozpychał treści.

Opinie, polecane produkty, kolejne pozycje listy

Treść pobierana po załadowaniu strony powinna trafiać do kontenera, który ma już zarezerwowaną wysokość. Dokumentacja podaje praktyczną granicę: jeśli pobranie zawartości trwa dłużej niż 500 milisekund, miejsce na nią należy przygotować z góry, na przykład w postaci szarego zarysu przyszłej treści. Inne zalecane rozwiązania to wymiana zawartości wewnątrz pola o stałym rozmiarze, tak jak w karuzeli, oraz doładowywanie kolejnych pozycji dopiero po naciśnięciu przycisku przez użytkownika. Przesunięcie następujące bezpośrednio po kliknięciu jest traktowane jako oczekiwane.

W sklepie z Poznania z naszego przykładu oznaczałoby to trzy zmiany: pasek promocji na stałe wpisany w nagłówek zamiast wstawiania go skryptem, blok opinii z ustaloną minimalną wysokością oraz przycisk doczytania kolejnych produktów w miejsce automatycznego dopisywania ich podczas przewijania. Podobne zasady stosujemy przy pozycjonowaniu sklepów internetowych, gdzie szablon karty produktu powtarza się na bardzo wielu adresach.

Animacje, które nie przesuwają układu

Animacja nie obciąża wyniku CLS, jeśli korzysta z właściwości transform. Dokumentacja zaleca przesuwanie elementów funkcją translate zamiast zmiany właściwości top, left, right i bottom oraz skalowanie funkcją scale zamiast zmiany szerokości i wysokości. Zmiana wymiarów lub położenia w zwykły sposób zmusza przeglądarkę do ponownego ułożenia sąsiednich elementów, a to właśnie jest przesunięcie układu.

Jak utrwalić efekt i jakich pomyłek unikać

Przesunięcia znikają na stałe dopiero wtedy, gdy poprawka trafia do szablonu strony, a nie do pojedynczej podstrony, i gdy każda późniejsza zmiana w serwisie jest sprawdzana pod tym samym kątem. CLS łatwo poprawić i równie łatwo zepsuć: wystarczy nowa wtyczka z paskiem promocji, okno czatu albo zdjęcie wstawione do wpisu bez wymiarów.

Najczęstszą pomyłką jest ocenianie strony wyłącznie po wyniku testu laboratoryjnego. Druga pomyłka to sprawdzanie tylko strony głównej, podczas gdy raport w Search Console wskazuje zwykle na karty produktów albo wpisy. Trzecia to naprawianie elementu, który się przesunął, zamiast tego, który go przesunął.

• Każdy obraz i film ma podaną szerokość i wysokość albo proporcje ustawione w stylach.
• Kontenery na reklamy, mapy i osadzone treści mają minimalną wysokość i nie zwijają się, gdy pozostają puste.
• Baner zgody na pliki cookie i paski promocji są nakładkami albo mają miejsce przygotowane w układzie.
• Czcionka zastępcza jest dobrana do docelowej, a najważniejszy krój pobiera się wcześniej.
• Treści doładowywane po czasie trafiają do pól o ustalonej wysokości.
• Animacje korzystają z właściwości transform, a nie ze zmiany wymiarów i położenia.
• Każdy szablon podstrony został nagrany w panelu Performance na telefonie i na komputerze.
• W Search Console uruchomiono weryfikację poprawki i odczekano pełny okres obserwacji.

Kiedy potrzebna jest pomoc specjalisty

Część poprawek da się wprowadzić samodzielnie w panelu systemu, na przykład w WordPressie: zmienić położenie banera w ustawieniach wtyczki albo wyłączyć zbędny pasek. Pomoc programisty jest potrzebna wtedy, gdy źródło leży w szablonie, w skryptach zewnętrznych dostawców albo w sposobie wczytywania czcionek. W takich sytuacjach ocena stabilności układu wchodzi w zakres SEO technicznego i jest jednym z punktów, które obejmuje audyt SEO. Przy budowie nowego serwisu najprościej jest zaplanować miejsce na wszystkie elementy już na etapie projektowania UX, zanim powstanie kod.

Jeśli chcą Państwo zamówić SEO techniczne, zachęcamy do kontaktu: tel. 222 500 844 lub mailowo: biuro@pozycjonowaniestron.pl