CLS (Cumulative Layout Shift)
CLS meria celkové množstvo neočakávaných posunov rozloženia, ku ktorým dochádza počas celého životného cyklu stránky, a kvantifikuje, koľko viditeľného obsahu sa neočakávane presúva.
Cumulative Layout Shift (CLS) je jadro Core Web Vitals, ktoré meria vizuálnu stabilitu. Kvantifikuje, koľko sa obsah na stránke neočakávane presúva počas načítavania. K posunu rozloženia dochádza, keď sa viditeľný prvok zmení svoju polohu z jedného vykresleného snímku do ďalšieho bez interakcie používateľa.
Bežné príčiny posunu rozloženia zahŕňajú obrázky a videá bez definovaných rozmerov (prehliadač nevie, koľko miesta rezervovať, kým sa načítajú), reklamy alebo embedy, ktoré sa načítavajú dynamicky a odsúvajú obsah nadol, webové fonty, ktoré spôsobujú zmenu veľkosti textu pri ich načítaní (Flash of Unstyled Text) a obsah, ktorý je dynamicky vložený nad existujúci obsah.
V praxi
- Novinový web znížil svoj CLS z 0,42 na 0,05 rezerváciou miesta pre reklamné sloty a pridaním rozmerov ku všetkým obrázkom, čo viedlo k 30 % dlhším priemerným reláciám čítania.
- Produktová stránka e-shopu mala CLS 0,35, pretože hviezdičky hodnotení zákazníkov sa načítavali neskoro a posunuli tlačidlo „Pridať do košíka“ nadol, čo spôsobovalo nesprávne kliknutia; oprava zvýšila mieru pridania do košíka o 8 %
- Blog opravil problém s CLS spôsobený neskorým načítaním webových fontov prednačítaním súboru fontu a použitím font-display: optional, čím úplne eliminoval posuny rozloženia textu.
- Landing page rezervovala pevné rozmery pre video embed, ktorý spôsoboval skákanie obsahu pod ním, čím priniesol CLS z 0,28 na 0,02.
Nie ste si istí, či sa to týka aj vás?
Senior inžinier prejde vaše stránky, vašu prítomnosť vo vyhľadávaní a spôsob, akým dotazy k vám prichádzajú, a potom zapíše tri veci, ktoré sa oplatí opraviť ako prvé. Dokument si necháte v každom prípade.