Co znamená CLS (Cumulative Layout Shift)?

CLS je metrika zaměřená na vizuální stabilitu stránky během jejího načítání. Měří součet všech neočekávaných posunů obsahu v rámci viditelné části obrazovky (viewportu). K posunům typicky dochází, když se obrázek, reklamní banner nebo font načte se zpožděním a odtlačí již vyrenderovaný text nebo tlačítka jinam. Výsledkem je špatná uživatelská zkušenost, kdy uživatel nechtěně klikne na jiný prvek, než původně zamýšlel.

Z hlediska byznysu má CLS přímý vliv na důvěryhodnost webu a konverzní poměr. Pokud se stránka pod rukama uživatele „hýbe“, působí produkt nedůvěryhodně a technologicky nezvládnutě. Pro e-shopy může vysoké CLP znamenat kritický problém v nákupním procesu (např. nechtěné odstranění položky z košíku). Google hodnotí CLS jako jeden z klíčových faktorů pro SEO; ideální hodnota by měla být nižší než 0,1.

Technické řešení stability vyžaduje disciplínu v definici rozměrů prvků. Mezi základní kroky optimalizace patří:

  • Rezervace místa: Definování přesných rozměrů (width a height) pro obrázky, videa a reklamní sloty v HTML/CSS, aby prohlížeč věděl, kolik místa má vyhradit ještě před stažením obsahu.
  • Optimalizace fontů: Správné nastavení nahrávání webfontů (např. pomocí font-display: swap) a minimalizace rozdílů mezi náhradním a finálním písmem.
  • Dynamický obsah: Zajištění, aby se nový obsah (bannery, infobary) vkládal do stránky plynule a nedeformoval stávající rozložení prvků.