Kumulativní posun rozložení (CLS)

Co je kumulativní posun rozložení (CLS)?

Kumulativní posun rozložení (CLS) je metrika Core Web Vitals vyvinutá společností Google k měření vizuální stability webové stránky. Vyjadřuje součet všech neočekávaných posunů rozvržení, ke kterým dojde během celé životnosti stránky. K posunům rozložení dochází, když viditelný prvek změní svou pozici z jednoho vykresleného rámce na druhý.

Jak se CLS měří

Skóre CLS se pohybuje od 0, což znamená, že nedošlo k žádnému posunu, až po hodnoty vyšší než 0, které ukazují na různý stupeň nestability. Vzorec bere v úvahu podíl dopadu a podíl vzdálenosti každého posunu a vypočítává, o kolik se prvky posunou a jak velkou část viewportu pokrývají.

Interpretace skóre CLS

• Dobrý: 0 - 0,1
• Potřebuje zlepšení: 0.1 - 0.25
• Špatný: nad 0,25

Proč je systém CLS důležitý?

Systém CLS má zásadní význam pro uživatelskou zkušenost, protože neočekávané změny rozložení mohou vést k frustraci uživatele. Pokud se například uživatel chystá kliknout na tlačítko a rozvržení se změní, takže nechtěně klikne na něco jiného, může to mít za následek špatnou uživatelskou zkušenost a potenciální ztrátu konverzí.

Běžné příčiny špatného CLS

1. Obrázky bez rozměrů:

   • Zahrnutí obrázků do jazyka HTML bez zadání jejich šířky a výšky může způsobit posuny v rozložení, protože prohlížeč neví, kolik místa má na začátku přidělit.

2. Reklamy, vložené reklamy a iframy bez rozměrů:

   • Tyto prvky se mohou dynamicky načítat a způsobovat posuny v rozvržení, pokud nejsou jejich rozměry předem zadány.

3. Dynamicky vkládaný obsah:

   • Přidání obsahu nad stávající obsah v DOM může způsobit posunutí prvků směrem dolů.

4. Webová písma způsobující FOIT/FOUT:

   • Záblesk neviditelného textu (FOIT) a záblesk nestylizovaného textu (FOUT) mohou způsobit posun rozložení při načítání webových písem v prohlížeči.

Osvědčené postupy pro minimalizaci CLS

1. Zahrnutí atributů velikosti u obrázků a videí:

   • Vždy definujte šířku a výšku obrázků a videí v jazyce HTML, abyste jim před načtením vyhradili místo v rozvržení.

2. Rezervace místa pro reklamy a vložené příspěvky:

   • Pomocí CSS nastavte rozměry reklamních slotů, rámů iframe a vložených oken, abyste zabránili posunům rozvržení při jejich načítání.

3. Vyhněte se dynamickému vkládání obsahu nad existující obsah:

   • Přidejte nový obsah pod záhyb nebo do kontejnerů, které již mají vyhrazený prostor.

4. Používejte strategie načítání písma:

   • Využijte vlastnost font-display CSS k řízení způsobu zobrazení webových písem a minimalizaci posunů způsobených funkcí FOIT/FOUT.

5. Použití transformace CSS pro animace:

   • K animaci prvků bez posunů rozvržení použijte místo vlastností nahoře, dole, vlevo nebo vpravo vlastnost transformovat.

Závěr

Kumulativní posun rozložení (CLS) je důležitým ukazatelem pro zajištění stabilního a vizuálně atraktivního uživatelského prostředí. Pochopením faktorů, které přispívají k posunům rozložení, a zavedením osvědčených postupů k jejich minimalizaci můžete zlepšit skóre CLS své webové stránky a zvýšit celkovou spokojenost uživatelů.

Další informace o vylepšení systému CLS a dalších základních webových vitálních funkcí najdete v dokumentaci k webovým vitálním funkcím společnosti Google.