CLS — kako sprečiti da vam sadržaj skače

Poznata frustracija: krenete da kliknete dugme, a stranica u tom trenutku ubaci sliku ili oglas i sve se pomeri — vaš klik odlazi na pogrešno mesto. Tu neprijatnost meri CLS (Cumulative Layout Shift), treća Core Web Vitals metrika. Meri koliko se elementi neočekivano pomeraju tokom učitavanja. Dobar rezultat je ispod 0,1; preko 0,25 se smatra lošim i Google to koristi kao signal za rangiranje.

Zašto sadržaj skače

Glavni uzroci su gotovo uvek isti: slike i video bez zadatih dimenzija, oglasi i embedovi koji se učitavaju kasnije i guraju sadržaj naniže, web fontovi koji zamene sistemski font pa se tekst prelije, i sadržaj ubačen JavaScriptom iznad postojećeg (baneri, obaveštenja o kolačićima). Sve to pomera ono što je korisnik već video.

Kako da sprečite CLS

• Uvek zadajte width i height na slikama i video-ima. Pregledač tada rezerviše prostor unapred i ništa ne skače kada se slika učita. Ovo rešava većinu problema.
• Rezervišite prostor za oglase i embedove. Definišite fiksnu visinu kontejnera pre nego što se reklama učita.
• Koristite font-display: optional ili swap uz preload. Time smanjujete pomeranje teksta kada stigne pravi font.
• Ne ubacujte sadržaj iznad postojećeg. Banere i obaveštenja o kolačićima postavite kao overlay ili na dno, ne tako da guraju sadržaj.
• Za dinamičke elemente koristite transform umesto menjanja visine. Animacije preko transform ne pokreću ponovni raspored stranice.

Najčešća greška

Ubedljivo najčešći krivac su slike bez dimenzija. U modernom HTML-u dovoljno je da postavite atribute width i height (ili aspect-ratio u CSS-u) i pregledač sam izračuna prostor. Mnogi to izostave misleći da responsive dizajn to rešava — ne rešava, jer pregledač ne zna proporcije dok slika ne stigne.

Gde hosting utiče

CLS je pretežno front-end problem, ali brzina isporuke pomaže: ako se slike i fontovi učitaju brzo sa brzog hostinga i CDN-a, prozor u kome sadržaj može da skoči je kraći. Spor server produžava period nestabilnog rasporeda. Ako gradite sajt na kvalitetnom WordPress hostingu, imate dobru osnovu, ali dimenzije slika i rezervisan prostor morate sami postaviti.

Kako da izmerite CLS

PageSpeed Insights prikazuje CLS i, u odeljku dijagnostike, koje elemente pomera. Chrome DevTools ima i vizuelni prikaz pomeranja u Performance panelu, gde tačno vidite šta skače i kada.

Česta pitanja

Koji je dobar CLS? Ispod 0,1 za 75% poseta na mobilnom uređaju.

Da li obaveštenje o kolačićima kvari CLS? Da, ako gura sadržaj naniže. Postavite ga kao overlay koji ne pomera stranicu.