CLS (Cumulative Layout Shift) mjeri koliko se sadržaj neočekivano pomiče dok se stranica učitava. To je metrika iza svakodnevne frustracije: krenete kliknuti gumb, slika se učita iznad njega i prst pogodi nešto treće.
Pragovi
- Dobro: ispod 0.1
- Treba popraviti: 0.1–0.25
- Loše: iznad 0.25
Od tri Core Web Vitals metrike CLS se najlakše popravlja — uzroci su konkretni i rješavaju se u kodu, bez mijenjanja hostinga.
Što ga uzrokuje
- Slike bez
widthiheightatributa — preglednik ne zna koliko prostora rezervirati - Iframeovi bez dimenzija — YouTube ugradnje i Google karte
- Oglasni i widget blokovi koji se ubacuju naknadno
- Fontovi bez odgovarajućeg fallbacka — tekst preskoči pri zamjeni
- Trake s obavijestima ubačene na vrh nakon učitavanja, tipično baneri za kolačiće
Konkretni popravci
Zadajte dimenzije svakoj slici i iframeu. Za elemente koji se učitavaju kasnije rezervirajte prostor CSS-om unaprijed. Banner za pristanak prikažite kao preklapajući sloj, a ne kao element koji gura sadržaj. Animirajte samo transform i opacity — animiranje širine, visine ili pozicije pomiče cijeli raspored.
Provjera na mobitelu
CLS je gotovo uvijek gori na mobitelu jer je ekran uži, pa svaki pomak izgleda veći. Testirajte mobilnu verziju u PageSpeed Insightsu i pratite responsive prikaz na stvarnom uređaju.
Povezani pojmovi
Core Web Vitals
Googleov set metrika koje mjere brzinu i stabilnost stranice (LCP, INP, CLS). Direktan faktor rangiranja — spora stranica gubi SEO i konverzije.
LCP
Core Web Vitals metrika koja mjeri vrijeme do prikaza najvećeg vidljivog elementa stranice. Dobro je ispod 2.5 sekunde, loše preko 4 sekunde.
INP
Core Web Vitals metrika koja mjeri koliko brzo stranica odgovori na klik ili dodir. Dobro je ispod 200 ms, loše preko 500 ms. Najčešće pada na WordPressu.
Responsive dizajn
Pristup dizajnu gdje se stranica automatski prilagođava veličini ekrana — mobitel, tablet, desktop. Standard u 2026 jer 60%+ prometa je mobilni.