CLS

Co to jest

Zaczynasz czytać. Nad akapitem doczytuje się obrazek, tekst zjeżdża w dół i zdanie, na którym byłeś, jest gdzie indziej. Zrób tak cztery razy, a strona sprawia wrażenie zepsutej, choć nic się nie zepsuło.

CLS sumuje każdy taki ruch. Liczy tylko przesunięcia, których odwiedzający nie wywołał: rozwinięcie akordeonu przesuwa stronę i się nie liczy, baner wstrzykujący się po dwóch sekundach — owszem.

Dlaczego to twój problem, jeśli zamawiasz stronę

Kosztem nie jest 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, na formularzu kontaktowym — telefon, który nie zadzwonił.

Co to naprawdę powoduje

Cztery rzeczy, w kolejności, w jakiej je znajduję.

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 — a 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 po załadowaniu.

Do tej listy pasuje jedna decyzja z tej strony. Baner zgody na cookies jest pływającą kartą nad treścią, a nie paskiem spychającym stronę w dół — więc niczego nie przesuwa i nie dokłada nic do CLS. Jest też powodem, dla którego strona świadomie nie spełnia jednego kryterium dostępności, bo pływająca karta potrafi zasłonić element z fokusem klawiatury. Dwa wskaźniki, jeden baner, przeciwne kierunki: tak wygląda prawdziwy kompromis, a obie jego połowy są spisane, nie po cichu wybrane.

Czym CLS nie jest

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