Cumulative Layout Shift: Proč skákající prvky na webu odrazují zákazníky

Rychlá definice

CLS (Cumulative Layout Shift) je metrika, která měří vizuální stabilitu obsahu na vaší stránce během jejího načítání. Zjednodušeně řečeno: CLS vyjadřuje, jak moc se prvky na webu (texty, tlačítka, obrázky či bannery) nečekaně posouvají poté, co se uživateli už zobrazily.

Je to přesně ten frustrující moment, kdy chcete na mobilu kliknout na článek nebo tlačítko, stránka najednou „poskočí“ a vy omylem kliknete na reklamu.

Proč by vás to mělo zajímat z pohledu byznysu

CLS je jedním ze tří hlavních pilířů tzv. Core Web Vitals – ukazatelů, které Google používá k hodnocení uživatelské zkušenosti. Pokud se vám „hýbe web pod rukama“, má to přímý dopad na vaše tržby:

Ztráta konverzí a frustrace: Uživatel klikne jinam, než chtěl (například na „Zrušit“ místo „Vložit do košíku“), protože se mu pod kurzor vložil zpožděný prvek. To vyústí ve frustraci a často i okamžitý odchod ze stránky.
Znehodnocení investic do reklamy: Přivést uživatele z placené kampaně na web něco stojí. Pokud ho pak okamžitě odradíte skákajícím rozhraním, pálíte svůj marketingový rozpočet.
SEO penalizace: Google upřednostňuje stabilní weby. Špatné skóre CLS vás může znevýhodnit ve výsledcích organického vyhledávání, i když máte jinak obsahově skvělý web.

Typické chyby, které zhoršují CLS

Obrázky bez zadaných rozměrů: Prohlížeč neví, kolik místa obrázek zabere, dokud se celý nestáhne. Jakmile se na displeji objeví, odtlačí veškerý text pod ním.
Dynamicky vkládané prvky: Reklamní bannery, lišty s dopravou zdarma nebo výzvy k odběru newsletteru, které se „vsunou“ shora či doprostřed textu bez předem vyhrazeného místa.
Změna webových fontů (FOUT/FOIT): Stránka se načte se základním písmem. Když se po chvíli stáhne váš firemní font (který je širší nebo větší), celý textový blok se přeskládá a posune layout.

Jak CLS (vizuální stabilitu) vylepšit

Základem je dát prohlížeči předem vědět, kolik místa budou jednotlivé bloky potřebovat:

Definování rozměrů: U všech obrázků, videí a reklamních ploch uvádějte v HTML kódu atributy šířky a výšky (width a height). Prohlížeč si tak vyhradí správný prázdný prostor ještě před fyzickým načtením obsahu.
Rezervace místa pro dynamický obsah: Pokud víte, že se na stránce bude načítat banner, vytvořte pro něj v CSS „kontejner“ s pevnou minimální výškou. Tím zabráníte posunu zbytku stránky dolů.
Optimalizace písem: Používejte moderní CSS techniky (např. font-display: optional), které zabrání agresivnímu „blikání“ nebo nečekané změně velikosti textu po načtení fontu.

Jak k tomu přistupujeme v UNIKUM?

Jako agentura neřešíme technické parametry „do šuplíku“, ale kvůli výsledkům. Stabilita webu není jen technická disciplína pro programátory. Je to základní předpoklad toho, aby vaše marketingové kampaně vůbec mohly fungovat.

Pokud uživatele na web přivedete placenou reklamou, nesmíte ho odradit špatnou technickou implementací. Identifikujeme přesné prvky, které na vašem webu „skáčou“, a navrhneme vývojářům jasné fixy, které ochrání vaše konverze.

Mini-FAQ

Jaké je správné (dobré) skóre CLS?

Aby Google váš web hodnotil pozitivně, mělo by být skóre CLS nižší než 0,1. Hodnoty nad 0,25 už Google považuje za prokazatelně špatnou uživatelskou zkušenost.

Jak zjistím, co konkrétně mi na webu skáče?

Můžete využít bezplatný nástroj Google PageSpeed Insights, kde v sekci diagnostiky najdete konkrétní HTML prvky, které posun způsobují. Výborně funguje také panel Výkon (Performance) přímo ve vývojářských nástrojích prohlížeče Chrome.