Ladění CLS: Jak Najít a Opravit Skákající Obsah na Webu

„Proč mi lidi píšou, že chtěli košili L a přišla M?" Tuhle otázku mi položil majitel e-shopu s oblečením. Reklamace rostly a on netušil proč.

Otevřela jsem si jeho web na telefonu. Klikla na velikost L. V tu chvíli se načetl banner. Stránka poskočila. Můj prst klikl na M. Změřila jsem CLS — 0,37. Katastrofální hodnota.

Proč CLS ničí uživatelskou zkušenost

Cumulative Layout Shift (CLS) měří, jak moc se obsah vašeho webu nepředvídatelně pohybuje. Každý posun, který uživatel nečeká, je layout shift. A Google je všechny sčítá.

Proč je to tak důležité? Protože skákající obsah způsobuje:

• Nechtěná kliknutí — zákazník chce kliknout na „Zrušit", ale klikne na „Potvrdit"
• Ztrátu orientace — čtenář ztratí místo v textu
• Frustraci — pocit, že web nefunguje správně

A frustrovaný zákazník nekupuje. Odchází.

Anatomie layout shiftu — co se děje v prohlížeči

Když prohlížeč vykresluje stránku, postupuje shora dolů. Každý prvek má svou pozici. Problém nastane, když prohlížeč neví, jak velký některý prvek bude.

Představte si to jako stavění domu z kostek. Máte naskládanou věž. Najednou vám někdo podstrčí kostku doprostřed — všechno nad ní se musí posunout nahoru.

Na webu to funguje stejně. Prohlížeč vykreslí text. Pak se načte obrázek bez definovaných rozměrů. Prohlížeč zjistí, že obrázek zabírá 400 pixelů na výšku. Všechno pod ním posune dolů.

To je layout shift.

Jak Google počítá CLS skóre

Google nepočítá jen počet posunů. Počítá jejich závažnost. Vzorec je:

CLS = Impact Fraction × Distance Fraction

Výsledné skóre může teoreticky dosáhnout jakékoliv hodnoty. V praxi většina webů má CLS mezi 0 a 1.

Důležité: Google měří CLS během celé relace uživatele, ne jen při načítání. Takže i layout shift, který nastane po 10 sekundách scrollování, se počítá.

Impact vs Distance fraction — vysvětlení

Impact Fraction říká, kolik procent obrazovky bylo ovlivněno posunem. Pokud se posunul prvek, který zabíral 30 % obrazovky, a jeho posun ovlivnil dalších 20 % obrazovky pod ním, Impact Fraction je 0,5 (50 %).

Distance Fraction měří, jak daleko se prvky posunuly. Pokud se obsah posunul o 150 pixelů na obrazovce vysoké 750 pixelů, Distance Fraction je 0,2 (20 %).

Příklad z praxe:

• Reklama se načte nad hlavním obsahem
• Ovlivní 60 % obrazovky (Impact = 0,6)
• Obsah se posune o 250 px při výšce 1000 px (Distance = 0,25)
• CLS = 0,6 × 0,25 = 0,15

Jediný takový posun vás dostane ze zeleného do oranžového pásma.

Ladění (debugging) CLS v Chrome DevTools

Najít, co způsobuje layout shifty, není snadné pouhým pohledem. Naštěstí Chrome DevTools nabízí nástroje, které vám přesně ukážou viníka.

Performance panel — jak najít layout shifty

Toto je nejspolehlivější metoda pro analýzu CLS:

1. Otevřete Chrome DevTools (F12 nebo Ctrl+Shift+I)
2. Přejděte na záložku Performance
3. Klikněte na ikonu nahrávání (kruh vlevo nahoře)
4. Obnovte stránku (F5)
5. Počkejte, až se stránka plně načte
6. Zastavte nahrávání

V záznamu hledejte červené značky označené jako Layout Shift. Jsou vidět v sekci „Experience" ve spodní části časové osy.

Když na layout shift kliknete, v dolním panelu uvidíte:

• Přesný čas, kdy k posunu došlo
• Skóre tohoto konkrétního posunu
• Seznam prvků, které se posunuly

Tip: Zaškrtněte „Screenshots" před nahráváním. Uvidíte vizuálně, co se v daný moment dělo.

Layout Shift Regions — vizuální zvýraznění

Pro rychlou diagnostiku během běžného prohlížení:

1. Otevřete DevTools
2. Stiskněte Ctrl+Shift+P (Command menu)
3. Napište „layout shift regions"
4. Vyberte „Show layout shift regions"

Teď, když budete procházet web, každý layout shift se zvýrazní modrou barvou. Okamžitě uvidíte, který prvek poskočil.

Tato funkce je geniální pro testování změn v reálném čase. Upravíte CSS, obnovíte stránku a hned vidíte, jestli layout shift zmizel.

Web Vitals extension pro ContentKing

Pro průběžné sledování CLS doporučuji nainstalovat rozšíření Web Vitals do Chrome.

Po instalaci uvidíte v rohu prohlížeče malou ikonu s aktuálními hodnotami Core Web Vitals:

• LCP (načítání)
• FID a INP (interaktivita)
• CLS (stabilita)

Ikona mění barvu podle stavu — zelená, oranžová, červená. Když kliknete, zobrazí se detaily včetně jednotlivých layout shiftů.

Výhoda oproti DevTools: Extension běží na pozadí a zachytí i posuny, které nastaly po delší době na stránce.

Nejčastější Viníci CLS (s řešením)

Za roky práce s weby jsem identifikovala čtyři hlavní příčiny layout shiftů. Každá má specifické řešení.

Obrázky bez rozměrů — aspect-ratio řešení

Toto je nejčastější viník. Prohlížeč neví, jak velký obrázek bude, dokud ho nestáhne. Takže pro něj nerezervuje místo.

Špatně:

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

Správně — atributy width a height:

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

Prohlížeč vidí rozměry a rezervuje místo předem. Obrázek může mít jakoukoliv reálnou velikost — prohlížeč dopočítá poměr stran.

Moderní řešení — CSS aspect-ratio:

img {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;
}

Nebo pro specifické situace:

.hero-image {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  object-fit: cover;
}

aspect-ratio je podporováno ve všech moderních prohlížečích. Pro responzivní obrázky je to často lepší řešení než pevné rozměry.

Reklamy a embedy — rezervace prostoru

Reklamy jsou noční můra pro CLS. Načítají se asynchronně, často ze třetích stran, a jejich rozměry se můžou lišit podle kampaně.

Řešení — min-height kontejner:

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

Pro responzivní reklamy:

.ad-container {
  min-height: 250px;
  background-color: #f5f5f5; /* Placeholder barva */
}

@media (max-width: 768px) {
  .ad-container {
    min-height: 100px;
  }
}

U embedů (YouTube, mapy, sociální sítě) funguje stejný princip:

.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
  background-color: #000;
}

Webové fonty — FOUT vs FOIT strategie

Webové fonty mají jiné rozměry než systémové. Když se font načte, text se přeformátuje a může způsobit layout shift.

FOUT (Flash of Unstyled Text): Text se zobrazí systémovým fontem, pak se přepne na webový font.

FOIT (Flash of Invisible Text): Text je neviditelný, dokud se font nenačte.

Obě varianty můžou způsobit CLS. Řešení záleží na vašich prioritách.

Pro minimální CLS — font-display: optional:

@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2') format('woff2');
  font-display: optional;
}

Font se použije pouze pokud je už v cache. Jinak se zobrazí fallback bez přepnutí. Žádný layout shift, ale při prvním načtení uživatel uvidí systémový font.

Pro kompromis — font-display: swap s size-adjust:

@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2') format('woff2');
  font-display: swap;
  size-adjust: 105%; /* Upravte podle vašeho fontu */
}

size-adjust upraví velikost fallback fontu tak, aby odpovídal webovému fontu. Minimalizuje to posun při přepnutí.

Preload kritických fontů:

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

Tím řeknete prohlížeči, aby font stáhl jako prioritu.

Dynamicky vložený obsah — kde ho vkládat

JavaScript často vkládá obsah na stránku po načtení — notifikace, cookie bannery, upozornění na slevy.

Problém:

// Vloží obsah NA ZAČÁTEK stránky
document.body.prepend(notificationElement);

Banner se objeví nahoře, všechno ostatní skočí dolů. Klasický layout shift.

Řešení 1 — fixed nebo sticky pozice:

.notification-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

Fixed prvky nezpůsobují layout shift, protože jsou „nad" obsahem, ne součástí normálního toku dokumentu.

Řešení 2 — vkládejte na konec:

// Vloží obsah NA KONEC viditelné oblasti
document.body.append(notificationElement);

Pokud musí být obsah na konci stránky, jeho vložení nezpůsobí posun viditelného obsahu.

Řešení 3 — rezervujte místo předem:

<div id="notification-placeholder" style="min-height: 60px;">
  </div>

Pokročilé Techniky

Když základní opravy nestačí, je čas na pokročilejší řešení.

Skeleton loading pro obsah s odloženým načítáním (lazy loading)

Skeleton (kostra) je placeholder, který ukazuje strukturu obsahu před jeho načtením. Místo prázdného místa nebo spinneru uživatel vidí obrys budoucího obsahu.

.skeleton {
  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; }
}

.skeleton-card {
  height: 200px;
  border-radius: 8px;
}

Skeleton má přesné rozměry jako budoucí obsah. Když se data načtou, skeleton se nahradí skutečným obsahem bez layout shiftu.

Tuto techniku používá Google, Facebook i Airbnb. Funguje skvěle pro:

• Produktové karty
• Seznamy článků
• Uživatelské profily
• Komentáře

Content-visibility pro dlouhé stránky

CSS vlastnost content-visibility říká prohlížeči, že obsah mimo obrazovku nemusí okamžitě vykreslovat.

.article-section {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px; /* Odhadovaná výška */
}

contain-intrinsic-size je klíčový pro prevenci CLS. Říká prohlížeči, jakou výšku má pro sekci rezervovat, i když ji ještě nevykreslil.

Bez této vlastnosti by prohlížeč přeskočil sekci (výška 0), a když k ní uživatel doscrolluje, všechno by poskočilo.

Použití:

• Dlouhé články
• E-shopy s mnoha produkty
• Nekonečné scrollování

Transform místo top/left pro animace

Animace pomocí top, left, margin nebo padding způsobují layout shift. Prohlížeč musí přepočítat pozici všech okolních prvků.

Špatně:

@keyframes slideIn {
  from { left: -100px; opacity: 0; }
  to { left: 0; opacity: 1; }
}

Správně:

@keyframes slideIn {
  from { transform: translateX(-100px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

transform a opacity jsou „levné" vlastnosti. Prohlížeč je zpracovává na GPU bez přepočtu layoutu.

Toto platí i pro hover efekty:

/* Špatně - způsobuje layout shift */
.button:hover {
  padding: 15px 30px;
}

/* Správně - žádný layout shift */
.button:hover {
  transform: scale(1.05);
}

CLS na Mobilech vs Desktop

Mobilní CLS bývá horší než desktopové. A protože Google používá Mobile-First Indexing, je to problém.

Proč je mobilní CLS často horší

1. Menší obrazovka — stejný posun v pixelech má větší dopad (vyšší Distance Fraction)
2. Pomalejší připojení — obsah se načítá postupně, více příležitostí pro layout shifty
3. Více reklam — mobilní weby často zobrazují jiné (a více) reklamy
4. Touch interakce — nechtěné kliknutí je frustrující víc než na desktopu

Specifické problémy responzivního designu

Problém 1: Obrázky mění aspect ratio

Na desktopu máte obrázek 16

.responsive-image {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

@media (max-width: 768px) {
  .responsive-image {
    aspect-ratio: 4 / 3;
  }
}

Problém 2: Sticky navigace

Sticky header na mobilu může způsobit problémy při scrollování nahoru.

.sticky-nav {
  position: sticky;
  top: 0;
  height: 60px; /* Pevná výška je důležitá */
}

body {
  padding-top: 60px; /* Rezervuje místo pro nav */
}

Problém 3: Skrytý obsah, který se zobrazí

Akordéony, rozbalovací menu, „zobrazit více" — na mobilu jsou častější a můžou způsobit CLS, pokud nejsou správně implementované.

Testování na reálných zařízeních

Emulace v Chrome DevTools nestačí. Reálný telefon má:

• Jiný výkon procesoru
• Skutečné síťové podmínky
• Jiné chování dotykového displeje

Pro testování doporučuji:

1. Fyzický telefon — připojte Android přes USB, zapněte USB debugging
2. Chrome Remote Debugging — chrome://inspect v desktop Chrome
3. BrowserStack nebo LambdaTest — placené služby s reálnými zařízeními

Testujte na střední třídě Android zařízení. To je referenční zařízení pro Google.

Problém — tlačítka velikosti se posouvala

Produktová stránka měla tento problém:

1. Uživatel otevře stránku
2. Načte se základní layout s tlačítky velikostí (S, M, L, XL)
3. Po 1–2 sekundách se načte banner „Doprava zdarma" nad galerií
4. Celá stránka poskočí dolů o 60 pixelů
5. Prst uživatele, který mířil na M, klikne na L

Zákazník si toho ani nevšimne. Objedná. Přijde špatná velikost. Píše reklamaci.

Analýza a diagnostika

V Chrome DevTools jsem použila Performance panel:

1. Nahraná relace ukázala layout shift v čase 1.8s
2. Impact: 0.65 (65 % obrazovky ovlivněno)
3. Distance: 0.12 (posun o 60px při výšce 500px)
4. CLS tohoto shiftu: 0.078

Ale to nebyl jediný problém. Další layout shifty:

• Načtení webfontu: CLS 0.04
• Lazy-loaded recenze: CLS 0.09
• Cookie banner: CLS 0.12

Celkové CLS: 0.37

Řešení a výsledky

Krok 1: Banner s dopravou

Původně:

<div id="shipping-banner"></div>
<script>
  // Banner se vložil po načtení stránky
</script>

Po opravě:

<div id="shipping-banner" style="min-height: 60px;">
  </div>

Banner se nyní vykresluje na serveru. Místo je rezervované vždy.

Krok 2: Webfonty

@font-face {
  font-family: 'BrandFont';
  src: url('brand.woff2') format('woff2');
  font-display: optional;
}

Pro značkový font použili optional. Na prvním načtení zákazník uvidí systémový font, ale žádný layout shift.

Krok 3: Lazy-loaded recenze

.reviews-section {
  min-height: 400px;
  contain: layout;
}

Rezervované místo pro sekci recenzí.

Krok 4: Cookie banner

Přesunutý dolů s position: fixed.

Výsledky po 4 týdnech:

Investice do oprav: jeden den práce vývojáře. Návratnost: stovky korun měsíčně na ušetřených reklamacích a vyšších tržbách.

Checklist: CLS Audit

Použijte tento checklist pro systematický audit vašeho webu:

Obrázky

• Všechny <img> mají width a height atributy
• Nebo používají CSS aspect-ratio
• Obrázky s odloženým načítáním (lazy loading) mají definované rozměry

Reklamy a embedy

• Reklamní kontejnery mají min-height
• YouTube/Vimeo embedy mají aspect-ratio
• Mapy mají pevné rozměry

Fonty

• font-display je nastaveno (swap/optional)
• Kritické fonty jsou preloadované
• Fallback fonty mají podobné rozměry

Dynamický obsah

• Cookie banner používá position: fixed
• Notifikace se vkládají na konec nebo mají rezervované místo
• Akordéony/tabs neposunují okolní obsah

Animace

• Žádné animace přes top/left/margin
• Používáte transform a opacity

Mobilní verze

• Testováno na reálném zařízení
• Responzivní obrázky mají správné aspect ratio
• Sticky navigace má pevnou výšku

Měření

• PageSpeed Insights ukazuje zelené CLS
• Google Search Console nemá CLS problémy
• Web Vitals extension potvrzuje CLS pod 0.1

Závěr

CLS není jen technická metrika. Je to měřítko toho, jak váš web respektuje pozornost uživatele.

Každý layout shift říká zákazníkovi: „Tvůj čas není důležitý. Počkej, až se srovnám." A zákazníci nemají čas čekat.

Za roky v SEO jsem viděla weby ztratit stovky korun kvůli problémům, které šlo opravit za odpoledne. Obrázky bez rozměrů. Reklamy bez rezervovaného místa. Cookie bannery na špatném místě.

Dobrou zprávou je, že CLS se dá opravit systematicky. S nástroji v Chrome DevTools najdete viníky. S technikami v tomto článku je opravíte.

Začněte ještě dnes. Otevřete svůj web, zapněte Layout Shift Regions a podívejte se, co skáče. Možná budete překvapeni.

Potřebujete pomoct s optimalizací CLS?

Nabízím kompletní technický SEO audit, kde zkontroluji Core Web Vitals vašeho webu včetně CLS. Dostanete konkrétní seznam problémů a návod na opravu.

Objednejte si technický audit

Související články

• CLS: Jak zastavit skákání obsahu na webu — základní vysvětlení CLS metriky
• Core Web Vitals: LCP, INP a CLS jednoduše — všechny tři metriky
• PageSpeed Insights: Jak číst metriky a zrychlit web — měření rychlosti
• Technický SEO audit: Kompletní návod — další optimalizace

Často kladené otázky

Jaké CLS je považováno za dobré?

Google považuje CLS pod 0,1 za dobré. Hodnoty mezi 0,1 a 0,25 potřebují zlepšení. Nad 0,25 je špatné a může negativně ovlivnit vaše pozice ve vyhledávání. Ideálně byste měli mířit co nejblíže k nule — každý layout shift je potenciální frustrace pro uživatele.

Počítají se layout shifty po kliknutí uživatele?

Ne, Google měří pouze „neočekávané" (unexpected) layout shifty. Pokud uživatel klikne na tlačítko „Zobrazit více" a obsah se rozbalí, tento posun se do CLS nepočítá. Stejně tak rozbalení menu, odeslání formuláře nebo jakákoliv jiná interakce iniciovaná uživatelem. Počítají se pouze posuny, které nastaly bez přímé akce uživatele — typicky při načítání obsahu.

Proč mi PSI ukazuje jiné CLS než Search Console?

PageSpeed Insights (PSI) kombinuje dva typy dat. Laboratorní data (Lab Data) jsou ze simulovaného testu v momentě, kdy stránku analyzujete. Field Data jsou reálná data od uživatelů za posledních 28 dní. Search Console zobrazuje pouze Field Data. Rozdíl vzniká, protože laboratorní test může minout problémy, které se projeví až při reálném používání — například layout shift způsobený reklamou, která se nenačetla při testu, nebo pomalým připojením uživatelů.

Jak opravit CLS způsobené cookie bannery?

Cookie banner je častý viník CLS, pokud se zobrazuje nahoře stránky. Tři možná řešení: 1) Přesuňte banner dolů — position: fixed; bottom: 0;. Banner se zobrazí nad obsahem, nezpůsobí posun. 2) Rezervujte místo předem — pokud musí být nahoře, přidejte padding-top k body elementu odpovídající výšce banneru. 3) Zobrazujte banner okamžitě — vyhněte se zpožděnému načítání JavaScriptem, renderujte banner na serveru.