Wyobraź sobie, że wypełniasz długi formularz kontaktowy. Jesteś już prawie na końcu, a tu nagle pojawia się reklama, przesuwając przycisk 'Wyślij’. Zamiast wysłać wiadomość, przypadkowo klikasz w reklamę i tracisz całą wpisaną treść.
Przeglądasz galerię zdjęć produktów w sklepie internetowym. Chcesz dokładnie obejrzeć jedno ze zdjęć, więc najeżdżasz na nie kursorem, aby je powiększyć. W tym momencie strona się przesuwa, a ty klikasz w inne zdjęcie, które wcale cię nie interesuje.
Niespodziewane przesunięcia układu powodują liczne problemy oraz frustrację. Na szczęście istnieje wskaźnik pozwalający je zdiagnozować: Skumulowane Przesunięcie Układu (ang. Cumulative Layout Shift – CLS).
W tym artykule wyjaśnię, czym jest CLS, jak go mierzyć i jak poprawić ten wskaźnik, aby zapewnić wszystkim użytkownikom komfortowe i bezproblemowe korzystanie ze strony.
Spis treści:
- Czym jest Skumulowane Przesunięcie Układu?
- Jak monitorować CLS?
- Jaki wynik CLS jest uznawany za dobry?
- Jak poprawić CLS?
- Jaka jest przyszłość CLS?
Czym jest Skumulowane Przesunięcie Układu?
CLS mierzy, jak bardzo elementy strony przesuwają się niespodziewanie podczas przeglądania strony, aż do momentu, gdy przez pięć sekund nie zostanie odnotowane żadne przesunięcie.
CLS odnosi się do sumy wszystkich przesunięć układu strony – za każdym razem, gdy przeglądarka musi nieoczekiwanie przemalować obszar ekranu bez interakcji użytkownika. Jest to wskaźnik stabilności wizualnej strony i należy do Core Web Vitals – kluczowych metryk doświadczenia użytkownika, wpływających na pozycję w wyszukiwarce Google od czerwca 2021 roku.
Ważne: CLS nie uwzględnia przesunięć zachodzących w ciągu 500 ms od interakcji użytkownika, co oznacza, że niektóre świadome akcje użytkowników nie wpływają na ten wskaźnik.
Jak monitorować CLS?
CLS jest mierzony na dwa sposoby:
1. Monitorowanie syntetyczne (labowe)
- Ograniczone do pierwszego ładowania strony, mierzonego według symulowanej wysokości urządzenia.
- Podawane jako pojedyncza wartość.
2. Monitorowanie rzeczywiste (dane terenowe)
- Mierzy przesunięcia przez całą sesję użytkownika.
- Podawane najczęściej jako wartość p75 CLS (75 percentyl).
Warto pamiętać, że wyniki testów syntetycznych mogą być niższe niż rzeczywiste doświadczenia użytkowników. Najlepszą strategią jest więc łączenie obu metod monitorowania, aby uzyskać pełny obraz sytuacji.
Narzędzia do monitorowania CLS to m.in. Calibre, Chrome Developer Tools, PageSpeed Insights, raport szybkości w Google Search Console oraz biblioteka web-vitals JavaScript.
Jaki wynik CLS jest uznawany za dobry?
CLS ma jednostkę bezwymiarową. Aby zapewnić dobrą jakość doświadczenia użytkownika, CLS powinien być poniżej 0,1. Wartość powyżej 0,25 oznacza złe doświadczenie użytkownika.
- Dobry CLS: ≤ 0,1
- Słaby CLS: > 0,25
Jak poprawić CLS?
Najczęstsze powody słabego wyniku CLS to:
- Obrazy, reklamy, iframe’y bez określonych wymiarów.
- Nieoptymalne ładowanie czcionek.
- Nieefektywne animacje CSS.
- Opóźnione treści generowane przez JavaScript.
Aby poprawić CLS:
- Zawsze określaj szerokość i wysokość dla obrazów, reklam, iframe’ów i innych elementów osadzonych.
- Optymalizuj dostarczanie czcionek, stosując właściwość font-display: optional, aby uniknąć przesunięć układu.
- Używaj efektywnych animacji CSS, unikając zmian właściwości powodujących przesunięcia (np. top, margin, padding). Zamiast tego korzystaj z właściwości transform.
- Treści ładowane przez JavaScript renderuj statycznie lub po stronie serwera. Możesz też stosować szablony szkieletowe (skeleton screens), które minimalizują efekt przesunięcia.
Jaka jest przyszłość CLS?
Metryki wydajności, takie jak CLS, ewoluują. W przeglądarce Chrome wciąż wprowadzane są liczne zmiany w sposobie obliczania CLS, co może wpłynąć na wyniki pomiarów.
W przyszłości spodziewane są dalsze ulepszenia tej metryki oraz możliwe pojawienie się jej nowych wariantów, które lepiej oddzielą CLS dla pierwszego ładowania strony od całościowego doświadczenia użytkownika podczas całej sesji.
Aktualne informacje można śledzić w oficjalnym changelogu CLS przygotowanym przez zespół Chrome Speed Team.