Cumulative Layout Shift (CLS) je metrika Core Web Vitals, která měří vizuální stabilitu stránky – tedy jak moc se obsah neočekávaně posouvá. A věřte mi, je to metrika, která umí pořádně potrápit. Podle dat z roku 2025 splňuje hranici „dobrého" CLS skóre (pod 0,1) jen 81 % webů. Zbylých 19 % ztrácí pozice ve vyhledávání, konverze i důvěru uživatelů.
V tomto průvodci vám ukážu osm konkrétních technik, jak CLS dostat na minimum – ideálně na nulu. Každá technika má funkční ukázku kódu, takže si ji můžete rovnou vyzkoušet.
Co je Cumulative Layout Shift a proč je důležitý
CLS měří celkový rozsah neočekávaných posunů layoutu během celého životního cyklu stránky. Na rozdíl od LCP nebo INP, které se měří v milisekundách, je CLS bezjednotkové číslo. Vypočítá se z impact fraction (jak velká část viewportu se posunula) a distance fraction (jak daleko se posunula).
Skóre je součin obou hodnot. Takže pokud se 50 % viewportu posune o 25 % výšky obrazovky, CLS pro tento posun vychází na 0,50 × 0,25 = 0,125. Google pak jako konečné CLS bere největší okno posunů (session window) – maximálně pětisekundový blok, ve kterém se jednotlivé posuny sečtou.
Prahové hodnoty CLS
- ≤ 0,1 – dobrá vizuální stabilita
- 0,1–0,25 – potřebuje zlepšení
- > 0,25 – špatná stabilita
Google hodnotí CLS na 75. percentilu, což znamená, že 75 % návštěv vaší stránky musí mít CLS pod 0,1, aby web prošel. A tady pozor – CLS se měří po celou dobu návštěvy, ne jen při načtení stránky. Proto laboratorní testy v Lighthouse často ukazují optimističtější výsledky, než jaká je realita v CrUX datech.
Proč se CLS vyplatí řešit jako první
Ze všech tří Core Web Vitals je CLS obvykle nejsnáze opravitelný. Často stačí přidat rozměry k obrázkům a rezervovat místo pro dynamický obsah. Nic složitého.
Přitom má obrovský dopad na byznys. Studie e-shopu Rakuten 24 ukázala, že snížení CLS vedlo k 53% nárůstu tržeb na návštěvníka a 33% zvýšení konverzního poměru. To jsou čísla, která stojí za pozornost.
V březnu 2026 navíc Google posílil váhu Core Web Vitals v rankingu. Pouze 47 % webů dosahuje „dobrých" hodnot – zbytek přichází o 8–35 % trafficu a konverzí. Takže pokud jste CLS dosud ignorovali, teď je ten správný čas to změnit.
6 nejčastějších příčin špatného CLS
1. Obrázky a videa bez rozměrů
Tohle je zdroj číslo jedna. Podle Web Almanac 2025 má 62 % mobilních stránek alespoň jeden obrázek bez atributů width a height. Když prohlížeč nezná rozměry obrázku, nemůže pro něj rezervovat místo – a po načtení se celý obsah pod ním prostě posune dolů. Klasika.
2. Reklamy a embedy bez rezervovaného prostoru
Reklamní sítě injektují obsah dynamicky a často s proměnlivými rozměry. Pokud pro reklamní slot nemáte vyhrazený prostor, reklama po načtení odtlačí veškerý okolní obsah. Upřímně, reklamy patří k největším viníkům CLS na webu vůbec.
3. Webové fonty způsobující přetečení textu
Fonty jsou takový tichý zabiják CLS. Při načtení stránky prohlížeč nejprve zobrazí záložní font a po stažení vlastního fontu text přeformátuje. Pokud mají fonty odlišnou metriku (výšku řádku, šířku znaků), dojde k posunu obsahu. Projevuje se to jako FOUT (Flash of Unstyled Text) nebo FOIT (Flash of Invisible Text).
4. Dynamicky vkládaný obsah
Cookie bannery, notifikační lišty, formuláře pro sběr leadů – cokoli, co se vloží nad existující obsah bez předem rezervovaného místa, způsobí layout shift. Platí to i pro lazy-loaded obsah, který se při scrollování načte a změní rozložení stránky.
5. CSS animace spouštějící přepočet layoutu
Animace vlastností jako height, width, top nebo margin nutí prohlížeč přepočítávat layout a způsobují posuny. Data ukazují, že 39 % mobilních stránek má nekompozitní animace přispívající k CLS. To je docela dost.
6. Skeleton loadery s nesprávnou výškou
V React a dalších SPA frameworcích je dynamický obsah příčinou číslo jedna CLS. Skeleton loadery jsou skvělý vzor, ale jen pokud přesně odpovídají rozměrům finálního obsahu. Pokud ne, CLS vzniká stejně – jen to vypadá líp.
Jak diagnostikovat CLS problémy
Chrome DevTools – Layout Shift Regions
Nejrychlejší způsob, jak odhalit layout shifty: otevřete DevTools, přejděte do More Tools → Rendering a zaškrtněte Layout Shift Regions. Obnovte stránku a oblasti s posuny se zvýrazní fialově. Zabere to pár sekund a hned víte, kde vás tlačí bota.
Performance panel – Layout Shifts track
Pro hlubší analýzu nahrajte trace v záložce Performance. V tracku Layout Shifts uvidíte fialové pruhy reprezentující clustery posunů. Klikněte na diamant a v panelu Summary se zobrazí, které elementy se posunuly – odkud a kam. Od roku 2025 DevTools nabízí také CLS Culprits insight, který přímo ukáže na viníka.
Layout Instability API pro produkční monitoring
// Sledování layout shiftů v produkci
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
if (!entry.hadRecentInput) {
console.log('Layout shift:', entry.value.toFixed(4));
for (const source of entry.sources) {
console.log('Element:', source.node);
console.log('Předchozí pozice:', source.previousRect);
console.log('Aktuální pozice:', source.currentRect);
}
}
}
});
observer.observe({ type: 'layout-shift', buffered: true });Důležité: Laboratorní nástroje (Lighthouse, DevTools) měří CLS pouze při načtení stránky. Reální uživatelé ale scrollují, interagují a zůstávají na stránce mnohem déle. Proto vždy prioritizujte field data z CrUX nebo Google Search Console – tam uvidíte, jak to doopravdy vypadá.
8 technik pro snížení CLS na nulu
Technika 1: Vždy nastavte rozměry obrázkům a videím
Tahle oprava je tak jednoduchá, až je to skoro trapné, kolik webů ji nemá. Každý element <img> a <video> musí mít atributy width a height. Moderní prohlížeče z nich automaticky vypočítají poměr stran a rezervují místo ještě před stažením souboru.
<!-- Špatně: žádné rozměry -->
<img src="hero.webp" alt="Hero obrázek">
<!-- Správně: rozměry nastaveny -->
<img src="hero.webp" alt="Hero obrázek" width="1200" height="630">
<!-- Pro responzivní design přidejte CSS -->
<style>
img {
max-width: 100%;
height: auto;
}
</style>I když CSS přepíše skutečné rozměry (třeba max-width: 100%), prohlížeč zachová poměr stran odvozený z HTML atributů. Tohle je zdaleka nejjednodušší a nejúčinnější oprava CLS. Osobně bych s ní začal vždycky.
Technika 2: Používejte CSS aspect-ratio pro flexibilní komponenty
Vlastnost aspect-ratio se hodí hlavně tam, kde neznáte přesné rozměry předem – responzivní embedy, dynamicky načítané obrázky nebo video přehrávače.
/* Hero obrázek s pevným poměrem stran */
.hero-image {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
background-color: #f0f0f0; /* placeholder barva */
}
/* Embed kontejner pro YouTube apod. */
.video-embed {
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
}
/* Čtvercový placeholder pro produktový obrázek */
.product-thumb {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: contain;
background-color: #fafafa;
}Prohlížeč vypočítá chybějící rozměr okamžitě při prvním vykreslení, ještě před dokončením síťových požadavků. A to je zásadní – nemusíte čekat na nic ze sítě.
Technika 3: Rezervujte prostor pro reklamy a dynamický obsah
Pro reklamní sloty vytvořte kontejner s minimální výškou odpovídající největšímu možnému formátu reklamy. A hlavně – nikdy nevkládejte obsah nad existující viditelný obsah, pokud to není přímá reakce na uživatelovu akci.
/* Kontejner pro reklamní slot */
.ad-slot {
min-height: 250px; /* výška nejběžnějšího formátu */
width: 300px;
background-color: #f8f8f8;
display: flex;
align-items: center;
justify-content: center;
}
.ad-slot::before {
content: "Reklama";
color: #ccc;
font-size: 0.875rem;
}
/* Kontejner pro cookie banner – overlay, ne push */
.cookie-banner {
position: fixed; /* NIKDY ne position: static */
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
}Klíčové pravidlo: Cookie bannery, notifikační lišty a promo pásky musí používat position: fixed nebo position: sticky, aby překrývaly obsah místo jeho odtlačení. Tohle je jedna z těch věcí, co se snadno přehlédne, ale má obrovský dopad.
Technika 4: Optimalizujte načítání fontů
Pro nulový CLS způsobený fonty je (podle mě) nejlepší volbou font-display: optional. Prohlížeč počká maximálně ~100 ms na stažení fontu – pokud se nestihne, použije záložní font a k žádnému přeformátování nedojde. Žádný posun, žádný problém.
/* Nejbezpečnější varianta pro CLS: font-display: optional */
@font-face {
font-family: 'CustomFont';
src: url('/fonts/custom.woff2') format('woff2');
font-display: optional;
font-weight: 400;
}
/* Pokud potřebujete font vždy zobrazit: swap + size-adjust */
@font-face {
font-family: 'CustomFont';
src: url('/fonts/custom.woff2') format('woff2');
font-display: swap;
font-weight: 400;
}
/* Záložní font s vyrovnanou metrikou */
@font-face {
font-family: 'CustomFont Fallback';
src: local('Arial');
size-adjust: 105%;
ascent-override: 90%;
descent-override: 22%;
line-gap-override: 0%;
}A nezapomeňte preloadovat kritické fonty v hlavičce HTML:
<link rel="preload" href="/fonts/custom.woff2" as="font"
type="font/woff2" crossorigin>Tip: Zvažte moderní systémové font stacky z modernfontstacks.com – načtou se okamžitě a CLS je nulový. A pokud stále používáte ikonové fonty, nahraďte je SVG ikonami. Jsou stabilnější i přístupnější.
Technika 5: Používejte transform animace místo layout animací
Animace vlastností jako width, height, top, left nebo margin spouštějí přepočet layoutu a přispívají k CLS. Řešení? Používejte transform a opacity – běží na GPU a layout vůbec neovlivňují.
/* Špatně: animace výšky způsobuje layout shift */
.accordion-content {
height: 0;
overflow: hidden;
transition: height 0.3s ease;
}
.accordion-content.open {
height: 200px;
}
/* Správně: transform animace bez layout shiftu */
.accordion-content {
transform: scaleY(0);
transform-origin: top;
opacity: 0;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.accordion-content.open {
transform: scaleY(1);
opacity: 1;
}V moderních prohlížečích můžete zkusit i novou vlastnost interpolate-size: allow-keywords, která umožňuje animovat z height: 0 na height: auto bezpečně. Ale pro maximální kompatibilitu bych zatím zůstal u transformací.
Technika 6: Skeleton loadery s přesnými rozměry
Skeleton loadery jsou výborný UX vzor, ale musí přesně odpovídat rozměrům finálního obsahu. Jinak jen maskujete problém hezčím vizuálem (a CLS vám to stejně napočítá).
/* Skeleton s přesnými rozměry produktové karty */
.product-card-skeleton {
width: 100%;
height: 380px; /* MUSÍ odpovídat výšce finální karty */
border-radius: 8px;
background: linear-gradient(
90deg,
#f0f0f0 25%,
#e0e0e0 50%,
#f0f0f0 75%
);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* Kontejner s min-height jako pojistkou */
.product-grid-item {
min-height: 380px;
contain: layout;
}Vlastnost contain: layout říká prohlížeči, že obsah uvnitř elementu neovlivní layout okolních prvků. Berte to jako další vrstvu ochrany proti neočekávaným posunům.
Technika 7: Zajistěte kompatibilitu s bfcache
Back/Forward Cache (bfcache) udržuje stránky v paměti prohlížeče po navigaci pryč. Když se uživatel vrátí tlačítkem Zpět, stránka se obnoví okamžitě – plně načtená, bez jakýchkoli layout shiftů. Tahle technika je trochu přehlížená, ale je nesmírně efektivní, protože eliminuje posuny úplně.
Co udělat pro kompatibilitu s bfcache:
// Nepoužívejte unload event – blokuje bfcache
// Špatně:
window.addEventListener('unload', () => { /* ... */ });
// Správně: použijte pagehide
window.addEventListener('pagehide', (event) => {
if (event.persisted) {
// Stránka jde do bfcache
console.log('Stránka uložena do bfcache');
}
});
// Obnovení stavu při návratu z bfcache
window.addEventListener('pageshow', (event) => {
if (event.persisted) {
// Stránka obnovena z bfcache – aktualizujte stav
updateDynamicContent();
}
});Kompatibilitu si ověříte v DevTools: záložka Application → Back/forward cache ukáže, co bfcache blokuje. Často je to právě ten zapomenutý unload listener.
Technika 8: Myslete v šablonách, ne v jednotlivých URL
Tenhle přístup vám ušetří spoustu práce. Pokud má vaše blogová šablona CLS problém, ovlivňuje to všechny blogové příspěvky. Oprava šablony jednou vyřeší stovky URL najednou. Stejný princip platí pro e-shop – pokud mají produktové karty nestabilní layout, opravte komponentu, ne jednotlivé stránky.
/* Stabilní šablona pro blogový článek */
.article-layout {
/* Rezervace místa pro featured image */
.featured-image-container {
width: 100%;
aspect-ratio: 2 / 1;
background-color: #f5f5f5;
overflow: hidden;
}
/* Stabilní sidebar s pevnou šířkou */
.sidebar {
width: 300px;
min-height: 600px;
flex-shrink: 0;
}
/* Obsahová oblast s contain */
.content {
flex: 1;
contain: layout style;
}
}V Google Search Console přejděte na Core Web Vitals report – seskupuje URL podle šablon a ukazuje, které potřebují opravu. Po nasazení opravy klikněte na „Validate fix" pro ruční spuštění validace. Jen počítejte s tím, že data v CrUX se aktualizují v 28denním okně, takže výsledky neuvidíte hned.
Nová metrika v roce 2026: Visual Stability Index (VSI)
Na začátku roku 2026 Google tiše představil něco, čemu se říká Core Web Vitals 2.0, s novou dimenzí: Visual Stability Index (VSI). Na rozdíl od CLS, který je „page-scoped" (měří posuny na jedné stránce), VSI je „session-scoped" – měří stabilitu layoutu během celé uživatelské session.
VSI rozlišuje mezi předvídatelnými a nepředvídatelnými posuny. Když uživatel klikne na rozbalovací sekci a obsah se posune dolů, VSI to nepenalizuje – to je očekávané chování. Ale reklama, která bez varování odtlačí text? Ta dostane přísný postih.
Dobrá zpráva je, že všechny techniky z tohoto článku vám pomohou s oběma metrikami. Vyřešte CLS a budete mít solidní základ i pro VSI.
Kontrolní seznam pro audit CLS
- Ověřte, že všechny
<img>a<video>elementy mají atributywidthaheight - Zkontrolujte, že reklamní sloty, embedy a iframy mají rezervovaný prostor
- Ujistěte se, že fonty používají
font-display: optionalneboswapssize-adjust - Ověřte, že cookie bannery a notifikace používají
position: fixed/sticky - Zkontrolujte, že animace používají
transformaopacity, ne layoutové vlastnosti - Porovnejte lab data (Lighthouse) s field daty (CrUX/Search Console)
- Otestujte na mobilních zařízeních – CLS bývá na menších obrazovkách horší
- Zapněte Layout Shift Regions v DevTools a projděte celou stránku včetně scrollování
Často kladené otázky
Jaký je rozdíl mezi CLS v Lighthouse a CLS v CrUX?
Lighthouse měří CLS pouze během simulovaného načtení stránky v kontrolovaném prostředí. CrUX (Chrome User Experience Report) sbírá data od reálných uživatelů po celou dobu jejich návštěvy – včetně scrollování, interakcí a dynamicky načítaného obsahu. Proto bývá CLS v CrUX často vyšší než v Lighthouse. A pro hodnocení ve vyhledávání Google používá právě data z CrUX.
Započítávají se do CLS posuny způsobené interakcí uživatele?
Ne. Layout shifty, které nastanou do 500 ms po interakci uživatele (kliknutí, stisk klávesy, dotek), se do CLS nezapočítávají. Google je považuje za očekávané. Posuny mimo toto 500ms okno se ale počítají, i když byly nepřímo spuštěny uživatelem – třeba lazy-loaded obsah při scrollování.
Je lepší font-display: swap nebo font-display: optional pro CLS?
font-display: optional je nejbezpečnější volba pro nulový CLS – pokud se font nestihne načíst do ~100 ms, prohlížeč použije záložní font a k přeformátování nedojde. font-display: swap zobrazí text okamžitě v záložním fontu a po načtení ho přeformátuje, což může způsobit layout shift. Pokud potřebujete vlastní font vždy zobrazit, kombinujte swap s CSS vlastností size-adjust na záložním fontu.
Jak rychle se projeví oprava CLS v Google Search Console?
CrUX používá klouzavé 28denní okno. Po nasazení opravy trvá přibližně 28 dní, než se stará data plně nahradí novými. Zlepšení se projevuje postupně, ne skokově. V Search Console můžete kliknout na „Validate fix" pro ruční spuštění validačního procesu, ale samotná data se aktualizují svým tempem.
Může špatné CLS skutečně ovlivnit pozice ve vyhledávání?
Ano, a to výrazně. CLS je součástí Core Web Vitals, které Google používá jako rankingový signál. Po březnovém core updatu 2026 se váha výkonnostních metrik v algoritmu zvýšila. Studie ukazují, že weby splňující všechny tři Core Web Vitals mají o 24 % nižší bounce rate. Jeden e-shop, který optimalizoval CLS z 0,32 na 0,08, zaznamenal 34% nárůst organického trafficu během pouhých 6 týdnů.