Jednym z głównym wskaźników testu prędkości strony internetowej od Google (PageSpeed Insights) jest CLS. Rozwinięcie skrótu to Cumulative Layout Shift.
Nie zagłębiając się w techniczne nazewnictwo wskaźnik określa stabilność tego co widzi użytkownik. Jeśli elementy „skaczą”/przesuwają się po inicjalizacji – wskaźnik będzie miał wysoką wartość.
Stabilność viewportu jest bardzo ważna, wskaźnika CLS nie należy pomijać. Ma sporą wartość punktową w wyniku a często jest relatywnie najłatwiejszy do poprawienia. Nie patrząc tylko na wynik – wysoki CLS może znacząco obniżyć UX strony internetowej.
Dlaczego stabilność viewportu jest ważna? Spora część użytkowników działa bardzo szybko. Strona nie zdąży się jeszcze się w pełni wczytać a chcą już wykonywać jakieś akcje (np. kliknięcie boxa z promocją). Użytkownik najeżdża kursorem na element, klika – ale w tym momencie elementy zaczęły się przemieszczać. Finalnie nie trafił tam gdzie powinien.
Co najczęściej powoduje przesunięcia? Elementy, których zachowanie jest zmieniane za pomocą JavaScript. Skrypty potrzebują chwili żeby się wykonać, bazowy kod HTML i CSS powinien być „przygotowany” na doładowanie skryptu. Idealnym przykładem mogą być slidery. Załóżmy, że w sliderze są 3 zdjęcia – skrypt po inicjalizacji ukrywa wszystkie oprócz pierwszego, przerabia strukturę, dodaje nawigację (strzałki, kropki). Po stronie HTMLa i CSSa te pozostałe elementy powinny być ukryte bazowo. Jeśli nie będą – wstępnie na krótką chwilę użytkownik zobaczy 3 zdjęcia, skrypt się wykona, dwa nadmiarowe znikną. Elementy się przesunęły, wskaźnik CLS podskoczył również.
Jak temu zaradzić? Sprawdź, które elementy powodują przesunięcie. Można to wyłapać odświeżając stronę lub skorzystać z wtyczek do przeglądarek (nie polecę konkretnej bo mi zazwyczaj najwygodniej zlokalizować odświeżając w DevToolsach). Następnie określ czemu przesunięcie następuje – może np. inne klasy po doładowaniu JS’a? Często wystarczy ustawić minimalną wysokość elementu (min-height).
Masz pytania? Napisz komentarz poniżej.
Tak. CLS często jest wyższy na urządzeniach mobilnych – szczególnie ze względu na mniejszy viewport.
CLS jest jednym z Core Web Vitals, które według specjalistów są sygnałem rankingowym Google. Opinie na temat tego czy prędkość strony/wynik testów ma bezpośredni/znaczący wpływ na pozycje w wyszukiwarce są bardzo mieszane – niemniej jednak ważniejszy jest wpływ pośredni. Wysoki CLS znacznie pogarsza UX co może skutkować większym współczynnikiem odrzuceń.
Dodaj komentarz