Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) to stabilna metryka Core Web Vitals, która mierzy wizualną stabilność, pomagając określić, jak często użytkownicy doświadczają nieoczekiwanych przesunięć układu strony. Niski wynik CLS pomaga zapewnić przyjemne doświadczenie użytkownika strony​​.

Jak to działa?

  • Definicja Zmiany Układu: CLS mierzy największy "burst" (serię) zmian układu, które występują w całym cyklu życia strony. Zmiana układu ma miejsce za każdym razem, gdy widoczny element zmienia swoją pozycję z jednej klatki renderowania na kolejną​​.
  • Co jest Dobrym Wynikiem CLS?: Dobre doświadczenie użytkownika osiąga się, gdy wynik CLS jest równy 0.1 lub mniejszy. Miernikiem tego celu jest 75. percentyl obciążeń strony, segmentowany na urządzenia mobilne i desktopowe​​.

Jak jest Obliczany?

  • Definicja Zmiany Układu: Zmiany układu są rejestrowane przez API niestabilności układu (Layout Instability API), kiedy element widoczny w obszarze widzenia zmienia swoją początkową pozycję między dwoma klatkami​​.
  • Wzór na Obliczanie: Wynik zmiany układu to iloczyn dwóch miar ruchu niestabilnych elementów: frakcja wpływu (impact fraction) i frakcja odległości (distance fraction)​​.
  • Frakcja Wpływu: Mierzy, jak niestabilne elementy wpływają na obszar widzenia między dwoma klatkami. Jest to unia widocznych obszarów wszystkich niestabilnych elementów dla poprzedniej i bieżącej klatki jako frakcja całkowitej powierzchni obszaru widzenia​​.
  • Frakcja Odległości: Mierzy odległość, jaką przesunęły się niestabilne elementy względem obszaru widzenia. Jest to największa odległość, jaką przesunął się dowolny niestabilny element w klatce (w poziomie lub pionie), podzielona przez największy wymiar obszaru widzenia (szerokość lub wysokość)​​.

Rodzaje Zmian Układu

  • Zmiany Układu Inicjowane przez Użytkownika: Zmiany układu nie są zawsze złe. Wiele dynamicznych aplikacji internetowych często zmienia pozycję elementów na stronie. Zmiana układu jest problematyczna tylko wtedy, gdy jest nieoczekiwana dla użytkownika​​.

Pomiar CLS

  • Pomiar CLS: Można mierzyć w warunkach laboratoryjnych lub rzeczywistych, dostępny w różnych narzędziach​​.

Zastosowanie Praktyczne

Poprawa CLS ma kluczowe znaczenie dla zapewnienia, że użytkownicy nie doświadczają frustrujących i nieoczekiwanych zmian układu podczas interakcji ze stroną. Dla stron e-commerce, minimalizowanie CLS może znacząco poprawić doświadczenia zakupowe użytkowników, zapobiegając przypadkowemu kliknięciu w nieodpowiednie elementy lub utracie miejsca podczas przeglądania produktów. Więcej informacji znajdziesz tutaj.

Zatrudnij eksperta

Chcesz rozwijać swój biznes e-commerce i maksymalizować jego potencjał? Rozważ zatrudnienie eksperta ds. e-commerce, który poprowadzi Cię przez zawiłości sprzedaży online i pomoże Ci osiągnąć cele biznesowe.

Skontaktuj się z nami!
Fraza wyszukiwania

Szukasz wiedzy?
Skorzystaj z wyszukiwarki