Slovníček pojmů
Cumulative Layout
Shift (CLS)
CLS měří, jak moc se stránka vizuálně posouvá během načítání. Čím nižší skóre, tím méně překvapení pro uživatele a tím lepší signál pro Google.
Definice
Co je CLS a co měří
Cumulative Layout Shift (CLS) je metrika vizuální stability stránky. Měří, jak moc se viditelné prvky na stránce neočekávaně posouvají během načítání nebo při interakci uživatele. Zjednodušeně: čte si uživatel nadpis, načte se obrázek nad ním, text poskočí dolů a uživatel klikne na špatné tlačítko. Přesně to CLS zachycuje a kvantifikuje.
Google představil CLS na jaře 2020 jako součást Core Web Vitals — skupiny metrik zaměřených na skutečný prožitek uživatele při práci se stránkou. Od roku 2021 je CLS součástí Page Experience signálu, který Google zahrnuje do hodnocení stránek.
Důležité je rozlišení: CLS nezachycuje všechny posuny. Měří pouze neočekávané posuny — tedy takové, které neinicioval uživatel. Pokud uživatel klikne na tlačítko a stránka se změní, jde o očekávanou změnu. Pokud se stránka pohne sama od sebe při načítání reklamy nebo fontu, jde o neočekávaný posun, který CLS zaznamenává.
Aktualizováno: . Obsah vychází z dokumentace Google web.dev a specifikace Layout Instability API (WICG).
Výpočet
Jak se CLS skóre počítá
Skóre každého jednotlivého posunu se skládá ze dvou složek. První je impact fraction — jak velkou část viewportu nestabilní prvek zaujímal ve svých obou polohách dohromady. Pokud prvek zabírá 50 % výšky viewportu a posune se o dalších 25 % dolů, přičteme obě oblasti: výsledek je 75 % viewportu, tedy impact fraction 0,75.
Druhá složka je distance fraction — jak daleko se prvek posunul relative k viewportu. Ve stejném příkladu prvek urazil 25 % výšky viewportu, takže distance fraction je 0,25.
Skóre jednoho posunu pak vznikne jako součin obou: 0,75 × 0,25 = 0,1875. Celkové CLS skóre stránky je pak součet skóre největší série po sobě jdoucích posunů v rámci okna 5 sekund, přičemž mezi jednotlivými posuny nesmí být pauza delší než 1 sekunda. Tomuto konceptu se říká session window.
Hodnocení
Jaké hodnoty CLS jsou dobré
Google hodnotí CLS ve třech pásmech. Cílem je dostat se pod 0,1, ideálně pod 0,05 u kritických stránek.
| Skóre CLS | Hodnocení | Co to znamená v praxi | Doporučení |
|---|---|---|---|
| 0 – 0,1 | Dobré | Stránka je vizuálně stabilní. Uživatel nezažívá neočekávané posuny obsahu. | Udržovat, monitorovat po každém nasazení změn. |
| 0,1 – 0,25 | Potřebuje zlepšení | Posuny existují, uživatel je může zaznamenat. Google tuto stránku hodnotí jako průměrnou z pohledu vizuální stability. | Diagnostikovat příčiny přes PageSpeed Insights a odstranit alespoň ty s největším dopadem. |
| nad 0,25 | Špatné | Uživatel pravděpodobně klikne na špatný prvek nebo ztratí místo v textu. Dopad na UX je prokazatelný. | Okamžitý zásah. Zkontrolujte obrázky bez rozměrů, reklamy a dynamicky načítaný obsah. |
Google vyhodnocuje CLS na 75. percentilu návštěvnosti — tedy stránka musí být v dobrém pásmu pro tři čtvrtiny uživatelů, ne jen pro průměr. Jedno zařízení s pomalým připojením, na kterém se CLS vyšplhá na 0,4, stahuje celkové skóre dolů víc, než by průměr naznačoval.
Diagnostika
Nejčastější příčiny špatného CLS
Projděte si následující checklist. Každá z těchto příčin se na webu průměrné firmy vyskytuje nejméně jednou.
Měření
Jak CLS změřit
CLS se měří ve třech nástrojích, přičemž každý z nich funguje jinak a reportuje jiná data. Než začnete hledat příčiny, rozhodněte se, která čísla berete jako závazná.
PageSpeed Insights
Zadejte URL na pagespeed.web.dev. Výsledek ve sloupci Field Data ukazuje CLS z reálných dat uživatelů za posledních 28 dní (data z Chrome UX Reportu). Tato čísla jsou směrodatná pro hodnocení Googlem. Sloupec Lab Data zobrazuje Lighthouse měření ze simulovaného načtení.
Google Search Console
V sekci Funkce > Core Web Vitals najdete přehled stránek rozdělených do tří pásem. GSC zobrazuje agregovaná field data přes celý web, ne jen pro jednu URL. Pokud vidíte skupinu stránek s červeným hodnocením, začněte diagnózu tam. Podrobněji o nastavení v článku o Google Search Console.
Chrome DevTools
Otevřete záložku Performance, spusťte záznam načtení stránky a po skončení vyhledejte modré pruhy s označením Layout Shift. Kliknutím na pruh zjistíte, který konkrétní prvek posun způsobil. DevTools jsou nejpřesnější nástroj pro identifikaci příčin, ale vyžadují trochu praxe.
Řešení
Jak CLS opravit — co řešit jako první
Každá z příčin má konkrétní technické řešení. Řaďte opravy od těch s největším dopadem: začněte u prvků, které jsou ve viewportu při načtení stránky — ty přispívají k CLS víc než prvky níže na stránce.
Přidejte atributy width a height přímo do každého <img> tagu. Prohlížeč pak dopředu ví, kolik místa rezervovat, ještě před stažením souboru. Alternativně nastavte CSS vlastnost aspect-ratio pro kontejner obrázku. Platí to i pro videa a iframe embedy.
- img tag: vždy width=“X“ height=“Y“ i při responzivním designu
- CSS: aspect-ratio: 16 / 9 na obrázkový kontejner jako záloha
- WordPress: od verze 5.5 přidává rozměry automaticky, ale zkontrolujte starší obrázky
Reklamní slot musí mít pevnou výšku ještě před načtením reklamy. Nastavte min-height na div, do kterého se reklama vkládá. Výška by měla odpovídat největšímu formátu, který na daném slotu může zobrazit. Fluidní reklamní formáty (proměnlivá výška) umísťujte výhradně pod fold — tam mají menší dopad na skóre.
- Leaderboard (728×90): rezervujte min-height: 90px na slot
- Rectangle (300×250): rezervujte min-height: 250px na slot
- Google Ads: použijte fixed-size slot místo fluid tam, kde to jde
Vlastnost font-display: optional způsobí, že prohlížeč použije záložní font, pokud webfont není načten do určitého časového limitu. Žádný skok textu nenastane. Vlastnost font-display: swap povolí viditelný záložní font s pozdějším swapem — vhodné pro weby, kde je přesná typografie méně kritická. Doplňte preload pro kritické fonty.
- Prioritní řešení: font-display: optional eliminuje FOUT úplně
- Preload: <link rel=“preload“ as=“font“> pro hlavní font v head
- Google Fonts: přidejte &display=optional do URL parametru
Cookie lišty, chat widgety a notifikační pruhy vkládejte výhradně na základě interakce uživatele, nebo je umístěte pevně do layoutu ještě před načtením stránky (position: fixed nebo sticky). Nikdy nevkládejte nový obsah nad existující prvky ve viewportu poté, co se stránka načetla. Výjimkou jsou změny způsobené kliknutím nebo zadáním textu uživatele — ty CLS neovlivňují.
- Cookie lišta: position: fixed bottom:0 — nezabírá místo v layoutu
- Chat widget: position: fixed, nenačítat before DOMContentLoaded
- Push notifikace: vždy spouštěné uživatelskou akcí, ne automaticky
Nahraďte CSS vlastnosti, které přepočítávají layout. Vlastnosti top, left, margin, padding, width a height při animaci nutí prohlížeč přepočítat pozice všech sousedních prvků. Nahraďte je vlastností transform: translateX() / translateY(), která layout neovlivňuje a animuje se na GPU.
- Špatně: animace margin-top nebo left
- Správně: transform: translate() nebo scale()
- Ověřte: will-change: transform pro složité animace
Atribut loading=“lazy“ odkládá načtení obrázku na moment, kdy se přiblíží viewportu. Pokud ale obrázek nemá definované rozměry, prohlížeč nevyhradí prostor a obsah pod obrázkem se posune v okamžiku načtení. Řešení je stejné jako u standardních obrázků — vždy uveďte width, height nebo nastavte aspect-ratio.
- Vždy kombinujte: loading=“lazy“ width=“X“ height=“Y“
- CSS fallback: img { aspect-ratio: attr(width) / attr(height) }
- Hero obrázky: nikdy nepoužívejte lazy-load pro first viewport
SEO dopad
CLS a SEO — jak tato metrika ovlivňuje pozice
CLS je od roku 2021 součástí Page Experience signálu, který Google zahrnuje do svého algoritmu řazení výsledků. Neznamená to, že špatné CLS samo o sobě způsobí propad o desítky pozic. Google opakovaně potvrzuje, že kvalita obsahu zůstává primárním faktorem. Špatné CLS ale vytváří kumulativní nevýhodu: pokud dvě stránky mají srovnatelný obsah, lepší technický výkon může rozhodovat.
Praktičtěji řečeno: špatné CLS poškozuje konverze víc než pozice. Uživatel, který klikne na špatné tlačítko kvůli poskočení stránky, odchází a vrací se do výsledků vyhledávání. Google tento signál (návrat do SERPu krátce po kliknutí) sleduje a může ho použít jako negativní kvalitativní signál pro danou stránku.
CLS je jednou ze tří metrik, které tvoří Core Web Vitals. Vedle ní se měří rychlost načtení největšího prvku (LCP) a odezva na první interakci uživatele (INP). Pokud máte špatné výsledky ve všech třech metrikách zároveň, dopad na výkon stránky je výraznější než při izolovaném problému.
Časté otázky
Časté otázky o CLS
Zdroje
Zdroje a použitá literatura
Google web.dev — Cumulative Layout Shift (CLS)
web.dev/articles/cls · přístup duben 2026
Google Publisher Tag — Minimize layout shift
developers.google.com/publisher-tag/guides/minimize-layout-shift · přístup duben 2026
WICG — Layout Instability API specifikace
github.com/WICG/layout-instability · přístup duben 2026
Google Search Central — Core Web Vitals
developers.google.com/search/docs/appearance/core-web-vitals · přístup duben 2026