Slovník pojmov

Čo je CLS?

CLS je skratka pre kumulatívny posun rozloženia. Meria, ako veľmi sa počas načítania posúva obsah stránky pod rukami návštevníka. Vysoká hodnota znamená, že text a tlačidlá poskakujú, kým sa dočítavajú obrázky, reklamy alebo fonty. Za dobrú sa považuje hodnota do jednej desatiny.

Všetky pojmy Opýtať sa

Vysvetlené po ľudsky.

Predstavte si, že si v čakárni čítate noviny a niekto vám ich každé dve sekundy posunie o pár centimetrov. Nájdete riadok, pokračujete a zrazu ste inde. Na mobile je to horšie: chystáte sa kliknúť na tlačidlo, nad ním sa dočíta obrázok, obsah sa posunie a vy kliknete na niečo úplne iné. Presne to CLS meria a presne preto ľudí hnevá.

Prečo to majiteľa firmy zaujíma.

Poskakujúci web je najrýchlejší spôsob, ako stratiť návštevníka tesne pred cieľom. Najbolestivejšie je to na kontaktnom formulári a pri tlačidle objednávky, kde sa omylom klikne inam a človek to už druhýkrát neskúsi. Príčina býva prozaická: obrázky bez uvedených rozmerov v kóde. Prehliadač nevie, koľko miesta má nechať, tak nechá nula a po načítaní obsah odsunie. Doplnenie šírky a výšky k obrázkom je hodinová práca na celom webe a hodnota sa spraví sama. Rovnaký efekt majú cudzie widgety, ktoré sa vkladajú medzi obsah.

Príklad z praxe.

Web s recenziami vloženými z cudzej služby mal na mobile hodnotu posunu niekoľkonásobne nad odporúčanou hranicou. Blok s recenziami sa načítal až po zvyšku stránky a odsunul obsah aj tlačidlo pre dopyt. Ľudia klikali na tlačidlo a v momente kliknutia sa im pod prstom objavilo niečo iné. Oprava mala dve časti: vyhradiť bloku pevnú výšku ešte pred načítaním a doplniť rozmery ku všetkým obrázkom. Hodnota klesla do zeleného pásma a počet odoslaných dopytov sa zvýšil, hoci návštevnosť zostala rovnaká. Toto je typ chyby, ktorý sa v kancelárii na rýchlom pripojení nikdy neprejaví a na mobile v teréne ho zažije každý druhý návštevník.

Kedy sa tým zaoberať.

Posun rozloženia riešte hneď, ako ho zbadáte, lebo priamo stojí dopyty. Otvorte si web na mobile pri pomalom pripojení a sledujte, či obsah počas načítania poskočí. Ak áno, najčastejšia príčina sú obrázky bez uvedených rozmerov a bloky s cudzím obsahom bez vyhradeného miesta. Oprava je mechanická a zvládne sa za hodiny. Zvláštnu pozornosť venujte lište o súboroch cookie a oznamovacím pruhom, ktoré sa vkladajú nad obsah až po načítaní. Kontrola po zásahu prebehne v Search Console, kde sa zlepšenie prejaví postupne, ako pribúdajú dáta od reálnych návštevníkov. Naostro to overíte na starom telefóne v teréne.

Ako to skontrolujem.

Posun rozloženia uvidíte aj voľným okom, keď viete, čo hľadať.

1Otvorte stránku na mobile pri pomalom pripojení a sledujte, či obsah počas načítania poskočí.

2V teste rýchlosti si pozrite hodnotu posunu rozloženia a zoznam prvkov, ktoré ho spôsobili.

3V kóde skontrolujte, či majú obrázky uvedenú šírku a výšku.

4Overte miesta, kde sa vkladá cudzí obsah, napríklad mapa alebo recenzie. Majú mať vopred vyhradenú výšku.

Časté chyby.

×Obrázky bez rozmerov v kóde, čo je najčastejšia príčina posunov.

×Oznamovací pruh alebo lišta o súboroch cookie vložená nad obsah až po načítaní.

×Vlastný font, ktorý po dočítaní zmení veľkosť textu a posunie celý odsek.

×Reklamné a widgetové bloky bez vyhradeného miesta.

Súvisiace pojmy.

Ďalej v slovníku

Čo je Core Web Vitals · Čo je LCP · Čo je INP · Čo je UX · Čo je lazy loading · Čo je cookie lišta

Čítajte ďalej

Test rýchlosti webu · Bezplatná kontrola webu · Celý slovník pojmov · Tvorba webu · Nástroje · Blog

Časté otázky.

Aká hodnota CLS je v poriadku?

Do jednej desatiny je dobrá, do štvrtiny hraničná, nad štvrtinu zlá. Na rozdiel od ostatných ukazovateľov nejde o čas, ale o bezrozmerné číslo posunu.

Prečo mi web poskakuje len na mobile?

Na mobile je pripojenie pomalšie a obsah je pod sebou, takže každý dodatočne načítaný prvok odsunie všetko pod sebou. Na počítači sa to stratí v šírke.

Dá sa CLS opraviť bez prestavby webu?

Vo väčšine prípadov áno. Doplnenie rozmerov obrázkov a vyhradenie miesta pre vkladané prvky rieši väčšinu posunov a nevyžaduje zásah do dizajnu.

Ako zistím, ktorý prvok posun spôsobuje?

Nástroj na meranie rýchlosti v detaile vypíše prvky s najväčším podielom na posune. Vo vývojárskych nástrojoch prehliadača sa dá posun aj vizuálne zvýrazniť.

Počíta sa posun po kliknutí návštevníka?

Nie. Posuny vyvolané akciou používateľa, napríklad rozbalením otázky, sa nezapočítavajú. Meria sa to, čo sa pohne bez jeho pričinenia.

Potrebujete to vyriešiť na svojom webe?

Robím weby na mieru od 250 €, redizajn od 250 € a e-shop od 590 €. Cenu poviem vopred podľa rozsahu.

Napíšte mi Kontrola webu zadarmo

Súvisiace

Kam sa pozrieť ďalej.