Czym jest Cumulative Layout Shift? Jak zdiagnozować i wyeliminować błędy CLS?

Czym są Skumulowane Przesunięcia Układu?

Zbiorcze Zmiany Układu (ang. Cumulative Layout Shift, CLS) to metryka wchodząca w skład Core Web Vitals, której zadaniem jest pomiar częstotliwości, z jaką użytkownicy doświadczają nieoczekiwanych zmian układu podczas interakcji z Twoja witryną internetową. Google wykorzystuje CLS na potrzeby ogólnodostępnego narzędzia dla programistów – mowa oczywiście o PageSpeed Insight. To narzędzie pozwala programistom na definiowanie przesunięć układów i ich dalszą optymalizację. 

Cumulative Layout Shift mierzy sumę wszystkich indywidualnych wyników w układzie dla każdego nieoczekiwanego przesunięcia, które występuje podczas ładowania strony. 

Wynik dla każdego z takich przesunięć jest obliczany w następujący sposób: 

Szerokość rzutni * wysokość rzutni * odległość przesunięcia

Wynik jest następnie mnożony przez współczynnik wagi, tak aby uwzględnić wszystkie postrzegane przez użytkownika zmiany. Ogólny współczynnik wagi przyjęty przez Google to 1,0. Należy tutaj zaznaczyć, że Google nieustannie pracuje nad poprawą pomiaru wskaźnika CLS, który obecnie bada różne sposoby zmiany układu w oparciu o wagę i wrażenia użytkowników. Nikt jednak nie mówi, że ten algorytm nie może zostać w niedługim czasie usprawniony.

Przyczyny Skumulowanych Przesunięć Układu 

Zmiany układów mogą być spowodowane różnymi czynnikami. Do najczęstszych przyczyn zalicza się problemy związane z:

• obrazami lub innymi elementami, które wolno się ładują i zmieniają rozmiar lub położenie,
• dynamicznie generowanymi treściami, które są wstawiane na stronę już po jej załadowaniu, 
• reklamami lub innymi zewnętrznymi zasobami, które pojawiają się na stronie bez wyraźnej zgody użytkowników,
• zmianami w kodzie CSS strony, które nie do końca przedstawiamy użytkownikom w sposób optymalny. 

Wszystkie te czynniki mogą w konsekwencji prowadzić do złych doświadczeń użytkowników, ponieważ w trakcie korzystania z serwisu zawartość strony przesuwa się w momencie jej wyświetlania. Jest to szczególnie frustrujące doświadczenie dla użytkowników, którzy opierają swoją aktywność w sieci o urządzenia mobilne, aktywnie i szybko przesuwając treść palcem.  

Skutki Skumulowanych Przesunięć Układu 

Wysoka miara CLS, jako stosunkowo nowego wskaźnika narzędzia Google PageSpeed Insights, może negatywnie oddziaływać na pozycjonowanie Twojego serwisu. Słabe wrażenia przy pierwszym korzystaniu z witryny nie wpłyną dobrze na dalszą chęć eksplorowania serwisu przez użytkowników. Ponadto, zmiany w układzie mogą mieć również negatywny wpływ na pozycjonowanie Twojej witryny. 

Google, definiując wskaźniki Core Web Vitals jako czynniki rankingowe, bierze pod uwagę stabilność serwisu. Tym samym, podczas ustalania pozycji, Google może uznać Twoją witrynę za mniej trafną, a to będzie skutkować niższą pozycją w wynikach wyszukiwania względem tych innych serwisów, które charakteryzuje stabilny układ witryny. Pamiętaj również, że wysoki CLS może prowadzić do zwiększonej liczby odrzuceń i skróconego czasu spędzonego na stronie, czyli sytuacji zupełnie odwrotnej do tej pożądanej przez webmasterów. 

Zapobieganie Skumulowanym Przesunięciom Układu 

Cumulative Layout Shift, jako metryka zorientowana na użytkownika, z pewnością napawa optymizmem dla dalszych procesów optymalizacyjnych, z jakimi mierzą się dzisiejsze serwisy internetowe. Ile problemów z przesunięciami układów, tyle rozwiązań. Poniżej znajdziesz kilka wskazówek, które możesz wykorzystać, aby odpowiednio zapobiec wysokim wynikom CLS w testach PageSpeed Insights. 

1. Używaj stabilnych szablonów stron internetowych, które zbytnio się nie zmieniają. Pamiętaj, w prostocie tkwi siła! 
2. Jeśli musisz użyć dynamicznych szablonów, upewnij się, że elementy nadmiarowo się nie przesuwają. W razie potrzeb wykorzystaj animacje, by płynnie przenosić elementy na ich nowe pozycje. 
3. Dla responsywnych szablonów stron internetowych upewnij się, że zmiany w szablonie będą płynne i nie spowodują wielu przesunięć.
4. Unikaj wykorzystywania JavaScriptu do określania pozycji elementów. Warto zaznaczyć, że wykorzystanie CSS do ustalenia bezwzględnej lub stałej pozycji jest znacznie stabilniejszym rozwiązaniem. 
5. Nie zapomnij o tym, żeby wszystkie obrazy i filmy w obrębie witryny miały precyzyjnie określony atrybut wysokości i szerokości. Dzięki temu zagwarantujesz przeglądarce zarezerwowanie odpowiedniej ilości miejsca i ograniczysz możliwe przesunięcia w układzie podczas ładowania 
6. Zweryfikuj i popraw ewentualne błędy w zachowaniu czcionek podczas ładowania układu stron internetowych. 

Łagodzenie Skumulowanych Przesunięć Układu

Poznałeś już techniki, które pozwolą Ci zapobiec ewentualnemu przesunięciu układu. Na koniec przygotowaliśmy dla Ciebie jeszcze najważniejsze porady dotyczące łagodzenia Skumulowanych Przesunięć Układu.

• Jednym z innych sposobów łagodzenia skutków tzw. Layout Shifts, jest umieszczanie najważniejszych elementów układu u góry strony, dzięki czemu zapewnisz logiczną i spójną kolejność szablonu strony internetowej. 
• Definiując wysokość i szerokość grafik nie zapomnij o tym, aby współtowarzyszący im tekst również nie był ani za mały ani za duży. Dodatkowe animacje również mogą być czynnikiem zapalnych do dużych przesunięć szablonu witryny, dlatego tak ważnym jest unikanie ich nadmiernego wykorzystywania. 

Na koniec, warto wspomnieć o odpowiednich technikach buforowania, które mogą pomóc w zmniejszeniu wysokich wartości zmian układów. Pamiętaj, że odpowiednie buforowanie jest w stanie wpłynąć na skrócenie czasu potrzebnego do załadowania strony, a to z kolei może pomóc Ci w zmniejszeniu wysokich wartości wskaźników CLS. 

W celu diagnozy problemów Skumulowanych Pprzesunięć Układu pomocnym będzie raport Google Search Console. Dzięki niemu zweryfikujesz, jak często zmienia się układ stron w obrębie Twojej witryny. Co więcej, to narzędzie pomoże Ci we wskazaniu stron, których problem dotyczy.  

Poza Google Search Console, istnieje kilka innych równie wartościowych narzędzi, które pomogą Ci zdiagnozować problemy na tle Skumulowanych Przesunięć Układu:

• Lighthouse – oprócz wyznaczenia ewentualnych błędów wskaże również potencjalne rozwiązania problemu,
• Google PageSpeed Insights – bazując na wynikach testów prędkości PageSpeed Insights, oprócz wyznaczenia problemów CLS, uzyskasz również pełny wgląd w całkowitą wydajność ładowania strony. 

Weronika Łojewska

Marketing Manager, Link Building Specialist

Moje publikacje