Co to jest cumulation layout shift?

Cumulative layout shift (CLS) to jedna z metryk wydajności webowej, która wchodzi w skład Core Web Vitals – inicjatywy Google mającej na celu dostarczenie jednolitych wskaźników oceny doświadczeń użytkowników na stronach internetowych. CLS mierzy ilość nieoczekiwanych przesunięć elementów wizualnych na stronie podczas jej ładowania. Wyższe wartości CLS mogą wskazywać na gorsze doświadczenia użytkownika, które mogą prowadzić do frustracji i zniechęcania do dalszego korzystania ze strony. Czym jest Cumulative Layout Shift, jak jest mierzony, jakie są jego przyczyny oraz jak można go poprawić?

Cumulation layout shift — definicja

Cumulative layout shift jest wskaźnikiem, który mierzy sumę wszystkich znaczących przesunięć layoutu strony internetowej, które występują podczas jej ładowania. Przesunięcie layoutu następuje, gdy widoczny element zmienia swoje położenie od jednej klatki renderowanej do następnej. Wskaźnik ten pomaga zrozumieć, w jakim stopniu strona jest stabilna wizualnie od momentu jej pierwszego ładowania do momentu pełnego załadowania.

Jak mierzyć cumulation layout shift?

Cumulative layout shift (CLS) jest obliczany na podstawie sumy przesunięć wszystkich nieoczekiwanych zmian w układzie strony podczas jej ładowania. Każde takie przesunięcie jest mierzone indywidualnie, a metryka CLS uwzględnia dwa główne czynniki:

• Impact Fraction, czyli procentowy udział powierzchni ekranu zajmowany przez element przed i po przesunięciu.
• Distance Fraction, czyli procentowa odległość, na którą element się przesunął w stosunku do pełnej widocznej wysokości ekranu.

Obliczanie metryki CLS krok po kroku:

1. Znalezienie wszystkich przesunięć elementów, które występują podczas ładowania strony.
2. Dla każdego przesunięcia obliczane są wartości impact fraction i distance fraction.
3. Wartość CLS jest sumą produktów obliczeń impact fraction i distance fraction dla każdego przesunięcia.

Przykład:

Element zajmujący 50% ekranu przesuwa się o 25% jego wysokości. W tym przypadku impact fraction wynosi 0.5, a distance fraction 0.25. CLS dla tego przesunięcia wynosi 0.5 * 0.25 = 0.125.

Narzędzia do pomiaru CLS

Do mierzenia CLS można używać różnych narzędzi, które pomagają w identyfikacji i analizie przesunięć na stronach internetowych:

• Google Lighthouse. Zintegrowane narzędzie do analizy wydajności stron, które dostarcza szczegółowe raporty na temat CLS oraz innych metryk.
• Web Vitals Extension. Rozszerzenie do przeglądarek, które pozwala monitorować CLS w czasie rzeczywistym podczas przeglądania stron.
• Chrome DevTools. Narzędzia deweloperskie w przeglądarce Chrome umożliwiają szczegółową analizę przesunięć na stronie, wskazując konkretnie, które elementy przyczyniają się do wzrostu CLS.

Przyczyny wysokiego cumulation layout shift

Cumulative layout shift (CLS) może być wywołany przez różnorodne czynniki związane z ładowaniem i wyświetlaniem elementów na stronie internetowej. Wysoki CLS jest zazwyczaj rezultatem nieoczekiwanych przesunięć wizualnych elementów, które zakłócają doświadczenie użytkownika. Typowe czynniki wpływające na wysoki CLS:

• Obrazy i reklamy bez zdefiniowanych wymiarów. Brak z góry określonych rozmiarów dla obrazów, reklam, iframe'ów czy wideo powoduje, że przeglądarka musi dynamicznie dostosować ich wielkość w trakcie ładowania strony, co często prowadzi do przesunięć innych elementów.
• Dynamicznie ładowane treści. Treści takie jak reklamy, feedy mediów społecznościowych lub komentarze, które są ładowane do strony po jej początkowym załadowaniu, bez odpowiednich placeholderów, mogą zmieniać układ strony, przesuwając już załadowane elementy.
• Fonty internetowe. Strony, które używają fontów internetowych bez strategii ładowania, takich jak font-display: swap lub font-display: fallback, mogą doświadczyć widocznych przesunięć tekstów, co negatywnie wpływa na CLS.

Jak poprawić cumulation layout shift?

Optymalizacja cumulative layout shift jest kluczowa dla poprawy doświadczeń użytkowników i wyników SEO. Istnieje kilka najlepszych praktyk, które mogą pomóc w minimalizacji CLS, co przekłada się na stabilniejsze i bardziej przewidywalne wrażenia podczas przeglądania stron internetowych.

Najlepsze praktyki w celu minimalizacji CLS

Do najlepszych metod optymalizacji cumulative layout shift należą:

• Stałe wymiary dla mediów. Zawsze określaj wymiary dla obrazów, filmów i ram reklamowych w HTML lub CSS. To zapobiega przesuwaniu innych elementów podczas ładowania tych zasobów.
• Wykorzystanie placeholderów. Zastosowanie łat (skeleton screens) lub innych technik placeholderowych dla treści ładujących się dynamicznie, takich jak reklamy czy obrazy, może zapobiegać niespodziewanym zmianom układu.
• Optymalne ładowanie fontów. Implementacja technik, takich jak font-display: swap lub preload dla fontów, zmniejsza szanse na przesunięcia tekstu po załadowaniu niestandardowych fontów.

Optymalizacja CLS a doświadczenie użytkownika i wyniki SEO

Cumulative layout shift (CLS) jest jednym z kluczowych wskaźników Core Web Vitals, który ma bezpośredni wpływ zarówno na optymalizację pod kątem wyszukiwarek (SEO), jak i na ogólne doświadczenia użytkowników na stronach internetowych.

Dlaczego niski CLS jest ważny dla SEO?

Oto jak niski CLS wpływa na wyniki SEO:

• Ranking w wyszukiwarkach. Google formalnie przyznało, że CLS jest jednym z czynników rankingowych w ich algorytmie. Strony o niższym CLS są preferowane, ponieważ oferują lepszą stabilność wizualną i użytkową.
• Percepcja jakości strony. Strony z mniejszą ilością nieoczekiwanych przesunięć są postrzegane jako bardziej profesjonalne i zaufane, co może przyciągać większy ruch organiczny.

Jak CLS wpływa na wskaźniki zaangażowania użytkowników?

Cumulation layout shift ma znaczący wpływ na zaangażowanie użytkowników:

• Współczynnik odrzuceń. Strony z wysokim CLS często doświadczają wyższych współczynników odrzuceń, ponieważ użytkownicy mogą być frustrowani niespodziewanymi zmianami layoutu, które utrudniają nawigację.
• Czas spędzony na stronie. Użytkownicy mają tendencję do spędzania więcej czasu na stronach, które są stabilne i łatwe w obsłudze. Niski CLS może przyczynić się do wydłużenia średniego czasu sesji.
• Konwersje. Stabilność wizualna strony znacząco wpływa na decyzje zakupowe i konwersje. Strony z niskim CLS są bardziej prawdopodobne do osiągnięcia lepszych wyników w zakresie konwersji, ponieważ użytkownicy czują się bezpieczniej i są mniej rozproszeni podczas podejmowania decyzji o zakupie.