Czym jest Cumulative Layout Shift (CLS) i jak go naprawić

Czym jest Cumulative Layout Shift (CLS)?

Cumulative Layout Shift (CLS) reprezentuje część dotyczącą 'stabilności wizualnej' w ramach Core Web Vitals. Cumulative Layout Shift (CLS) mierzy ruchy strony, gdy zawartość jest renderowana lub nowa zawartość jest wyświetlana na stronie. Oblicza wynik na podstawie tego, jak duża część strony nieoczekiwanie się przesuwa i jak daleko się przemieszcza. Te przesunięcia zawartości są bardzo irytujące, powodując utratę miejsca w artykule, który zacząłeś czytać, lub co gorsza, kliknięcie niewłaściwego przycisku!

Znaczenie CLS w wydajności stron internetowych i user experience

Cumulative Layout Shift (CLS) jest powiązany zarówno z wydajnością stron internetowych, jak i user experience, ponieważ bezpośrednio wpływa na to, jak stabilna i przewidywalna jest strona podczas ładowania. Oto dlaczego ma to znaczenie:

• UX, zaangażowanie i postrzeganie marki:  Nieoczekiwane przesunięcia układu zakłócają przepływ użytkownika, utrudniając znajdowanie informacji, klikanie przycisków i interakcję ze stroną zgodnie z zamierzeniem. Ta frustracja może prowadzić do złych doświadczeń, w których użytkownicy porzucają stronę internetową całkowicie.
  User experience strony internetowej odzwierciedla markę, która za nią stoi. Częste przesunięcia układu mogą sprawiać wrażenie źle zaprojektowanej lub zaniedbanej strony, zakłócać zaangażowanie użytkowników, co prowadzi do zmniejszonej interakcji i potencjalnie wyższego współczynnika odrzuceń.
  
• Dostępność: Przesunięcia układu mogą być szczególnie uciążliwe dla użytkowników z niepełnosprawnościami, którzy korzystają z technologii wspomagających lub czytników ekranu. Stabilny układ zapewnia, że każdy może skutecznie nawigować i korzystać ze strony internetowej.
  
• SEO i pozycja w wynikach wyszukiwania: Core Web Vitals to mały, ale istotny czynnik rankingowy w Google. Google, wraz z innymi wyszukiwarkami, priorytetowo traktuje strony internetowe oferujące dobre user experience. CLS jest jedną z metryk Core Web Vitals, którą Google bierze pod uwagę przy pozycjonowaniu stron. Optymalizacja pod kątem CLS może dać Twojej stronie przewagę konkurencyjną w wynikach wyszukiwania.
  

Jak mierzony jest CLS?

CLS strony można zmierzyć za pomocą Layout Instability API. Poniżej przedstawiono proste użycie tego api

Obliczanie CLS

CLS można łatwo obliczyć za pomocą prostego, ale eleganckiego wzoru:

CLS = sum(impact-fraction * distance-fraction)

Frakcja wpływu mierzy jak dużo widocznej zawartości strony się przesunęło. Frakcja odległości mierzy jak daleko zawartość się przesunęła. Jeśli na przykład 50% strony (jak dużo) przesunęło się o 25% (jak daleko) widoku strony. Wynik CLS = 0,50 * 0,25 = 0,125

Oczekiwane a nieoczekiwane przesunięcia układu

Nie wszystkie przesunięcia układu są złe, tylko te, których się nie spodziewasz. Gdy klikniesz na link 'załaduj więcej elementów', na przykład, spodziewasz się, że na stronie pojawią się kolejne elementy i zawartość strony się przesunie.

Dlatego tylko nieoczekiwane przesunięcia układu będą powodować wzrost CLS. Na przykład, jeśli użytkownik kliknie przycisk i w odpowiedzi nowa zawartość zostanie dodana do strony (na przykład rozwijane menu), przesunięcie układu zostanie wykluczone z CLS. Dokładniej mówiąc:
Przesunięcia układu, które występują w ciągu 500 milisekund od interakcji użytkownika, będą wykluczone z obliczeń

Sesje przesunięć układu

Gdy CLS został po raz pierwszy wprowadzony, niektóre strony były niesprawiedliwie karane złym wynikiem CLS. Na przykład strona z nieskończonym przewijaniem otrzymałaby wpływ nowo dodanej zawartości doliczony do całkowitego wyniku CLS przy każdym nowym przewinięciu. Dlatego CLS jest teraz obliczany w sesjach. Każda sesja ma 5-sekundowy czas trwania. Sesja z najwyższym wynikiem CLS stanie się ostatecznym wynikiem CLS.
Jeśli na przykład podczas pierwszych 5 sekund wynik CLS wynosi 0,095, następnie w kolejnej 5-sekundowej sesji CLS wynosi 0,15, a w ostatniej sesji wynik CLS wynosi 0. Ostateczny wynik CLS będzie najwyższym z trzech, czyli 0,15.

Szybkie przypomnienie: CLS i Core Web Vitals!

Cumulative Layout Shift (CLS) to ważna, zorientowana na użytkownika metryka do mierzenia stabilności wizualnej. Cumulative Layout Shift (CLS) jest częścią Core Web Vitals wraz z First Contentful Paint, Largest Contentful Paint i First Input Delay.

Jak mierzyć problemy z CLS

1. Użyj Lighthouse do znajdowania Cumulative Layout Shift

Najłatwiejszą metodą znajdowania przesunięć układu jest użycie Lighthouse w przeglądarce Chrome. Wystarczy uruchomić audyt Lighthouse, klikając prawym przyciskiem myszy w dowolnym miejscu na stronie. Następnie wybierz inspect-element, wybierz zakładkę Lighthouse w otwartej konsoli i uruchom audyt

Wyniki audytu pokażą wynik Cumulative Layout Shift (CLS). Przewiń w dół do sekcji Diagnostics i rozwiń informacje o Cumulative Layout Shift, aby zobaczyć, które węzły powodują przesunięcia układu.

Szczerze mówiąc, sam nigdy nie korzystam z tej metody. Brak szczegółów dotyczących dokładnej odległości przesunięcia układu sprawia, że wyniki te są trudniejsze do interpretacji

2. Użyj CLS Visualizer do znajdowania Cumulative Layout Shift

CLS Visualizer to rozszerzenie Chrome napisane przeze mnie. Jednym kliknięciem przycisku wszystkie przesunięcia układu na stronie są wizualizowane. To pierwsze rozwiązanie, po które sięgam, gdy próbuję zidentyfikować przesunięcie układu na stronie. Jest proste i daje świetny wizualny przegląd Cumulative Layout Shift.

3. Użyj zakładki Performance w Chrome do znajdowania CLS

Zdecydowanie najlepszym sposobem debugowania przesunięcia układu jest zakładka Performance w Chrome. Aby otworzyć zakładkę Performance, przejdź do dowolnej strony w Chrome i użyj tej kombinacji klawiszy:
- Naciśnij Ctrl-Shift-I (Otwórz Dev Tools)
- Naciśnij Ctrl-Shift-E (Rozpocznij profilowanie i odśwież stronę)

Teraz sprawdź oś czasu klatka po klatce, najeżdżając myszką na oś czasu na górze i szukaj przesunięć układu (przesunięcia układu są również zaznaczone na czerwono w sekcji Experience zakładki Performance). 

4. Użyj narzędzi RUM takich jak Core/Dash

RUM oznacza Real User Monitoring, a dane RUM mogą dostarczyć cennych informacji w czasie rzeczywistym na temat Core Web Vitals. Narzędzia RUM takie jak Core/Dash mogą rozbić Cumulative Layout Shift na segmenty takie jak przeglądarka, element, typ nawigacji, konkretny URL lub typ strony. Pomoże to zidentyfikować i naprawić słabo działające strony i problematyczne elementy

Najczęstsze przyczyny Cumulative Layout Shift i jak je naprawić

Źródło wszystkich przesunięć układu jest zasadniczo takie samo. W pewnym momencie element umieszczony nad innym elementem zajął więcej lub mniej miejsca niż wcześniej. Jest to zazwyczaj spowodowane jedną lub kilkoma z tych przyczyn:

• Obrazy, iFrame lub filmy
• Reklamy
• Wstrzyknięta zawartość
• Animacje
• Wolne interakcje
• Webfonty

CLS spowodowany przez obrazy, filmy i iFrame

Przesunięcia układu spowodowane przez obrazy, filmy lub iFrame są zawsze spowodowane brakującymi wymiarami. Najczęściej jest to spowodowane tym, że wysokość i szerokość elementu nie jest zdefiniowana w HTML. Powszechną, dobrą praktyką jest ustawienie wewnętrznej szerokości obrazu w HTML i użycie stylów do automatycznego skalowania, aby dopasować obraz do kontenera nadrzędnego.

<img src="img.jpg" >
<style>
   img{
      max-width:100%;
      height:auto
   }
</style>

Należy zauważyć, że wymiary mogą być również zdefiniowane jako właściwość stylu lub nawet przez ustawienie aspect-ratio właściwości stylu.

CLS spowodowany przez webfonty

Cumulative Layout Shift może być spowodowany przez webfonty. Webfonty to czcionki, które nie są zainstalowane na Twoim lokalnym komputerze lub telefonie, ale pobierane z internetu. Podczas gdy webfont nie jest jeszcze pobrany, strona jest zwykle renderowana z czcionką zastępczą. Rozmiar tej czcionki zastępczej może różnić się od ostatecznej czcionki. W tym przykładzie czcionka zastępcza jest nieco mniejsza niż ostateczny webfont.

Istnieje wiele metod 'naprawy' przesunięcia układu spowodowanego przez webfonty. Opierają się na 2 technikach:

1. Dopasowanie czcionki zastępczej do webfontu bardziej precyzyjnie. Najskuteczniejszym sposobem jest nadpisanie deskryptorów @font-face

Drugi sposób to przyspieszenie webfontów. Sprawi to, że będą dostępne dla przeglądarki, zanim przeglądarka zacznie renderowanie. Powszechnym sposobem na to jest wstępne ładowanie (preload) krytycznych webfontów. 

Problemy z CLS spowodowane wolnymi interakcjami użytkownika

W poniższym przykładzie przycisk "załaduj więcej" wyraźnie powoduje przesunięcie układu. Jednak to przesunięcie układu nie zostanie dodane do metryk CLS. Dzieje się tak, ponieważ to przesunięcie układu jest zamierzone

Przeglądarka rozpozna to, ponieważ teraz widoczne elementy mają atrybut o nazwie 'hadRecentInput'. Gdy jest on ustawiony na true ORAZ przesunięcie układu następuje w ciągu 500 ms od zdarzenia wejściowego (kliknięcia przycisku), przesunięcie układu nie zostanie zgłoszone przez przeglądarkę.

Upewnij się, że interakcje użytkownika kończą się w ciągu 500 ms

Problemy z CLS spowodowane przez AJAX

AJAX umożliwia asynchroniczną aktualizację stron internetowych poprzez wymianę danych z serwerem internetowym w tle. Oczywiście wstrzykiwanie nowej zawartości do dowolnej strony internetowej może prowadzić do znacznego przesunięcia układu. Dlatego warto zarezerwować miejsce, które zostanie wykorzystane na nową zawartość. Oczywiście nie znasz wysokości nowej zawartości z góry, ale możesz dokonać szacunkowego przybliżenia.

Na przykład, jeśli średnia zawartość AJAX zajmuje 50% ekranu, warto zarezerwować te 50%. Gdy nowa zawartość ostatecznie zajmie 40 lub 60% ekranu, CLS (50% - 40% = 10% frakcja odległości) jest nadal znacznie mniejszy niż 50% frakcji odległości.

Oto przykład, jak to zrobić:

<style>
   #ajax{height:400px}
   #ajax.loaded{height:auto;}
</style>
<script>
   fetch('/ajax-content)
   .then(response => response.json())
   .then(result => {
      let el = document.getElementById('ajax');
      el.innerHTML(result.html);
      el.classList.add('loaded');
   })
<script>

Napraw problemy z CLS spowodowane przez reklamy

Reklamy często ładują się (znacznie) później na stronie. To sprawia, że Cumulative Layout Shift spowodowany przez reklamy jest szczególnie irytujący. Gdy wiele reklam ładuje się w widocznym obszarze strony, 'strona po prostu nie chce się uspokoić'. Aby to naprawić, zarezerwuj również miejsce na reklamy, szczególnie te w widocznym obszarze strony.

<style>
// rectangle mobile ad
.ad{min-height:250px;background:#dedede}
// banner desktop ad
@media only screen and (min-width: 600px) {
.ad{min-height:90px}
}
</style>