Kumulativní posun rozvržení (CLS)

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 tzv. 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 snímky.
Distance fraction: jak velká část výšky nebo šířky viewportu se prvek posunul (větší z těchto dvou).
Relace posunů: seskupení posunů s maximální mezerou 1 s a délkou okna 5 s; 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 obvykle nezpůsobují posun layoutu.

Typické příčiny nestability layoutu

Obrázky a videa bez definovaného poměru stran (width/height nebo aspect-ratio).
Reklamní boxy, embedované prvky a iFrame moduly bez rezervovaného prostoru.
Zpožděné načítání webfontů (FOIT/FOUT) a přerenderová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ý zobrazí přesné posunuté oblasti.
Opakovatelné scénáře: testujte s blokováním/odblokováním reklam, pomalou sítí a studenou cache, aby se simulovaly 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 prahové limity do CI/CD (např. build selže, pokud CLS překročí 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 blikání: přednačtěte a preloadujte kritické fonty; 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, nikoli 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 vybraný variant už na serveru nebo rezervujte místo pro největší variant.

Vzorové implementační vzory (bez překvapení)

Obrázky: přidejte width a height podle skutečných pixelů; pro responzivní design použijte CSS max-width: 100% a height: auto – prohlížeč 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, ne kontejner.
Webfonty: použijte <link rel="preload" as="font" type="font/woff2" crossorigin> pro klíčové řezy 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 nepřepisoval 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 pouze nahrazujte obsah; skeletony by měly mít podobnou výšku jako výsledné komponenty.
Virtuální seznamy: definujte fixní 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 neobsáhne skutečné variace 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 pro 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 hlavně 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í mikro-akcí 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 se měnící velikosti komponent bez přechodu přes transform.
Nespecifikované rozměry hero obrázků a carouselů.
Asynchronní načítání CSS, které mění typografii a láme zalomení textu.
Widgety třetích stran bez sandboxu a bez fixní šířky/výšky.

Shrnutí

CLS je klíčový indikátor vizuální stability. Technické zásady 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 terénu. Důsledná implementace přinese plynulejší UX, lepší SEO výkon a robustnější AIO/AEO zpracování vašich stránek.