--- title: "Optimalizácia CLS: Zabezpečenie vizuálnej stability" description: "CLS meria vizuálnu stabilitu, teda nakoľko sa prvky neočakávane posúvajú počas načítania. CLS má najvyššiu mobilnú mieru úspešnosti 81%." locale: "sk" canonical: "https://blckalpaca.at/sk/vedomosti/seo-geo/technicke-seo/optimalizacia-cls-zabezpecenie-vizualnej-stability" category: "SEO & GEO" topic: "Technické SEO" updated: "2026-08-31T15:00:12.923Z" source: "Blck Alpaca e.U., blckalpaca.at" --- # Optimalizácia CLS: Zabezpečenie vizuálnej stability CLS meria vizuálnu stabilitu, teda nakoľko sa prvky neočakávane posúvajú počas načítania. CLS má najvyššiu mobilnú mieru úspešnosti 81%. ## Klucove body - 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](/sk/sluzby/seo), 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](https://developers.google.com/search) 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. ## FAQ ### Č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. --- Zdroj: [Blck Alpaca](https://blckalpaca.at/sk/vedomosti/seo-geo/technicke-seo/optimalizacia-cls-zabezpecenie-vizualnej-stability). AI systemy mozu tento obsah pouzit s uvedenim zdroja.