CLS: Proč se vám web „skáče" pod rukama

Před půl rokem mi volala majitelka e-shopu s bizarním problémem: „Zákazníci si stěžují, že objednávají špatné velikosti. Tvrdí, že klikli na M, a přišlo L."

Znělo to neuvěřitelně. Až do okamžiku, kdy jsem si web otevřela na mobilu. Klikla jsem na „Velikost M". V ten moment se načetl reklamní banner nahoře, celá stránka se posunula dolů a já jsem klikla na „Velikost L".

Problém? CLS (Cumulative Layout Shift) — „kumulativní posun rozvržení". Web se „skákal" během načítání. A způsoboval nechtěné kliknutí.

Oprava trvala den. CLS kleslo z 0,37 na 0,06. Reklamace typu „špatná velikost" klesly o 80 %.

Co je CLS a proč rozčiluje uživatele

CLS je metrika měřící, jak moc se obsah webu nepředvídatelně pohybuje během načítání.

Představte si, že čtete článek. Najednou se nad text načte reklama, obsah skočí dolů o 300 pixelů a vy jste ztratili místo. Nebo kliknete na tlačítko „Zrušit" a přesně v tom momentě se stránka posune — kliknete na „Potvrdit".

To je CLS. A je to extrémně frustrující.

Google CLS zahrnul do Core Web Vitals v květnu 2020 a od června 2021 se stal oficiálním rankingový faktorem. Proč? Protože právě tahle věc nejvíc rozčiluje uživatele na pomalých webech.

Jak se CLS měří

CLS je skóre od 0 (perfektní, žádný posun) do nekonečna (čím vyšší, tím hůř).

Cílové hodnoty

Zdroj: Google Core Web Vitals - aktuální thresholds pro rok 2026

Google počítá CLS jako součin dvou hodnot:

Impact Fraction = % obrazovky ovlivněné posunem Distance Fraction = Jak daleko se prvky posunuly

NAPříklad: Pokud se 50 % obrazovky posune o 20 % výšky, CLS = 0,5 x 0,2 = 0,1.

Více o výpočtu v oficiální dokumentaci web.dev.

Co způsobuje CLS (častí viníci)

Obrázky bez definovaných rozměrů

Když prohlížeč načítá HTML, neví, jak velký bude obrázek. Takže pro něj nerezervuje místo. Obrázek se načte později a odtlačí vše dolů.

Špatně:

<img src="produkt.jpg" alt="Produkt">

Správně:

<img src="produkt.jpg" alt="Produkt" width="800" height="600">

Prohlížeč vidí rozměry a rezervuje místo předem. Když se obrázek načte, nic se neposune.

Reklamy a embedy

Banner se načte se zpožděním. Náhle zabere 250 pixelů nahoře. Vše pod tím skočí dolů.

Řešení: Rezervujte prostor pro reklamu pomocí min-height:

<div style="min-height: 250px;">
  </div>

Webové fonty (FOUT/FOIT)

FOUT = Flash of Unstyled Text (text se zobrazí systémovým fontem, pak přepne) FOIT = Flash of Invisible Text (text je neviditelný, pak se objeví)

Oba můžou způsobit CLS, protože fonty mají různé rozměry.

Řešení:

@font-face {
  font-family: 'MyFont';
  src: url('font.woff2');
  font-display: swap; /* nebo optional */
}

font-display: swap říká: „Ukaž text systémovým fontem hned, po načtení přepni." Předejdete neviditelnému textu.

Dynamicky vložený obsah

JavaScript načte nový obsah a vloží ho nad stávající.

Špatně:

document.body.prepend(notification);

Banner se objeví nahoře, všechno skočí dolů.

Lépe: Vložte obsah na fixovanou pozici (sticky, fixed) nebo připravte pro něj místo.

Jak opravit CLS krok za krokem

Krok 1: Najděte, co způsobuje posuny

Použijte PageSpeed Insights. V sekci Diagnostics najdete „Avoid large layout shifts" — přesný seznam prvků, které se posouvají.

Krok 2: Definujte rozměry obrázků

Projděte HTML a přidejte width a height každému <img>:

<img src="banner.jpg" width="1200" height="400" alt="Banner">

Nebo v CSS použijte aspect-ratio:

img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

Krok 3: Rezervujte prostor pro dynamický obsah

Pro reklamy, embedy, lazy-loaded sekce vytvořte placeholder:

<div class="ad-placeholder" style="min-height: 250px;">
  </div>

Krok 4: Optimalizujte fonty

Přidejte font-display: swap a zvažte preload kritických fontů:

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

Krok 5: Testujte

Použijte Chrome DevTools:

1. Otevřete DevTools (F12)
2. Performance panel -> zaznamenejte načítání stránky
3. Hledejte červené oblasti označené jako „Layout Shift"
4. Klikněte na ně — uvidíte, který prvek se posunul

Více v Chrome DevTools průvodci.

Časté chyby, kterým se vyhnout

Animace přes top / left

Špatně:

@keyframes slideDown {
  from { top: 0; }
  to { top: 100px; }
}

Pohyb přes top způsobuje layout shift.

Správně:

@keyframes slideDown {
  from { transform: translateY(0); }
  to { transform: translateY(100px); }
}

transform nezpůsobuje layout shift — je „levnější" pro prohlížeč.

Vkládání obsahu bez rezervace místa

Načítáte komentáře přes AJAX a vkládáte je pod článek. Pokud jste nerezervovali místo, všechno pod nimi skočí dolů.

Řešení: Placeholder se správnou výškou nebo animovaný loader.

Cookie banners, notification bary

Pokud se objeví nahoře po načtení stránky, všechno skočí dolů.

Řešení: Umístěte je dole nebo použijte position: fixed (nezpůsobuje posun ostatního obsahu).

Jak měřit CLS

PageSpeed Insights

pagespeed.web.dev — zadejte URL, uvidíte CLS v Lab Data i Field Data.

Google Search Console

Experience -> Core Web Vitals — zobrazí, kolik stránek má dobré/špatné CLS.

Chrome Extension: Web Vitals

Web Vitals extension — real-time měření během prohlížení.

Shrnutí

CLS měří, jak moc se web „skáče" během načítání. Hodnota pod 0,1 je výborná. Nad 0,25 je problém.

Nejčastější příčiny:

• Obrázky bez rozměrů
• Reklamy a embedy načtené později
• Webové fonty (FOUT/FOIT)
• Dynamický obsah vložený nad stávající

Řešení:

• Definujte width a height u obrázků
• Rezervujte prostor pro reklamy
• Použijte font-display: swap
• Animujte přes transform, ne top/left

CLS přímo ovlivňuje uživatelskou zkušenost. Špatné CLS znamená nechtěná kliknutí, ztrátu místa při čtení, frustraci — uživatelé odcházejí.

Chcete opravit layout shifts na vašem webu?

Nabízím úvodní konzultaci, kde společně najdeme, co způsobuje CLS, a navrhnu konkrétní řešení.

Objednejte si konzultaci zdarma ->

Související články

• Core Web Vitals: Kompletní průvodce — všechny tři metriky
• LCP: Proč se váš web načítá pomalu — rychlost načítání
• INP: Jak zrychlit odezvu webu — interaktivita
• Technické SEO: Kompletní návod — další optimalizace

Často kladené otázky

Jaké CLS je dobré?

Pod 0,1 je výborné. Ideálně co nejblíže k 0. Nad 0,25 je špatné.

Proč mám vysoké CLS jen na mobilu?

Mobilní weby často načítají víc reklam, mají pomalejší fonty a obrázky bez rozměrů způsobí větší posuny na malých obrazovkách.

Ovlivňují lazy-loaded obrázky CLS?

Ano, pokud nemají definované rozměry. Vždy přidejte width a height, i když používáte lazy loading.

Počítají se posuny po kliknutí uživatele?

Ne. Google měří jen „unexpected shifts" — nečekané posuny. Posuny způsobené uživatelskou akcí (kliknutí na „zobrazit víc") se nepočítají.

Jak dlouho trvá, než se oprava projeví?

Google používá 28denní průměr terénních dat. Po opravě počkejte 4-6 týdnů na projev v Search Console.

Autorka: SEO specialistka s roky zkušeností. Pomáhám firmám zlepšit vizuální stabilitu webů a snížit frustraci uživatelů.

Vyzkoušejte kvalitu mé práce Získejte 1 článek ZDARMA na obsahovém webu s DA50+.

O autorce

SEO specialistka s roky zkušeností v oboru. Pomohla jsem firmám zlepšit jejich viditelnost v Google. Specializuji se na technické SEO, obsahový marketing a budování odkazů.

Kontaktujte nás | Další články