Cumulation layout shift

Cumulative Layout Shift (CLS) to jedna z trzech podstawowych metryk Core Web Vitals, które mierzą jakość doświadczenia użytkownika (UX) na stronach internetowych. CLS określa stopień niestabilności wizualnej strony, czyli jak często i jak bardzo elementy na stronie przesuwają się podczas jej ładowania.

Co to jest CLS?

CLS mierzy sumę wszystkich indywidualnych przesunięć układu (layout shift) dla każdego nieoczekiwanego ruchu elementów, które występują podczas ładowania strony. Wynik jest następnie mnożony przez współczynnik wagi, aby uwzględnić wpływ przesunięcia na postrzeganie użytkownika. Wysoki CLS oznacza, że elementy na stronie często zmieniają swoje położenie, co może być frustrujące dla użytkowników i utrudniać im interakcję z witryną.

Dlaczego CLS jest ważne?

• Wpływ na SEO: CLS jest jednym z czynników rankingowych Google, co oznacza, że strony o niskim CLS mogą uzyskać wyższą pozycję w wynikach wyszukiwania.
• Doświadczenie użytkownika: Niestabilność układu strony może być frustrująca dla użytkowników i zniechęcać ich do korzystania z witryny. Niski CLS poprawia UX i sprawia, że strona jest bardziej przyjazna dla użytkownika.
• Konwersja: Niestabilność układu może utrudniać użytkownikom wykonanie pożądanych działań na stronie, takich jak kliknięcie w link czy przycisk. Niski CLS może prowadzić do zwiększenia konwersji.

Jak poprawić CLS?

• Ustal rozmiar obrazów i filmów: Zawsze określaj wymiary dla elementów medialnych, takich jak obrazy i wideo, aby przeglądarka mogła zarezerwować dla nich miejsce podczas ładowania strony.
• Optymalizuj czcionki: Używaj wstępnego ładowania czcionek (font preloading), aby uniknąć przesunięć tekstu podczas ładowania czcionek.
• Unikaj umieszczania nowych treści nad istniejącą treścią: Jeśli musisz dynamicznie dodawać treści do strony, użyj placeholderów lub animacji, aby uniknąć nagłych przesunięć układu.
• Optymalizuj reklamy: Upewnij się, że reklamy mają zarezerwowaną przestrzeń i nie powodują przesunięć innych elementów strony.
• Mierz i monitoruj CLS: Regularnie sprawdzaj CLS swojej strony za pomocą narzędzi takich jak Google PageSpeed Insights, Lighthouse czy WebPageTest.