CLS (Cumulative Layout Shift)
CLS měří celkové množství neočekávaných posunů rozvržení, ke kterým dojde během celé životnosti stránky, a kvantifikuje, jak moc se viditelný obsah neočekávaně posouvá.
Cumulative Layout Shift (CLS) je metrika Core Web Vitals, která měří vizuální stabilitu. Kvantifikuje, jak moc se obsah na stránce během načítání neočekávaně posouvá. K posunu rozložení dojde, když viditelný prvek změní svou pozici z jednoho vykresleného snímku na další bez interakce uživatele.
Mezi běžné příčiny posunu rozložení patří obrázky a videa bez rozměrů (prohlížeč neví, kolik místa má rezervovat, dokud se nenačtou), reklamy nebo vložené prvky, které se načítají dynamicky a odsouvají obsah dolů, webové fonty, které způsobují změnu velikosti textu při načtení (Flash of Unstyled Text), a obsah, který se dynamicky vkládá nad stávající obsah.
V praxi
- Zpravodajský web snížil své CLS z 0,42 na 0,05 tím, že rezervoval místo pro reklamní plochy a přidal rozměry ke všem obrázkům, což vedlo k o 30 % delším průměrným čtecím relacím
- Produktová stránka e-shopu měla CLS 0,35, protože hvězdičky hodnocení zákazníků se načítaly později a posunuly tlačítko „Přidat do košíku“ dolů, což způsobovalo chybná kliknutí; oprava zvýšila míru přidání do košíku o 8 %
- Blog vyřešil svůj problém s CLS způsobený pozdním načtením webových fontů přednačtením souboru fontu a použitím font-display: optional, čímž zcela odstranil posuny rozložení textu
- Vstupní stránka rezervovala pevné rozměry pro vložené video, které způsobovalo poskakování obsahu pod ním, a dostala CLS z 0,28 na 0,02
Nejste si jistí, jak se to týká vás?
Zkušený inženýr projde váš web, vaši viditelnost ve vyhledávání a způsob, jakým se k vám dostávají poptávky, a poté sepíše tři věci, které je vhodné opravit jako první. Dokument si ponecháte tak jako tak.