Co to jest Cumulative Layout Shift?

Cumulative Layout Shift (CLS) to metryka oceniająca stabilność układu strony internetowej. Mierzy ona, w jaki sposób elementy na stronie przesuwają się podczas ładowania treści, a następnie sumuje te przesunięcia. CLS to jeden z Core Web Vitals, czyli kluczowych wskaźników oceniających wydajność stron internetowych.

Wzór na CLS

Formalnie CLS można wyrazić jako:

CLS=∑(impactfraction∗ distancefraction)

gdzie:

• impact fraction określa, jak dużo miejsca w obszarze widocznym na stronie zajmuje dany element,
• distance fraction to odległość, o którą przesunął się dany element, podzielona przez długość i szerokość widocznego obszaru strony.

Co oznacza wynik CLS?

Wynik CLS daje informację o tym, jak stabilny jest układ strony internetowej. Im niższy wynik CLS, tym mniejsze są nieoczekiwane przesunięcia elementów, co oznacza lepszą stabilność układu.

Jak zoptymalizować CLS dla Google?

Aby zoptymalizować CLS dla Google, należy m.in. unikać dynamicznych zmian układu strony, takich jak wczytywanie obrazów bez zdefiniowanych rozmiarów czy umieszczanie reklam, które zmieniają rozmiar w trakcie ładowania strony.

Jak sprawdzić CLS – Cumulative Layout Shift

Google Search Console

Google Search Console pozwala na monitorowanie wielu danych analitycznych, w tym także CLS dla danej strony internetowej.

Page Speed Insight

Page Speed Insight oferuje analizę prędkości ładowania się strony internetowej oraz wykrywa problematyczne przesunięcia elementów, które mogą prowadzić do wysokiego CLS.

Performance w Google Chrome

Narzędzie Performance dostępne w przeglądarce Google Chrome umożliwia analizę wydajności strony internetowej, w tym także ocenę stabilności układu i obliczenie CLS.

Czy CLS wpływa na SEO?

Tak, CLS ma istotny wpływ na SEO. Google preferuje strony ze stabilnym układem, dlatego strony z niższym CLS mogą uzyskać wyższe pozycje w wynikach wyszukiwania.

Czy CLS wpływa na UX – doświadczenie użytkownika?

Tak, CLS ma duży wpływ na doświadczenie użytkownika. Nieoczekiwane przesunięcia elementów mogą prowadzić do przypadkowych kliknięć i frustracji. Użytkownik może w takiej sytuacjhi po prostu opuścić stronę, co zwiększy współczynnik odrzuceń.

Czynniki poza CLS w Core Web Vitals

• LCP (Largest Contentful Paint) – określa czas od rozpoczęcia ładowania strony do momentu, gdy największy element treści na stronie zostaje wyświetlony w całości na ekranie użytkownika.
• FID (First Input Delay) – ocenia, jak szybko strona reaguje na pierwsze interakcje użytkownika (do 11 marca 2024).
• INP (Interaction to Next Paint) – mierzy czas od momentu interakcji użytkownika do wyrenderowania nowej zawartości (od 12 marca 2024).