CLS: prečo obsah stránky poskakuje
Chcete kliknúť na odkaz a v poslednej chvíli sa obsah posunie a kliknete na niečo iné. Toto poskakovanie stránky meria ukazovateľ CLS a patrí k najnepríjemnejším chybám, s ktorými sa návštevníci stretávajú.
Čo CLS meria
CLS (Cumulative Layout Shift) vyjadruje, ako veľmi sa viditeľný obsah nečakane posúva počas návštevy. Posun, ktorý nasleduje hneď po akcii používateľa, napríklad rozbalenie menu po kliknutí, sa nepočíta.
Aká hodnota je dobrá
Google považuje za dobré CLS do 0,1, medzi 0,1 a 0,25 treba zlepšiť a nad 0,25 je to zlé.
Najčastejšie príčiny
- Obrázky bez rozmerov: prehliadač nevie, koľko miesta im nechať, a po načítaní obsah odsunú.
- Reklamy a vložené prvky: bannery, videá či mapy, ktoré sa načítajú neskôr bez rezervovaného miesta.
- Dodatočne vložené lišty: oznamy, cookie lišty či ponuky vložené nad obsah po načítaní.
- Písma: náhradné písmo má iné rozmery ako webové, a keď sa vymení, text sa prelomí inak.
Ako CLS odstrániť
- uveďte pri obrázkoch a videách šírku a výšku alebo pomer strán,
- rezervujte miesto pre reklamy a vložený obsah,
- lišty a bannery zobrazujte tak, aby neposúvali obsah, napríklad ako prekrytie pri spodnom okraji,
- doladte náhradné písmo, aby rozmermi zodpovedalo webovému, viac v článku Písma a rýchlosť webu,
- animácie robte pomocou transformácií, ktoré neposúvajú okolitý obsah.
CLS a e-shop
Na e-shope je poskakovanie obzvlášť škodlivé. Zákazník môže omylom kliknúť na iný produkt alebo tlačidlo. Preto ho pri testovaní na mobile kontrolujeme zvlášť.
Ďalšie ukazovatele popisujeme v článkoch LCP a INP. Poskakovanie stránky vieme nájsť a odstrániť bez zmeny dizajnu.
