CLS

Co to jest CLS

CLS to liczba mówiąca, jak bardzo strona skacze, zanim się doładuje. Zaczynasz czytać, nad akapitem doczytuje się obrazek, tekst zjeżdża w dół i zdanie, na którym byłeś, jest już gdzie indziej. Zrób tak cztery razy, a strona sprawia wrażenie zepsutej, choć nic się nie zepsuło.

Wynik sumuje każdy taki ruch, w skali bez jednostki, w której 0,1 lub mniej Google nazywa dobrym. Liczą się tylko przesunięcia, których odwiedzający nie wywołał: rozwinięcie akordeonu przesuwa stronę i się nie liczy, a baner wstrzykujący się po dwóch sekundach owszem.

Ile kosztuje skacząca strona

Kosztem nie jest sam wynik, tylko chybione kliknięcie. Przycisk przesuwa się o 40 pikseli w momencie między decyzją a dotknięciem, a odwiedzający trafia w to, co zajęło jego miejsce. Na stronie zamówienia to stracone zamówienie, a na formularzu kontaktowym telefon, który nie zadzwonił.

Co naprawdę powoduje CLS

Obrazki bez wymiarów. Przeglądarka, która nie zna kształtu obrazka, nie rezerwuje na niego miejsca, a potem musi je zrobić, gdy obrazek przyjdzie. Podaj width i height albo pozwól frameworkowi odczytać je z pliku.

Fonty z sieci. Strona rysuje się fontem zapasowym i przelewa się, gdy przyjdzie właściwy. Im dłuższy tekst, tym dalej wędruje wszystko pod nim.

Wstrzykiwana treść. Banery cookies, paski promocyjne, zachęty do zapisu. Cokolwiek dołożonego na górze dokumentu po pierwszym rysowaniu spycha całą stronę w dół.

Reklamy i osadzone elementy, które ustalają swój rozmiar dopiero po załadowaniu.

Do tej listy pasuje jedna decyzja ze spoko.space. Baner zgody na cookies wisi na doku wewnątrz treści, a nie na pasku spychającym stronę w dół, więc niczego nie przesuwa i nie dokłada nic do CLS. Ten sam baner był wcześniej pływającą kartą nad stroną i potrafił zasłonić element z fokusem klawiatury, czyli poprawiał jeden wskaźnik kosztem kryterium dostępności. Tak wygląda prawdziwy kompromis, a obie jego połowy są spisane, nie po cichu wybrane.

Czym CLS nie jest

CLS nie dotyczy przewijania i nie naprawia się go przyspieszaniem strony. Wolna strona z zarezerwowanym miejscem na wszystko ma zero, a szybka strona, która doczytuje baner, nie ma.