CLS (Cumulative Layout Shift): Vizuální stabilita rozvržení stránky

Co je CLS (Cumulative Layout Shift) a proč na něm záleží

Cumulative Layout Shift (CLS) je metrika Core Web Vitals, která měří vizuální stabilitu stránky. Vyjadřuje, do jaké míry se prvky na obrazovce nečekaně posouvají během načítání nebo interakce bez přímého podnětu uživatele. Vysoké CLS snižuje čitelnost, způsobuje chybné kliky a zhoršuje konverze i vnímanou kvalitu značky.

Dobré: CLS ≤ 0,1
Potřebné zlepšení: 0,1 < CLS ≤ 0,25
Špatné: CLS > 0,25

Jak se CLS počítá (Session Windowed CLS)

CLS se počítá jako součet layout shift událostí v rámci takzvaných relací posunů (session windows). Každý posun má skóre: impact fraction × distance fraction.

Impact fraction: podíl viditelné oblasti, kterou zasáhne posun prvku mezi dvěma rámci.
Distance fraction: jak velká část výšky nebo šířky viewportu se prvek posunul (větší z obou hodnot).
Relace posunů: seskupení posunů s maximální mezerou 1 sekunda a délkou okna 5 sekund; výsledné CLS je maximum ze všech relací.

CLS se počítá pouze pro neúmyslné posuny nezpůsobené přímým vstupem (klik, klávesnice). Animace založené na transform typicky posun layoutu nezpůsobují.

Typické příčiny nestability layoutu

Obrázky a video bez definovaného poměru stran (width/height nebo aspect-ratio).
Reklamní boxy, embedované prvky a iFrame moduly bez rezervovaného prostoru.
Opožděné načítání webfontů (FOIT/FOUT) a překlasifikování textu po příchodu fontu.
Vkládání prvků nad již vykreslený obsah (bannery, lišty, cookie dialogy, A/B skripty).
Lazy-load bez zástupných prvků (placeholderů) nebo skeletonů se stabilními rozměry.
Hydratace SPA/SSR aplikací, kde klientská verze mění rozložení oproti serverové.
Dynamické CSS a styly aplikované až po asynchronních skriptech.

Diagnostika: nástroje a postup

Field data: sledujte reálná data uživatelů (RUM). Integrační skript Web Vitals nebo analytics umožní měřit CLS na vzorku návštěvníků a segmentovat podle zařízení a sítí.
Lab data: použijte Lighthouse a emulaci v Chrome DevTools. Aktivujte překryv Layout Shift Regions, který zobrazuje přesné posunuté oblasti.
Opakovatelné scénáře: testujte s blokováním/odblokováním reklam, pomalou sítí a studenou cache, abyste simulovali reálné podmínky.
SPA trasy: spouštějte měření při přechodech mezi routami; nestabilita se často objeví až po prvním interaktivním zobrazení.
Regresní testy: zaveďte mezní limity do CI/CD (např. selhat build, pokud CLS stoupne nad limit na klíčových šablonách).

Ověřené techniky na snížení CLS

Rezervujte prostor pro média: vždy definujte rozměry nebo aspect-ratio pro <img> a kontejnery videa.
Stabilní reklamy a embedy: vyhraďte minimální výšku; pro adaptivní formáty použijte kontejnery s pravidly pro fallbacky (např. min-height).
Fonty bez přebliknutí: předejte a preload kritických fontů; použijte font-display: swap nebo optional a font fallback s podobnou metrikou (line-height, letter-spacing).
Nepřidávejte obsah nad fold: doplňky, souhlasy a promo panely vkládejte pod existující obsah nebo nad ně rezervujte místo od začátku.
Animace přes transform: pohyb a vstupy realizujte přes transform/opacity, nikoliv změnou layoutových vlastností (top/left/width/height).
Lazy-load se skeletony: používejte zástupné prvky s pevnými rozměry; obrázky načítejte s loading="lazy" a decoding="async".
Stabilní hydratace: slaďte markup serveru a klienta; vyhněte se podmínkám, které mění počet prvků po hydrataci.
Deterministické A/B: renderujte zvolený variant již na serveru nebo rezervujte místo pro největší variantu.

Vzory implementace (bez překvapení)

Obrázky: přidejte width a height podle skutečných pixelů; pro responsivní design použijte CSS max-width: 100% a height: auto – prohlížeč si vypočítá stabilní poměr stran.
CSS aspect-ratio: pro kartičky, video a embed kontejnery používejte aspect-ratio: 16 / 9 nebo dynamické hodnoty získané z dat.
Reklamní slot: vytvořte kontejner s min-height pro nejčastější formát; při menší kreativitě vycentrujte obsah, nikoliv kontejner.
Webfonty: použijte <link rel="preload" as="font" type="font/woff2" crossorigin> pro klíčové styly a nastavte font-display podle strategie načítání.
Cookie lišta: rezervujte fixní prostor od začátku (např. padding-bottom na body při spodním baru) nebo ji renderujte jako overlay bez posunu layoutu.

Specifika pro moderní frontendové architektury

SSR/SSG: zajistěte, aby klient nesmazával serverový HTML způsobem, který mění rozměry (podmíněné renderování, datové dify, kontrola hydration mismatch logů).
SPA a routování: používejte trvalé konstrukce layoutu a nahrazujte pouze obsah; skeletony by měly mít podobnou výšku jako výsledné komponenty.
Virtuální seznamy: definujte pevnou výšku položek nebo predikční model výšek, aby recyklace prvků nezpůsobovala skoky.
CMS a UGC: šablony musí kontrolovat rozměry embedů (mapy, příspěvky ze sítí) a automaticky jim vkládat aspect-ratio.

Měření v praxi: field vs. lab

Lab (Lighthouse, DevTools) umožňuje rychlou iteraci, ale nezahrnuje skutečné variance zařízení, sítí a reklam. Field měření (RUM) poskytují percentily (např. p75) a reálný mix návštěvnosti. Optimalizace by měla cílit na p75 CLS ≤ 0,1 pro všechny klíčové šablony (domov, produkt, kategorie, článek, košík).

Checklist na zlepšení CLS

Má každý obrázek definované width/height nebo aspect-ratio?
Jsou reklamní/affiliate/iframe zóny se stabilním kontejnerem a min-height?
Je cookie bar/promo panel bez posunu obsahu (overlay nebo rezervované místo)?
Je přehledné font loading (preload, swap/optional) a konzistentní fallback?
Mají lazy-loadované UI skeletony odpovídající rozměry?
Je hydratace bez změny počtu/pořadí prvků a bez reflow?
Jsou animace řešeny přes transform/opacity místo layoutových vlastností?
Běží RUM metriky a sledujete p75 podle zařízení a šablon?

Business dopad: propojení na SEO, AIO/AEO a konverze

CLS je součástí kvality stránek v organickém vyhledávání a ovlivňuje viditelnost, ale především zlepšuje použitelnost pro LLM/AI agenty (AIO/AEO): stabilní rozhraní umožňuje spolehlivější extrakci dat a automatizované interakce bez chyb. Nižší CLS snižuje míru chyb při kliknutí, zvyšuje dokončení mikroakcí a přímo se promítá do tržeb.

Roadmapa implementace

Audit šablon: identifikujte top cesty (SEO/SEM/Direct) a seznam prvků, které posouvají layout.
Stabilizace médií a slotů: přidejte rozměry, aspect-ratio a minimální výšky.
Optimalizace fontů: preload kritických řezů, vyvážený font-display, sladěný fallback.
UI zásady: žádné vkládání nad fold, použití overlayů, transform animace.
SPA/SSR harmonizace: stabilní markup a hydratace; skeletony s reálnými rozměry.
Monitoring: nasadit RUM, sledovat p75, zařízení a regrese v CI.

Nejčastější anti-vzory, kterým se vyhnout

Vkládání bannerů nad nadpis článku po načtení.
Dynamicky měnící se velikosti komponent bez přechodu přes transform.
Nezadané rozměry hero obrázků a carouselů.
Asynchronní načítání CSS, které změní typografii a rozbití zalomení.
Widgety třetích stran bez sandboxu a bez fixní šířky/výšky.

Shrnutí

CLS je klíčový indikátor vizuální stability. Technická pravidla jsou jednoduchá: rezervujte prostor, stabilizujte načítání fontů a médií, nepohybujte layoutem po příchodu skriptů, animujte přes transform/opacity a měřte v reálném provozu. Důsledná implementace přinese plynulejší UX, lepší SEO výkon a robustnější AIO/AEO zpracování vašich stránek.