Što je CLS (Cumulative Layout Shift) i kako ga popraviti

Cumulative Layout Shift je metrika koja mjeri koliko vam se sadržaj stranice neočekivano pomiče dok se učitava. Od tri Core Web Vitals metrike obično je najlakša za popraviti, ali i ona koju vlasnici stranica najčešće osjete na vlastitoj koži, jer pomicanje sadržaja izravno smeta korisniku. U ovom članku objašnjavam što CLS točno mjeri, što ga uzrokuje i kako ga smanjiti na WordPress stranicama.

Ako vam prvo treba šira slika svih metrika, objasnio sam ih u članku o Core Web Vitals.

Što je CLS?

CLS (Cumulative Layout Shift, u prijevodu „kumulativno pomicanje rasporeda”) mjeri koliko se vidljivi sadržaj stranice neočekivano pomakne tijekom učitavanja.

Klasičan primjer koji svi poznajemo: čitate tekst, iznad njega se učita slika ili oglas koji nije imao rezervirano mjesto, i cijeli tekst odjednom skoči prema dolje. Ili krenete kliknuti na gumb, u tom se trenutku ubaci novi element, i slučajno kliknete na nešto sasvim drugo. U najgorem slučaju takav pomak natjera korisnika da, recimo otkaže narudžbu koju je kanio napraviti.

Za razliku od ostalih Core Web Vitals metrika, CLS se ne mjeri u sekundama. To je bezdimenzijska vrijednost, izračun koji uzima u obzir koliko se sadržaja pomaknulo i koliko daleko. Pragovi, koje Google mjeri na 75. percentilu posjeta, izgledaju ovako:

Što uzrokuje pomicanje sadržaja

Pomicanje rasporeda elemenata na web stranici u pravilu nastaje kad se resursi učitavaju asinkrono ili kad se elementi dinamički ubacuju u stranicu iznad postojećeg sadržaja. Najčešći uzroci u praksi su sljedeći.

Slike i video bez zadanih dimenzija

Ovo je daleko najčešći uzrok i ujedno onaj koji je najlakše riješiti. Ako slika ili video nemaju zadanu širinu i visinu, preglednik ne zna koliko prostora treba rezervirati za njih dok se učitavaju. Kad podaci stignu, element naraste i sve ispod njega skoči. Isto vrijedi za iframe elemente.

Oglasi, ugrađeni sadržaj i widgeti

Oglasi i ugrađeni sadržaj treće strane čest su uzrok pomicanja jer im se veličina ponekad ne zna unaprijed, nego tek kad se učitaju. Ako za njih nije rezerviran prostor, ubacivanjem guraju ostatak stranice.

Dinamički ubačen sadržaj

Sadržaj koji se ubacuje JavaScriptom nakon početnog učitavanja, recimo obavijest, baner ili element koji se pojavi naknadno, pomiče sve oko sebe ako za njega nije ostavljeno mjesto. Posebno je problematičan kad se ubacuje pri vrhu stranice, jer tada pomakne sve ispod sebe.

Fontovi koji se učitavaju naknadno

Kad se stranica prvo prikaže rezervnim fontom, a zatim se učita web font koji ima drugačiju visinu retka ili širinu znakova, tekst se preslaguje u trenutku kad font postane aktivan. To uzrokuje pomak, pogotovo kod naslova.

Kako smanjiti CLS na WordPress stranicama

Rješenje za CLS je rezervirati prostor unaprijed, da preglednik zna koliko mjesta treba ostaviti prije nego sadržaj uopće stigne. Da bi smanjili CLS na WordPress stranicama rješenje je:

• Slikama i videima uvijek zadati širinu i visinu, ili rezervirati prostor preko CSS svojstva aspect-ratio. Tako preglednik može unaprijed odvojiti točan prostor u dokumentu dok se element učitava. Ovo je mjera s najvećim učinkom jer rješava najčešći uzrok.
• Za oglase, ugrađeni sadržaj i iframe elemente rezervirati mjesto unaprijed, bilo zadanim dimenzijama, bilo praznim kontejnerom s minimalnom visinom.
• Dinamički sadržaj izbjegavajte ubacivati pri vrhu stranice, a kad ga mora biti, rezervirajte mu mjesto preko kontejnera s minimalnom visinom ili skeleton elementom, da se ostatak stranice ne pomiče kad se pojavi.
• Pazite na učitavanje fontova tako da rezervni i web font budu što sličniji po dimenzijama, te koristite odgovarajuće font-display postavke kako bi preslagivanje teksta bilo što manje primjetno.

Jedna napomena oko lijenog učitavanja (lazy-load), jer se često krivo povezuje s CLS-om. Sam po sebi lazy-load nije uzrok pomicanja, jer kvalitetni lazy-loaderi unaprijed pročitaju dimenzije slike i rezerviraju mjesto. Ono na što treba paziti je da se glavna slika na vrhu stranice ne učitava lijeno, ali to je prvenstveno pitanje LCP-a, o čemu pišem u zasebnom tekstu o LCP-u.

Kako izmjeriti CLS

CLS ćete vidjeti u PageSpeed Insightsu, i to u oba odjeljka, terenskom i laboratorijskom. Za rangiranje se računaju terenski podaci stvarnih korisnika. Za pronalaženje konkretnih pomaka tijekom rada koristite Chrome DevTools, koji pokazuje koji su točno elementi uzrokovali pomicanje, pa se zna gdje treba intervenirati. Vrijedi provjeravati i na mobitelu i na desktopu, jer se pomaci znaju razlikovati ovisno o širini ekrana.

Zaključak

CLS mjeri koliko se sadržaj stranice neočekivano pomiče tijekom učitavanja, a cilj je da ta vrijednost bude 0,1 ili niža. Najčešći uzrok su slike i drugi elementi bez zadanih dimenzija, a rješenje je jednostavno: rezervirati prostor unaprijed, zadavanjem širine i visine ili preko aspect-ratio. Ono što ne treba raditi je rješavati CLS sinkronim učitavanjem sadržaja, jer time popravljate jednu metriku, a kvarite drugu.

Ako vam se sadržaj na stranici pomiče tijekom učitavanja, a ne uspijevate pronaći uzrok, kontaktirajte h1 design. Kroz uslugu održavanja i SEO optimizacije mogu utvrditi koji elementi uzrokuju pomicanje i stabilizirati raspored stranice.