Sadržaj
- Što je CLS (Cumulative Layout Shift)?
- Zašto je CLS važan za SEO?
- Najčešći uzroci visokog CLS-a
- Kako smanjiti CLS: sve što trebate znati
- 1. Dodajte visinu i širinu slikama i videima
- 2. Izbjegavajte lazy-load za hero slike
- 3. Rezervirajte prostor za oglase i iframeove
- 4. Nemojte ubacivati nove elemente iznad sadržaja
- 5. Koristite font-display: swap
- 6. Koristite transformacije umjesto layout promjena
- 7. Pregledajte CLS u Chrome DevToolsima
- Zaključak
Što je CLS (Cumulative Layout Shift)?
CLS (Cumulative Layout Shift) je jedna od tri metrike koje čine Googleove Core Web Vitals — skup pokazatelja koji mjere korisničko iskustvo na web stranici. CLS mjeri vizualnu stabilnost — odnosno koliko se sadržaj neočekivano pomiče dok se stranica učitava.
Primjer: Klikate na neki link, ali se u tom trenu učita oglas i sve se pomakne, pa umjesto linka kliknete na nešto drugo. To je loše korisničko iskustvo i CLS ga mjeri.
Zašto je CLS važan za SEO?
Od svibnja 2021. Google koristi Core Web Vitals kao faktor rangiranja. Ako vaša stranica ima loš CLS, može imati negativan utjecaj na poziciju u rezultatima pretraživanja.
Dobar CLS rezultat: manje od 0.1
Prihvatljiv: 0.1 – 0.25
Loš CLS: veći od 0.25
Najčešći uzroci visokog CLS-a
Dinamično učitavanje sadržaja bez rezerviranog prostora (npr. oglasi, pop-upovi)
Lazy-loading slika i videa bez placeholdera
Web fontovi koji uzrokuju „flash of invisible text” (FOIT)
Ubacivanje elemenata pomoću JavaScripta
Promjene u layoutu zbog CSS-a
Kako smanjiti CLS: sve što trebate znati
1. Dodajte visinu i širinu slikama i videima
Uvijek definirajte width i height atribut za slike u HTML-u ili koristite aspect-ratio u CSS-u.
Primjer koda: <img src=”slika.jpg” width=”600″ height=”400″ alt=”Opis slike”>
Na taj način browser rezervira prostor i ne pomiče sadržaj pri učitavanju slike.
2. Izbjegavajte lazy-load za hero slike
Hero slike (glavne slike pri vrhu stranice) ne bi trebale biti “lazy-loaded” jer se one ionako odmah učitavaju. Lazy loading može uzrokovati kratki skok kad se slika naknadno učita.
✅ Rješenje: Isključite lazy-load za prve 1–2 slike na stranici.
3. Rezervirajte prostor za oglase i iframeove
Oglasi su jedan od najčešćih uzroka lošeg CLS-a. Ako se oglas učita naknadno bez zadanih dimenzija, sve se pomiče.
Koristite min-height ili aspect-ratio:
CSS kod:
.ad-slot {
min-height: 250px;
}
Isto vrijedi za YouTube iframeove, Google Maps embedove i sl.
4. Nemojte ubacivati nove elemente iznad sadržaja
Ako JavaScript naknadno dodaje bannere, trake s obavijestima (cookie bar), itd., ubacujte ih ispod već vidljivog sadržaja ili rezervirajte prostor.
5. Koristite font-display: swap
Web fontovi često uzrokuju „Flash of invisible text“. Da to izbjegnete, u CSS font definiciju dodajte:
@font-face {
font-family: ‘Poppins’;
src: url(‘poppins.woff2’) format(‘woff2’);
font-display: swap;
}
Time browser prvo prikaže fallback font, a kad se vaš font učita, zamijeni ga bez pomicanja layouta.
6. Koristite transformacije umjesto layout promjena
Ako koristite animacije, izbjegavajte promjene dimenzija ili pozicija elemenata koje mijenjaju layout. Koristite transform:
❌ Loše:
.element {
top: 100px;
}
✅ Dobro:
.element {
transform: translateY(100px);
}
7. Pregledajte CLS u Chrome DevToolsima
U Chromeu otvorite DevTools (F12), idite na Performance → snimite učitavanje stranice. Možete vidjeti točno koje elemente uzrokuju pomicanje i koliko pridonose CLS-u.
Zaključak
CLS je jedna od najvažnijih metrika kad govorimo o iskustvu korisnika i SEO-u. Male promjene u kodu i dizajnu mogu značajno poboljšati rezultat i korisnički doživljaj.
📌 Sažetak koraka za smanjenje CLS-a:
Definirajte dimenzije slika i videa
Izbjegavajte lazy-load za ključne slike
Rezervirajte prostor za oglase i iframeove
Spriječite iznenadne promjene layouta
Koristite
font-display: swapProvjeravajte rezultate u DevToolsima
🎯 Bonus savjet
Ako koristiš WordPress, razmisli o pluginovima poput:
Perfmatters
FlyingPress
WP Rocket
Svi oni nude opcije za rješavanje CLS problema bez potrebe za kodiranjem.
