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

Cumulative Layout Shift (CLS) je metrika Core Web Vitals, ktorá meria, ako pokojne alebo nepokojne pôsobí stránka počas načítania a používania. Keď obsah poskočí, pretože sa dodatočne načíta obrázok bez rezervovaného miesta alebo sa vsunie cookie banner, používateľ klikne na nesprávne tlačidlo. CLS kvantifikuje presne túto skúsenosť. Tento článok vysvetľuje, ako sa skóre počíta, aké príčiny majú posuny layoutu, ako stabilizovať obrázky, webfonty, bannery súhlasu a komponenty Next.js a prečo CLS zostáva predovšetkým UX signálom pre ľudských používateľov, zatiaľ čo AI crawlery sa pozerajú hlavne na HTML vykreslené na serveri.

Prečo je vizuálna stabilita pre firmy dôležitá

CLS je od zavedenia Core Web Vitals popri Largest Contentful Paint (LCP) a Interaction to Next Paint (INP) oficiálnym signálom Page Experience. INP je pritom najmladším členom: 12. marca 2024 sa stal metrikou Core Web Vitals a nahradil FID (medzinárodný zdroj, Google). CLS patrí do tejto trojice od začiatku a ako jediná z troch metrík neopisuje rýchlosť ani pohotovosť reakcie, ale vizuálny pokoj stránky.

Obchodný efekt je merateľný. V A/B teste japonského e-shopu Rakuten 24, ktorý zdokumentoval Google, zlepšil optimalizovaný variant hodnotu CLS o 92,72 percenta a zároveň zvýšil tržby na návštevníka o 53,37 percenta a mieru konverzie o 33,13 percenta (medzinárodná prípadová štúdia).

Yahoo! JAPAN News znížil CLS v laboratórnych dátach približne z 0,2 na 0 a následne zaznamenal o 15,1 percenta viac zobrazení stránky na reláciu, o 13,3 percenta dlhšie trvanie relácie a o 1,72 percentuálneho bodu nižšiu mieru odchodov (medzinárodná prípadová štúdia). Takéto efekty zapadajú do širšieho zistenia, že už o 0,1 sekundy rýchlejšie načítanie na mobile zvyšuje mieru konverzie v maloobchode o 8,4 percenta a výdavky o 9,2 percenta (medzinárodný prieskum, Deloitte a 55 na objednávku spoločnosti Google).

Pre rakúsky trh je to relevantné, pretože používanie internetu je takmer úplne mobilné a prepojené. Začiatkom roka 2025 bola online penetrácia v Rakúsku 95,3 percenta s 8,69 milióna používateľov internetu a 13,4 milióna mobilných pripojení, teda 147 percent populácie (Rakúsko). Posuny layoutu sa prejavujú najmä na smartfónoch, kde menšie viewporty a pomalšie pripojenia robia každý skok viditeľnejším.

Ako sa počíta skóre CLS

CLS meria okno relácie s najvyšším súčtom neočakávaných posunov layoutu. Posun layoutu vznikne, keď viditeľný prvok zmení svoju počiatočnú pozíciu medzi dvoma vykreslenými snímkami bez toho, aby to vyvolala interakcia používateľa. Skóre každého posunu sa skladá z dvoch faktorov.

• Impact Fraction: Podiel viditeľného viewportu, ktorý zasahujú posunuté prvky. Ak sa nadol posunie blok, ktorý zaberá hornú polovicu obrazovky, zasiahnutá je veľká časť viewportu.
• Distance Fraction: Vzdialenosť, ktorú prejde najnestabilnejší prvok, vydelená väčším rozmerom viewportu. Opisuje, ako ďaleko obsah poskočí.

Skóre posunu layoutu je súčinom Impact Fraction a Distance Fraction. CLS nesčítava naivne všetky jednotlivé hodnoty počas celej životnosti stránky, ale pracuje s oknami relácie (session windows): posuny sa zoskupujú do okien, jedno okno trvá najviac 5 sekúnd a medzi jednotlivými posunmi smie uplynúť najviac 1 sekunda. Za CLS stránky sa počíta najvyššia hodnota okna. Tým sa zabráni tomu, aby dlhé relácie umelo vytvárali zlé hodnoty.

Prahové hodnoty sú jasne definované. Podľa Googlu by stránky mali dosahovať hodnotu CLS 0,1 alebo menej; hodnoty nad 0,25 sa považujú za zlé, merané na 75. percentile zobrazení stránky oddelene pre mobil a desktop (medzinárodný zdroj, Google). Hodnoty medzi 0,1 a 0,25 znamenajú potrebu zlepšenia. Meranie na 75. percentile znamená, že cieľ musia dosiahnuť tri zo štyroch zobrazení stránky, nielen priemer.

Na mobilných zariadeniach dopadá CLS spomedzi troch Core Web Vitals najlepšie. Podľa HTTP Archive Web Almanac dosahuje v roku 2025 dobrú hodnotu CLS 72 percent desktopových stránok a 81 percent mobilných stránok (medzinárodný prieskum), zatiaľ čo na mobile dosahuje dobré LCP len 62 percent a dobré INP 77 percent stránok. Pokrok je zreteľný: podiel mobilných stránok s dobrým CLS vzrástol zo 60 percent v roku 2020 na 79 percent v roku 2024 (medzinárodný prieskum).

Najčastejšie príčiny posunov layoutu

Takmer všetky problémy s CLS sa dajú zredukovať na niekoľko vzorcov. Kto ich pozná, nájde pôvodcov rýchlo.

• Obrázky, videá a prvky iframe bez rozmerov: Bez width a height alebo definovaného pomeru strán pozná prehliadač výšku až po načítaní súboru. Dovtedy prvok nezaberá žiadne miesto, potom odtlačí zvyšok obsahu nadol.
• Dynamicky vkladaný obsah: Reklamy, vložené prvky (embeds), bannery newslettera a najmä dialógy súhlasu sa často objavia až po prvom vykreslení a odsunú existujúci obsah nabok.
• Výmena webfontov (FOUT/FOIT): Prehliadač najprv zobrazí záložné písmo a potom ho vymení za načítaný webfont. Ak sa metriky písma líšia, zmení sa tok textu a obsah sa posunie.
• Neskoro načítané komponenty: Widgety dodatočne načítané na strane klienta, skeleton loadery s nesprávnou výškou alebo obsah, ktorý sa objaví až po hydratácii, posúvajú zvyšok stránky.

Obrázky sú pritom najčastejším pôvodcom, ktorému sa dá zároveň najľahšie predísť. Podľa Web Almanac 2025 62 percent mobilných stránok a 65 percent desktopových stránok má aspoň jeden obrázok bez nastavených rozmerov (medzinárodný prieskum). Väčšina stránok teda necháva prehliadač hádať veľkosť aspoň pri jednom obrázku.

Stabilizácia obrázkov a médií

Najúčinnejším jednotlivým opatrením je oznámiť prehliadaču rozmery každého média vopred. Prehliadač tak rezervuje miesto ešte pred načítaním súboru.

• Nastav width a height ako atribúty: Moderné prehliadače vypočítajú z HTML atribútov width a height pomer strán a nechajú miesto voľné, aj keď sa obrázok cez CSS responzívne škáluje. Toto opatrenie zaberie najrýchlejšie.
• Použi CSS aspect-ratio: Pri kontajneroch, ktorých pomer strán je pevný, ale konkrétne rozmery v pixeloch sa menia, rezervuje aspect-ratio priestor nezávisle od načítaného súboru.
• min-height pre neznámy obsah: Tam, kde konečná výška nie je známa, napríklad pri dodatočne načítaných zoznamoch, zabráni rozumná minimálna výška kolapsu kontajnera.
• Používaj lazy loading správne: Oneskorené načítanie šetrí dátový prenos, nikdy však nesmie prebehnúť bez rezervovaného miesta. Obrázok načítaný cez lazy loading bez rozmerov je jedným z najčastejších zdrojov CLS, pretože vskočí do stránky práve vtedy, keď používateľ scrolluje.

Webfonty bez posunov

Webfonty sú takmer všadeprítomné, a preto predstavujú systematické riziko pre CLS. Podľa Web Almanac 2025 používa 87 percent mobilných stránok aspoň jeden webfont, ale len 15 až 16 percent stránok nasadzuje preload fontov (medzinárodný prieskum). Almanac to výslovne spája s CLS: keď prehliadač vymení záložné písmo za načítaný webfont, zmení sa veľkosť a šírka textu a obsah sa posunie.

• Vyber font-display vedome: Hodnota swap zobrazí text okamžite v záložnom písme a vymení ho neskôr, čím sa vyhne FOIT, môže však spôsobiť posuny FOUT. Hodnota optional po krátkom čase výmenu úplne vynechá a pre stabilitu je často pokojnejšou voľbou.
• Zosúlaď metriky záložného písma: Pomocou size-adjust, ascent-override a descent-override v pravidle @font-face sa dá záložné písmo upraviť tak, aby zaberalo rovnaké miesto ako webfont. Výmena je potom prakticky neviditeľná.
• Kritické fonty načítaj cez preload: Cielený preload hint pre najdôležitejšie písmo ho sprístupní skoro. Vzhľadom na nízke rozšírenie preloadu je to jednoduchý náskok pred konkurenciou.
• Uprednostni self-hosting: Pri fontoch hosťovaných na vlastnom serveri odpadá dodatočné nadväzovanie spojenia s tretími stranami. Písmo je preto k dispozícii skôr a časové okno, v ktorom môže nastať posun, sa skráti. Self-hosting má v regióne DACH navyše výhodu z hľadiska GDPR, pretože sa externým službám s fontmi neprenášajú žiadne IP adresy.

CLS v Next.js a JavaScriptových frameworkoch

Moderné frameworky prinášajú vlastné nástrahy v oblasti CLS, ale aj vhodné nástroje. Rozhodujúce je, aby obsah vykreslený na serveri zachoval svoju konečnú geometriu hneď, ako nastúpi hydratácia.

• Používaj next/image: Komponent vyžaduje zadanie rozmerov alebo fill s definovaným kontajnerom, a tak automaticky rezervuje miesto. Tým odstraňuje najčastejší obrázkový zdroj CLS už počas vývoja.
• Nasaď next/font: next/font pri builde stiahne písma a hosťuje ich na vlastnom serveri, odstráni externé požiadavky a automaticky vypočíta metriky záložného písma, takže výmena fontu nespôsobí posun.
• Stavaj skeleton loadery s presnými rozmermi: Zástupné prvky musia mať presne výšku neskoršieho obsahu. Skeleton, ktorý je menší ako finálny blok, posunie stránku pri výmene rovnako, ako keby tam žiadny zástupný prvok nebol.
• Mysli na SSR, streamovanie a hydratáciu: Renderovanie na serveri a streamovanie doručia stabilné HTML skoro. Problémy vznikajú, keď sa obsah dodatočne načítaný na strane klienta objaví nad už viditeľnými blokmi alebo medzi nimi. Takýto obsah patrí nadol alebo do pevne rezervovaných oblastí.

Bannery súhlasu a reklamy tretích strán bez rizika CLS

V regióne, kde platí GDPR, je dialóg súhlasu prakticky nevyhnutný a patrí k najčastejším pôvodcom CLS, pretože sa objavuje skoro a na výraznom mieste. Reklamné pozície sa správajú podobne, keďže ich veľkosť sa často určí až počas behu stránky.

• Banner ako overlay, nie v toku dokumentu: Dialóg súhlasu, ktorý leží ako fixné prekrytie (overlay) nad obsahom, nič neposúva. Banner, ktorý sa hore vsunie do toku dokumentu a všetko odtlačí nadol, naopak spôsobí veľký posun.
• Vopred urč rozmery reklamných slotov: Pre každú reklamnú pozíciu rezervuj očakávanú výšku cez slot sizing alebo kontajner s aspect-ratio. Ak sa reklama nezobrazí, miesto by sa malo zbaliť kontrolovane a obsah by nemal dodatočne poskočiť.
• transform namiesto vlastností, ktoré menia layout: Animuj zobrazovanie a skrývanie pomocou transform a opacity. Tieto vlastnosti spracúva compositor a na rozdiel od top, left, width alebo height nespúšťajú reflow.

Efektívne animácie a vykresľovanie

Nekomponované animácie sú podceňovaným zdrojom CLS. Podľa Web Almanac 2024 používa 39 percent mobilných stránok a 42 percent desktopových stránok nekomponované animácie (medzinárodný prieskum), ktoré nanovo prepočítavajú štýly aj rozloženie dokumentu a znovu vykresľujú pixely.

• Animuj len transform a opacity: Tieto vlastnosti bežia na GPU a nemenia layout. Animácie geometrických vlastností, ako sú width, height alebo margin, nútia prehliadač k reflow a môžu posúvať susedné prvky.
• Používaj content-visibility cielene: Pri content-visibility: auto prehliadač preskočí vykresľovanie neviditeľných oblastí. V kombinácii s contain-intrinsic-size zostane rezervované miesto zachované, takže keď sa oblasť pri scrollovaní dostane do viewportu, nevznikne posun.
• Využi CSS containment: Vlastnosť contain ohraničí efekty layoutu, štýlov a vykresľovania (paint) jedného prvku. Zmeny vnútri kontajnera sa tak neprejavia na zvyšku stránky.

Meranie CLS: laboratórium verzus terén

CLS sa dá merať na dvoch úrovniach, ktoré sa dopĺňajú a často sa líšia. Laboratórne dáta ukazujú reprodukovateľné hodnoty za kontrolovaných podmienok, terénne dáta ukazujú skutočnú skúsenosť reálnych používateľov.

• Terénne dáta (CrUX): Chrome UX Report zbiera anonymizované reálne dáta a je základom oficiálneho hodnotenia na 75. percentile. Čerpá z neho prehľad Core Web Vitals v Google Search Console aj PageSpeed Insights.
• Laboratórne dáta (Lighthouse): Lighthouse a laboratórna časť PageSpeed Insights simulujú jedno zobrazenie stránky. Sú ideálne na ladenie, zachytávajú však len počiatočné načítanie, nie neskoršie posuny pri interakcii.
• Monitorovanie reálnych používateľov s web-vitals.js: Oficiálna JavaScriptová knižnica meria CLS priamo v prehliadači reálnych používateľov počas celej životnosti stránky a môže hodnoty posielať do analytického systému. Tým uzatvára medzeru medzi laboratóriom a CrUX a zviditeľní aj neskoré posuny.

Najdôležitejší rozdiel: laboratórne dáta zvyčajne merajú len načítanie, CLS však vzniká počas celej životnosti stránky. Stránka môže mať v teste Lighthouse dokonalú hodnotu CLS a v teréne napriek tomu dopadnúť zle, napríklad preto, že sa banner vsunie až po niekoľkých sekundách alebo pri interakcii.

Časté chyby pri optimalizácii CLS

Opakujúce sa vzorce znižujú stabilitu, dá sa im však cielene vyhnúť.

• Sledovať len laboratórne dáta: Kto kontroluje výlučne Lighthouse, prehliadne neskoré posuny spôsobené bannermi súhlasu, reklamami alebo interakciami, ktoré nastávajú len v teréne.
• Doručovať obrázky bez rozmerov: Napriek jednoduchému riešeniu sa to podľa HTTP Archive stále týka väčšiny stránok (62 percent na mobile, 65 percent na desktope).
• Vkladať banner súhlasu do toku dokumentu: Vsúvajúci sa banner často spôsobí najväčší jednotlivý posun na celej stránke.
• Animovať geometrické vlastnosti: Animácie width, height, top alebo left spúšťajú reflow a posúvajú susedné prvky.
• Skeleton loadery s nesprávnou výškou: Zástupný prvok, ktorý nezodpovedá finálnej výške, posunie stránku pri výmene rovnako, ako keby tam žiadny zástupný prvok nebol.

CLS, Page Experience a kontext GEO

CLS je súčasťou Page Experience a pôsobí ako doplnkový signál, nie ako samostatná páka pre ranking. Pri porovnateľnej relevancii môže rozhodnúť lepšia používateľská skúsenosť, preto sa CLS často opisuje ako jazýček na váhach (tie-breaker). V súčinnosti s LCP a INP vzniká úplný obraz vnímanej kvality: LCP meria, ako rýchlo sa zobrazí hlavný obsah, INP, ako pohotovo stránka reaguje, a CLS, ako stabilná zostáva. Na CLS pôsobí aj back/forward cache (bfcache): stránky, ktoré sú pre bfcache vhodné, prehliadač pri navigácii dozadu a dopredu obnoví úplne načítané a bez opätovných posunov layoutu (medzinárodný zdroj, Google). To dodatočne zlepšuje CLS v teréne.

V kontexte AI crawlerov a Generative Engine Optimization (GEO) je dôležité jasné rozlíšenie. CLS je vizuálny signál pre ľudských používateľov, ktorý vzniká v prehliadači počas výpočtu layoutu a pixelov. AI crawlery naopak spracúvajú predovšetkým HTML vykreslené na serveri a jeho sémantickú štruktúru. Vysoká hodnota CLS priamo nezhoršuje viditeľnosť v AI odpovediach, pretože crawler vizuálne skoky nevníma. Súvislosť je nepriama: opatrenia proti CLS, napríklad čisté renderovanie na serveri, skoré stabilné HTML a upustenie od obsahu načítavaného výlučne na strane klienta, zároveň zlepšujú strojovú čitateľnosť pre AI crawlery. CLS tak zostáva predovšetkým UX signálom pre ľudí, zatiaľ čo tá istá technická disciplína prospieva aj viditeľnosti v GEO.

Ďalšie kroky a záver

CLS meria vizuálnu stabilitu stránky a na 75. percentile by mal byť na úrovni 0,1 alebo nižšie. Najväčšia páka je zároveň najjednoduchšia: doručovať obrázky, videá a prvky iframe s rozmermi, pretože sú najčastejším pôvodcom, ktorému sa dá najľahšie predísť. Webfonty patria na vlastný server, so zosúladenými metrikami záložného písma a so stratégiou font-display, bannery súhlasu a reklamy potrebujú rezervované miesto alebo overlay a animácie by mali používať výlučne transform a opacity. V Next.js urobia next/image a next/font veľkú časť tejto práce automaticky.

Zmysluplné ďalšie kroky sú: skontrolovať prehľad Core Web Vitals v Search Console z hľadiska problémov s CLS, nastaviť monitorovanie reálnych používateľov pomocou web-vitals.js na zachytenie neskorých posunov v teréne a systematicky skontrolovať, či majú všetky médiá aj sloty pre súhlas a reklamy rezervované miesto. Keďže obchodné efekty v zdokumentovaných prípadových štúdiách sú značné, optimalizácia CLS sa vypláca priamo v konverziách a tržbách, nezávisle od rankingu.