4 min
17 września 2024
Optymalizacja CLS w praktyce
Co to jest CLS?
Cumulative Layout Shift (CLS) to wskaźnik, który stał się niezwykle istotny w kontekście oceny wydajności stron internetowych. CLS to jeden z trzech kluczowych wskaźników Core Web Vitals, wprowadzonych przez Google w ramach inicjatywy mającej na celu poprawę jakości stron internetowych. Celem tych wskaźników jest zapewnienie użytkownikom lepszego doświadczenia podczas przeglądania witryn internetowych. CLS mierzy stabilność wizualną strony, co oznacza, jak często elementy na stronie przemieszczają się nieoczekiwanie podczas ładowania. Jest to niezwykle ważne, ponieważ nagłe przesunięcia układu elementów mogą prowadzić do frustracji użytkowników, a w skrajnych przypadkach do ich rezygnacji z dalszego korzystania ze strony.
Posłuchaj artykułu w wersji audio.
Dlaczego CLS jest ważny?
Wyobraź sobie, że przeglądasz stronę internetową, chcesz kliknąć w przycisk, a nagle ten przycisk przemieszcza się niespodziewanie na dół strony. Często jest to spowodowane ładującą się wolno reklamą lub obrazem. Tego typu sytuacje są nie tylko irytujące, ale mogą prowadzić do przypadkowego kliknięcia w coś, czego użytkownik nie zamierzał wcale klikać. Może to wpłynąć negatywnie na konwersję, zadowolenie użytkowników i ogólnie na postrzeganie jakości strony.
CLS jest więc kluczowym wskaźnikiem, który pozwala zmierzyć, jak stabilna wizualnie jest strona podczas jej ładowania. Im niższy wskaźnik CLS, tym lepsze doświadczenie użytkownika. Idealnie, wartość CLS powinna być jak najniższa, najlepiej poniżej 0,1. Wartości powyżej 0,25 wskazują na poważne problemy z wizualną stabilnością strony.
Jak mierzyć CLS?
Mierzenie CLS jest możliwe na kilka sposobów, ale najwygodniej zrobić to bezpośrednio w przeglądarce Google Chrome. Przeglądarka ta posiada narzędzia deweloperskie, które umożliwiają analizę wydajności strony w czasie rzeczywistym. Aby zmierzyć CLS:
Otwórz narzędzia deweloperskie w Google Chrome (Ctrl+Shift+I lub F12).
Przejdź do zakładki "Performance".
Wykonaj "Profiling and reload page" (Ctrl+Shift+E).
Po załadowaniu strony, przeanalizuj zapisany profil. Znajdziesz tam wiersz "Layout Shift", który pokazuje miejsca, gdzie na stronie występują przesunięcia elementów.
Dzięki tym informacjom można szybko zlokalizować problematyczne miejsca na stronie i podjąć działania mające na celu poprawę wskaźnika CLS.
Najczęstsze przyczyny wysokiego CLS
Wysoki CLS może być wynikiem różnych problemów związanych z ładowaniem i renderowaniem strony. Oto kilka najczęstszych przyczyn:
Ładowanie obrazów bez zdefiniowanych wymiarów: Gdy obrazy na stronie nie mają wcześniej zdefiniowanych wymiarów (np. szerokości i wysokości), przeglądarka musi dostosować układ strony w trakcie ładowania obrazów, co prowadzi do przesunięć elementów.
Wstrzykiwanie dynamicznych elementów: Elementy takie jak reklamy, banery lub dynamiczne treści dodawane po załadowaniu strony mogą powodować nagłe zmiany w układzie strony.
Ładowanie czcionek: Użycie czcionek, które nie są poprawnie zoptymalizowane, może powodować przesunięcia tekstu podczas ładowania strony, gdy przeglądarka zmienia domyślną czcionkę na pobraną czcionkę.
Ładowanie treści asynchronicznych: Elementy strony, które są ładowane asynchronicznie (po załadowaniu głównej części strony), mogą wprowadzać zmiany w układzie, powodując przesunięcia.
Rozwiązanie problemu z CLS na przykładzie obrazów
Na naszej stronie internetowej napotkaliśmy problem związany z nieoczekiwanym przesuwaniem treści spowodowanym ładowaniem obrazów, które początkowo miały zdefiniowaną wysokość równą 0, a dopiero po pełnym załadowaniu dostosowywały swoją wysokość do rzeczywistego rozmiaru obrazu. To prowadziło do nagłych przesunięć elementów na stronie, co negatywnie wpływało na wskaźnik CLS.
Aby rozwiązać ten problem, musieliśmy znaleźć sposób na zarezerwowanie odpowiedniej przestrzeni dla obrazów przed ich pełnym załadowaniem, jednocześnie dbając o to, aby obrazki zachowywały swoje proporcje, niezależnie od rozmiaru ekranu. W tym celu zastosowaliśmy tzw. padding-top hack.
Padding-Top Hack — Jak to działa?
Padding-top hack to technika polegająca na ustawieniu proporcji wysokości do szerokości obrazu za pomocą właściwości CSS padding-top. Dzięki temu przeglądarka od samego początku rezerwuje przestrzeń na obrazek, bazując na jego proporcjach, co zapobiega przesunięciom elementów podczas ładowania.
Przykładowa implementacja może wyglądać następująco:
<div class="cls-box">
<child-element class="cls-box-inside">
</div>
W powyższym przykładzie tworzymy kontener dla obrazka (cls-box), w którym definiujemy proporcje obrazka oraz stylizujemy go tak, aby zachowywał swoje proporcje, niezależnie od rozmiaru ekranu:
CSS (Przykład)
.cls-box {
height: 0;
padding-top: calc(3/10 * 100%);
position: relative;
}
.cls-box-inside {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
W powyższym kodzie 3/10 to proporcja obrazka (wysokość/szerokość), którą obliczamy na podstawie oryginalnych wymiarów obrazu.
Przykład zastosowania tego podejścia w rzeczywistości:
jeśli chcemy to użyć z preprocesorem SCSS to padding można zapisać inaczej używając wartości w pikselach do obliczenia proporcji. Warto wtedy podać oryginalny rozmiar wysokości i szerokości np:padding-top: 3px/10px * 100%;
Inne techniki poprawy CLS
Oprócz technik związanych z obrazami, istnieje kilka innych sposobów na poprawę CLS:
Używanie lokalnych czcionek: Zamiast polegać na czcionkach pobieranych z zewnętrznych serwerów, które mogą powodować opóźnienia w renderowaniu tekstu, można użyć lokalnych czcionek, co minimalizuje ryzyko przesunięć tekstu.
Ustawienie font-display: swap: Właściwość CSS font-display: swap umożliwia przeglądarce natychmiastowe wyświetlenie tekstu przy użyciu domyślnej czcionki, a następnie zamianę na docelową czcionkę, gdy ta zostanie pobrana. Zapobiega to problemom z wyświetlaniem i przesunięciami tekstu.
Zoptymalizowane ładowanie treści: Unikaj dynamicznego wstrzykiwania treści, które może powodować nagłe zmiany układu. Zamiast tego, ładowanie asynchronicznych elementów można optymalizować, aby nie wpływały one na główny układ strony.
Podsumowanie
Cumulative Layout Shift to wskaźnik, który może mieć znaczący wpływ na jakość doświadczenia użytkownika na stronie internetowej. Zrozumienie, jak działa CLS, jak go mierzyć i jak minimalizować jego wpływ, jest kluczowe dla każdego, kto zajmuje się tworzeniem stron internetowych. Poprzez odpowiednie techniki, takie jak padding-top hack, lokalne czcionki czy zoptymalizowane ładowanie treści, można znacznie poprawić wskaźnik CLS i w efekcie zwiększyć zadowolenie użytkowników oraz skuteczność strony.
