Core Web Vitals – Vodič za Početnike

Core Web Vitals su skup metrika koje Google koristi za mjerenje korisničkog iskustva na web stranicama. Obuhvaćaju brzinu učitavanja (LCP), responzivnost (INP) i vizualnu stabilnost (CLS). U ovom vodiču objašnjavamo što je svaka metrika, kako ih mjeriti i kako ih poboljšati.

Što su Core Web Vitals?

Core Web Vitals su tri ključne metrike koje je Google uveo 2020. godine kao dio inicijative za poboljšanje korisničkog iskustva na webu. Od lipnja 2021. godine, Core Web Vitals su službeni faktor rangiranja u Google-ovom algoritmu pretraživanja.

Zamislite ih kao “zdravstveni pregled” vaše web stranice. Kao što liječnik mjeri krvni tlak, puls i temperaturu, tako Google mjeri tri vitalne pokazatelje vašeg weba:

• LCP (Largest Contentful Paint) – Koliko brzo se učitava glavni sadržaj stranice
• INP (Interaction to Next Paint) – Koliko brzo stranica reagira na korisničke akcije
• CLS (Cumulative Layout Shift) – Koliko je stranica vizualno stabilna tijekom učitavanja

Zašto je Google uveo ove metrike? Zato što korisničko iskustvo direktno utječe na poslovne rezultate. Stranice koje se sporo učitavaju imaju veću stopu napuštanja, manje konverzija i niže zadovoljstvo korisnika. Google želi da web bude brz i ugodan za sve.

LCP (Largest Contentful Paint)

LCP mjeri koliko vremena je potrebno da se najveći vidljivi element na stranici u potpunosti učita. To je obično hero slika, veliki blok teksta ili video poster. LCP odgovara na pitanje: “Kada korisnik vidi da se stranica učitala?”

LCP Pragovi

Kako Poboljšati LCP

• Optimizirajte slike – Koristite moderne formate (WebP, AVIF), komprimirajte slike i definirajte dimenzije (width/height)
• Koristite CDN – Content Delivery Network smanjuje udaljenost između servera i korisnika
• Minimizirajte CSS koji blokira render – Inline kritični CSS, a ostatak učitajte asinhrono
• Preload-ajte ključne resurse – Koristite <link rel="preload"> za hero slike i fontove
• Optimizirajte server response time (TTFB) – Koristite server-side caching i brzi hosting

INP (Interaction to Next Paint)

INP (Interaction to Next Paint) mjeri responzivnost stranice na korisničke interakcije – klikove, tapove i pritiske tipki na tipkovnici. INP je u ožujku 2024. službeno zamijenio FID (First Input Delay) kao Core Web Vital metriku.

Dok je FID mjerio samo kašnjenje prve interakcije, INP prati sve interakcije tijekom cijele posjete i uzima najgoru (ili gotovo najgoru) vrijednost. To daje puno realniju sliku stvarnog korisničkog iskustva.

INP Pragovi

Kako Poboljšati INP

• Smanjite JavaScript na main thread-u – Dugački JavaScript zadaci blokiraju browser i sprečavaju obradu korisničkih akcija
• Koristite code splitting – Učitajte samo JavaScript koji je potreban za trenutnu stranicu
• Izbjegavajte dugačke zadatke (Long Tasks) – Podijelite JavaScript na manje dijelove koristeći requestIdleCallback ili scheduler.yield()
• Optimizirajte event handlere – Koristite debounce/throttle za česte događaje poput scroll-a ili resize-a
• Smanjite DOM veličinu – Manji DOM znači brže renderiranje nakon svake interakcije

„INP je najzahtjevnija metrika za optimizaciju jer zahtijeva razumijevanje kako browser procesira JavaScript. Ali upravo zato je i najvrjednija – stranica koja prolazi INP pruža odlično korisničko iskustvo.”

– Petra Hranilović, Jupiter Media

CLS (Cumulative Layout Shift)

CLS mjeri vizualnu stabilnost stranice – koliko se sadržaj pomiče dok se stranica učitava. Jeste li ikada pokušali kliknuti gumb, ali se sadržaj pomaknuo i umjesto toga ste kliknuli nešto drugo? To je upravo ono što CLS detektira.

CLS se izračunava kao umnožak dva faktora: koliki dio viewporta je zahvaćen pomicanjem (impact fraction) i koliko se sadržaj pomaknuo (distance fraction). Rezultat je bezjedični broj – što manji, to bolje.

CLS Pragovi

Kako Poboljšati CLS

• Uvijek definirajte dimenzije slika i videa – Dodajte width i height atribute na sve <img> i <video> elemente
• Rezervirajte prostor za oglase – Koristite CSS min-height za ad slotove kako se sadržaj ne bi pomicao kad se oglas učita
• Koristite font-display: swap – Ili još bolje, preload-ajte fontove da se izbjegne FOUT (Flash of Unstyled Text)
• Izbjegavajte dinamičko ubacivanje sadržaja iznad vidljivog područja – Ako morate dodati sadržaj, koristite CSS contain ili ga dodajte ispod fold-a
• Koristite CSS aspect-ratio – Moderni pristup za rezerviranje prostora za medije: aspect-ratio: 16 / 9

Kako Mjeriti Core Web Vitals?

Postoji više alata za mjerenje Core Web Vitals. Važno je razlikovati lab data (simulirani podaci) i field data (podaci od stvarnih korisnika). Google za rangiranje koristi field data.

Alati za Mjerenje

1. Google PageSpeed Insights – Najjednostavniji alat. Unesite URL i dobijte ocjene za sve tri metrike. Pokazuje i lab i field podatke. Besplatan je i dostupan na pagespeed.web.dev.
2. Google Search Console – Izvještaj “Core Web Vitals” pokazuje performanse svih stranica na vašem webu. Baziran je na field data od stvarnih korisnika i najrelevantniji je za SEO.
3. Chrome DevTools – Performance panel omogućuje detaljnu analizu. Idealan za debugging i identifikaciju specifičnih problema. Otvorite ga s F12 > Performance.
4. web-vitals JavaScript biblioteka – Google-ova open-source biblioteka za mjerenje CWV u produkciji. Možete je integrirati s Google Analyticsom za praćenje stvarnih performansi.
5. Lighthouse – Ugrađen u Chrome DevTools, daje detaljne preporuke za poboljšanje. Koristi lab data, ali pruža korisne dijagnostičke informacije.

Praktični Savjeti za Poboljšanje

Evo konkretnog akcijskog plana za poboljšanje sva tri Core Web Vitals:

Optimizacija Slika

Slike su najčešći uzrok loših CWV rezultata. Evo što napraviti:

• Koristite WebP ili AVIF format – Do 30-50% manje datoteke uz istu kvalitetu
• Implementirajte responsive slike – Koristite srcset atribut za serviranje prave veličine slike za svaki uređaj
• Lazy load-ajte slike ispod fold-a – Koristite loading="lazy" atribut, ali nikada na hero slici
• Preload-ajte LCP sliku – Dodajte <link rel="preload" as="image"> za sliku koja je LCP element

Optimizacija Učitavanja Fontova

• Preconnect na font provider – <link rel="preconnect" href="https://fonts.googleapis.com">
• Koristite font-display: swap – Prikazuje fallback font dok se custom font učitava
• Subsettajte fontove – Učitajte samo znakove koji vam trebaju (npr. latin + hrvatski znakovi)
• Self-host fontove kad je moguće – Eliminira dodatni DNS lookup i connection overhead

Optimizacija JavaScript-a

• Defer-ajte nekritični JavaScript – Koristite defer ili async atribute na script tagovima
• Uklonite nekorišteni JavaScript – Koristite Chrome DevTools Coverage tab za identifikaciju nepotrebnog koda
• Minimizirajte treće strane skripte – Svaki analytics, chat widget ili social plugin usporava stranicu
• Koristite Service Worker za caching – Drastično poboljšava performanse za ponovne posjete

Zaključak

Core Web Vitals nisu samo tehničke metrike – oni su odraz stvarnog korisničkog iskustva na vašem webu. Google ih koristi kao faktor rangiranja, ali važniji razlog za optimizaciju je zadovoljstvo vaših posjetitelja.

Brže stranice imaju niže stope napuštanja, više konverzija i bolje pozicije na Google-u. Počnite s mjerenjem koristeći PageSpeed Insights ili Search Console, identificirajte probleme i rješavajte ih po prioritetu – najčešće su slike i JavaScript glavni krivci.

Zapamtite: cilj nije savršena ocjena, već dovoljno dobra. Ako sva tri vitala prolaze pragove (LCP ≤ 2.5s, INP ≤ 200ms, CLS ≤ 0.1), vaš web je u odličnoj formi. Fokusirajte se zatim na sadržaj i korisničku vrijednost – to je ono što dugoročno donosi rezultate.