Co to jest ten CLS Cumulative Layout Shift i dlaczego jest ważny dla sklepów internetowych

CLS – Cumulative Layout Shift jest to wskaźnik, który obrazuje przesunięcia całego układu w momencie ładowania strony.

Czyli jak w kodzie znajduje się jakiś np. obrazek lub inny element, który nie ma określonych wymiarów to po jego załadowaniu całość przesuwa się, co Google na podstawie swoich badań uznało za uciążliwe. Jeżeli obiekt ma stałe wymiary, to zanim się załaduje przeglądarka rezerwuje dla niego miejsce. Tym samym nie następują przesunięcia elementów ładowanych później.

Od pewnego czasu, by zmusić twórców stron o dbanie o ten aspekt, Google znacząco zwiększyło znaczenie tego wskaźnika w wartościowaniu stron. Zły wynik jest szkodliwy, a w przypadku niektórych sklepów internetowych w karcie produktu czasami nawet 4-krotnie przekracza wartość, od której Google testach wyświetla to już nawet nie jako ostrzeżenie, a jako błąd.

Przyczyn może być wiele. Często problemy generują takie elementy jak galeria zdjęć, slidery, czy elastyczne menu, paski nawigacyjnej (navbar) itp.

Jednak zazwyczaj główny kłopot stanowią zdjęcia bez ustalonych wymiarów. Żeby zlikwidować problem czasem wystarczy wprowadzić rozmiary obrazków w html lub css. Nie zawsze jednak to pomoże. Czasami są one bowiem generowane przez różne skrypty js. Raz ustaliłem w galerii karuzelowej w css na sztywno wysokość na 600px. Współczynnik CLS od razu się poprawił do dozwolonego poziomu. Przy czym to nie rozwiązywało problemu, bo po pierwszy obrazek robił się kwadratowy i skadrowany, a po drugie na telefonach tworzy się pusta przestrzeń między wyświetlanym zdjęciem, a pozostałymi miniaturkami. W takich przypadkach rozwiązanie problemu może być znacznie trudniejsze i może wymagać dużej ingerencji w konstrukcję strony.

Ogólne sugestie, często popełniane błędy i przykłady

1. Ustalenie na “sztywno”: wymiarów obrazków. <img … width=”x” height=”y” style=”width:100%;”>. Przy czym jeżeli galeria jest generowana przez skrypty i parametry wysokości i szerokości w html w img nie wpływają na sam div, takie rozwiązanie nie działa.

2. Jak obrazek ma powiedzmy 150px x 111px to fizycznie też powinien mieć takie wymiary. Ładowanie obrazka 800 x 600 w rozmiar 150 x 100 lub jako miniaturki w kategoriach powoduje niepotrzebne ładowanie dużych zdjęć co pogarsza też inne współczynnik Google.

3. Kategorie powinny mieć na sztywno ustaloną wielkość miniaturek, a miniaturki powinny mieć fizycznie rozmiar taki jak jest ładowany, a nie 800 x 600. Wprawdzie zastosowanie lazyload w takim wypadku ratuje stronę przed wszystkimi wskaźnikami na czerwono. To jednak ustalenie stałej szerokości i wysokości miniatur w kategoriach sklepu internetowego jest jak najbardziej wskazane. Myślę, że tam te 300px szerokości to jest aż nadto jeżeli chcemy mieć pojedyncze zdjęcia produktu wyświetlane kolejno w kategorii na ekranie telefonu. Jeżeli chcemy mięć po dwa obrazki w rzędzie to możemy zastosować nawet mniejsze rozmiary.

4. Warto zastąpić jpg obrazami webp. Co też Google sugeruje.

Ogólnie czynników wpływających na ranking strony w wyszukiwarce jest ogrom, ale te które jesteśmy w stanie ogarnąć warto dostosować do wskazówek Google.