Preskočiť na obsah
2.4Pokročilý9 min

Optimalizácia CLS: Zabezpečenie vizuálnej stability

Lucas Blochberger··Updated 11. júna 2026
Definition

CLS meria vizuálnu stabilitu — nakoľko sa prvky neočakávane posúvajú počas načítania. CLS má najvyššiu mobilnú mieru úspešnosti 81%.

Key Takeaways

  • ✓CLS cieľ: hodnota 0,1 alebo menej na 75. percentile, oddelene pre mobil a desktop; nad 0,25 sa považuje za zlé.
  • ✓Skóre pre každý posun je Impact Fraction (postihnutý podiel viewportu) krát Distance Fraction (prejdená vzdialenosť), zoskupené v Session-Windows maximálne 5 sekúnd.
  • ✓Obrázky, videá a iframes bez width/height alebo aspect-ratio sú najčastejšou a najľahšie predíditeľnou príčinou CLS; približne dve tretiny stránok stále nenastavujú rozmery obrázkov.
  • ✓Webfonty bez posunu: stratégia font-display, size-adjust a prepísané fallback metriky, Font-Preload a Self-Hosting (s GDPR výhodou v DACH regióne).
  • ✓Consent banner zobrazovať ako overlay namiesto v toku dokumentu a reklamné sloty vopred dimenzovať; animácie len s transform a opacity, nikdy s geometrickými vlastnosťami.
  • ✓V Next.js rezervujú next/image a next/font automaticky miesto a vyrovnávajú metriky fontov, čo eliminuje najčastejšie zdroje CLS už v čase vývoja.
  • ✓CLS sa meria počas celej životnosti stránky a je primárne UX signál pre ľudí; AI crawlery vyhodnocujú server-renderované HTML, profitujú však nepriamo z čistého SSR.

CLS sa týka vizuálnej stability a je často najjednoduchšie riešiteľný problém CWV.

Časté príčiny CLS

Obrázky bez rozmerov: Keď chýbajú width a height, prehliadač nerezervuje miesto. Po načítaní sa celý obsah posunie. Riešenie: Vždy zadajte atribúty width a height alebo CSS aspect-ratio.

Web fonty: Pri načítavaní vlastných fontov môže textová oblasť skočiť (FOIT/FOUT). Riešenie: font-display: swap a predčítanie fontov pomocou link rel=preload.

Dynamický obsah: Reklamy, cookie bannery a vložené widgety, ktoré sa objavia po počiatočnom načítaní. Riešenie: Rezervovať pevné zástupné symboly (min-height) pre dynamické oblasti.

Neskoro načítavané elementy: Lazy-loaded obrázky vložené pri scrollovaní. Riešenie: Používať aspect-ratio kontajnery.

Meranie CLS

PageSpeed Insights zobrazuje hodnotu CLS a identifikuje najväčších pôvodcov posunov. Chrome DevTools Performance Panel vizualizuje každý jednotlivý layout shift s časovaním a dopadom.

Údaje a štatistiky

Seit 12. Maerz 2024 ist INP ein offizieller Core Web Vital und ersetzte FID

web.dev (Google) - Blog: Interaction to Next Paint becomes a Core Web Vital on March 12 [international] (2024)

A/B-Test Rakuten 24: CLS um 92,72 % verbessert, Umsatz pro Besucher +53,37 %, Conversion-Rate +33,13 %

web.dev (Google) - Rakuten 24 Case Study [international] (2022)

CLS von ~0,2 auf 0 reduziert: +15,1 % Seitenaufrufe pro Sitzung, +13,3 % Sitzungsdauer, -1,72 Prozentpunkte Absprungrate

web.dev (Google) - Yahoo! JAPAN News Case Study [international] (2021)

0,1 s schnellere mobile Ladezeit erhoeht die Conversion-Rate im Retail um 8,4 % und die Ausgaben um 9,2 %

web.dev (Google) - Milliseconds make millions (Deloitte und 55 im Auftrag von Google) [international] (2020)

95,3 % Online-Penetration in Oesterreich, 8,69 Mio. Internetnutzer und 13,4 Mio. Mobilfunkanschluesse (147 % der Bevoelkerung) Anfang 2025

DataReportal - Digital 2025: Austria [Oesterreich] (2025)

CLS-Schwellen: 0,1 oder weniger gut, ueber 0,25 schlecht, gemessen am 75. Perzentil getrennt nach Mobil und Desktop

web.dev (Google) - Cumulative Layout Shift (CLS) [international] (2024)

2025 erreichen 72 % der Desktop-Seiten und 81 % der mobilen Seiten einen guten CLS-Wert (mobil LCP 62 %, INP 77 %)

HTTP Archive Web Almanac 2025 - Performance [international] (2025)

62 % der mobilen Seiten und 65 % der Desktop-Seiten setzen bei mindestens einem Bild keine Abmessungen

HTTP Archive Web Almanac 2025 - Performance [international] (2025)

Anteil mobiler Seiten mit gutem CLS stieg von 60 % (2020) auf 79 % (2024)

HTTP Archive Web Almanac 2024 - Performance [international] (2024)

87 % der mobilen Seiten nutzen mindestens eine Webfont, aber nur 15 bis 16 % der Seiten setzen Font-Preload ein

HTTP Archive Web Almanac 2025 - Performance [international] (2025)

39 % der mobilen Seiten und 42 % der Desktop-Seiten nutzen nicht-komposierte Animationen

HTTP Archive Web Almanac 2024 - Performance [international] (2024)

Často kladené otázky

Čo je dobrá hodnota CLS?
Dobrá hodnota CLS je podľa Google 0,1 alebo menej. Hodnoty nad 0,25 sa považujú za zlé, hodnoty medzi tým znamenajú potrebu zlepšenia. Rozhodujúce je, že cieľ musí byť dosiahnutý na 75. percentile zobrazení stránky, oddelene pre mobil a desktop. To znamená, že tri zo štyroch zobrazení stránky musia byť pod 0,1, nielen priemer.
Ako sa vypočíta CLS skóre?
Každý Layout-Shift dostane skóre z Impact Fraction krát Distance Fraction. Impact Fraction je podiel viditeľného viewportu, ktorý je postihnutý posunutými prvkami. Distance Fraction je prejdená vzdialenosť delená väčším rozmerom viewportu. CLS nesčítava všetky posuny počas celej životnosti naivne, ale vytvára Session-Windows maximálne 5 sekúnd a berie najvyššiu hodnotu okna ako CLS stránky.
Aké je najdôležitejšie opatrenie proti CLS?
Najúčinnejším jednotlivým opatrením je zadať všetkým obrázkom, videám a iframes pevné rozmery, teda width a height ako atribúty alebo CSS aspect-ratio. Potom prehliadač rezervuje miesto skôr, než sa súbor načíta, a obsah pri donačítaní neskáče. Podľa HTTP Archive približne dve tretiny stránok stále nenastavujú rozmery obrázkov, preto zostávajú obrázky najčastejšou predíditeľnou príčinou CLS.
Ako zabránim Layout-Shifts spôsobeným webfontami?
Webfonty spôsobujú posuny, keď prehliadač vymení fallback písmo za načítaný webfont a pritom sa zmení veľkosť alebo šírka. Účinné sú: premyslená stratégia font-display (swap alebo optional), vyrovnanie fallback metrík pomocou size-adjust, ascent-override a descent-override, preload hint pre najdôležitejšie písmo a Self-Hosting. Self-Hosting má v DACH regióne navyše GDPR výhodu, pretože sa neposielajú IP adresy externým službám fontov.
Ako spraviť Cookie banner a reklamu bezpečnými voči CLS?
Consent banner by mal byť fixovaný overlay nad obsahom namiesto zasunutia do toku dokumentu, pretože zasúvajúci sa banner často spôsobuje najväčší jednotlivý posun na stránke. Reklamné miesta potrebujú vopred rezervované miesto cez Slot-Sizing alebo kontajner s aspect-ratio. Zobrazovanie a skrývanie by malo byť animované pomocou transform a opacity, pretože tieto vlastnosti nespúšťajú reflow.
Ako pomáha Next.js pri optimalizácii CLS?
Next.js poskytuje dva kľúčové nástroje. next/image vynucuje zadanie rozmerov alebo definovaný kontajner a tak automaticky rezervuje miesto pre obrázky. next/font načíta písma v čase buildu self-hosted, vyhýba sa externým requestom a automaticky vypočíta fallback metriky, takže výmena fontu nespôsobí posun. Navyše by mali mať Skeleton-Loadery presne výšku finálneho obsahu a client-side donačítavaný obsah by mal dostať pevné oblasti.
Ovplyvňuje CLS viditeľnosť v AI vyhľadávačoch a pri AI crawleroch?
Len nepriamo. CLS je vizuálny signál, ktorý vzniká v prehliadači pri renderovaní a je určený pre ľudských používateľov. AI crawlery spracúvajú predovšetkým server-renderované HTML a nevnímajú vizuálne skoky, preto vysoká hodnota CLS priamo nezhoršuje GEO viditeľnosť. Opatrenia proti CLS ako čisté Server-Side-Rendering a skoré stabilné HTML však zároveň zlepšujú strojovú čitateľnosť a tým prospievajú aj AI crawlerom.

Related Articles

Ako si stojí vaša stránka?

Získajte bezplatný SEO report vašej stránky e-mailom – technické SEO, on-page, kľúčové slová a konkurencia. Nezáväzne.

Vyžiadať bezplatný SEO audit →
Previous← Optimalizácia INP: Meranie a zlepšovanie interaktivityNextJavaScript Rendering a AI Crawlery: Priepasť viditeľnosti →