Core Web Vitals: šta su i kako da ih popravite - Zephyra Studio

Core Web Vitals su tri merljive metrike koje Google koristi da oceni koliko je iskustvo na vašem sajtu stvarno dobro: LCP (koliko brzo se pojavi glavni sadržaj), CLS (koliko se raspored pomera dok se stranica učitava) i INP (koliko brzo sajt reaguje na klik ili dodir). Loš skor ne znači automatski katastrofu za rangiranje, ali je jedan od faktora, i direktno utiče na to da li posetilac ostane ili ode za tri sekunde. Evo šta svaka metrika konkretno meri, tipični uzroci lošeg skora, i šta realno popravlja svaku od njih.

LCP (Largest Contentful Paint): koliko brzo se pojavi glavni sadržaj

LCP meri vreme od trenutka kad posetilac klikne na link do trenutka kad se najveći vidljivi element na ekranu (obično velika slika ili naslov) potpuno učita. Google smatra "dobrim" rezultat ispod 2.5 sekunde. Sve preko 4 sekunde se tretira kao loše.

Najčešći uzroci: neoptimizovane slike (velike fotografije u punoj rezoluciji umesto komprimovanih WebP/AVIF verzija), spor server (hosting koji sporo odgovara na prvi zahtev), i render-blocking resursi (CSS/JavaScript fajlovi koji moraju potpuno da se učitaju pre nego što browser počne da crta stranicu).

• Komprimujte i konvertujte slike u WebP ili AVIF format, i services ih lenjo učitavajte (lazy loading) osim najbitnije slike iznad fold-a
• Koristite CDN (content delivery network) da se sadržaj servira sa servera fizički bliže posetiocu
• Uklonite ili odložite JavaScript koji nije neophodan za prvi prikaz stranice
• Proverite hosting - jeftin deljeni hosting sa presporim odgovorom servera je čest, teško vidljiv uzrok lošeg LCP-a

CLS (Cumulative Layout Shift): koliko se raspored pomera

CLS meri koliko se elementi na stranici neočekivano pomeraju dok se učitava - klasičan primer je kad pokušate da kliknete dugme, a baš u tom trenutku iznad njega iskoči reklama ili slika i vi kliknete pogrešnu stvar. Google smatra "dobrim" rezultat ispod 0.1.

Najčešći uzrok: slike i video bez unapred definisane širine i visine, pa browser ne zna koliko prostora da rezerviše dok se fajl ne učita u potpunosti. Isto važi za reklame, embed-ove i fontove koji se učitavaju sa zakašnjenjem i menjaju veličinu teksta.

• Uvek definišite width i height (ili aspect-ratio) atribute na svakoj slici i video elementu
• Rezervišite prostor za reklame i embed-ove unapred, ne dozvolite da "iskoče" posle učitavanja
• Koristite font-display: optional ili swap pažljivo, i preload-ujte ključne fontove da izbegnete "skok" teksta
• Izbegavajte ubacivanje novog sadržaja iznad postojećeg sadržaja osim kao direktan odgovor na akciju korisnika

INP (Interaction to Next Paint): koliko brzo sajt reaguje

INP meri vreme od klika ili dodira do trenutka kad browser vizuelno odgovori na tu akciju. Zamenio je stariji FID (First Input Delay) metriku 2024. godine jer meri odzivnost tokom CELE posete, ne samo na prvu interakciju. Google smatra "dobrim" rezultat ispod 200 milisekundi.

Najčešći uzrok: previše JavaScript koda koji se izvršava na glavnom thread-u, blokirajući browser da odgovori na akcije korisnika dok ne završi svoj posao. Treći-strani skriptovi (chat widgeti, analitika, reklame) su čest, često zanemaren krivac.

• Podelite veliki JavaScript kod u manje delove (code splitting) da se ne izvršava sve odjednom
• Odložite učitavanje trećih-stranih skriptova (chat, analitika) dok stranica ne postane interaktivna
• Izbegavajte teške operacije (kompleksne proračune, veliki DOM manipulacije) direktno kao odgovor na klik - odložite ih ako mogu da sačekaju

Kako proveriti svoj skor

Google PageSpeed Insights (besplatan, javno dostupan alat) daje i lab podatke (simulirano testiranje) i, ako sajt ima dovoljno saobraćaja, stvarne podatke od pravih posetilaca (Chrome UX Report). Stvarni podaci su pouzdaniji jer lab test meri jedan simuliran uslov, dok stvarni posetioci imaju različite uređaje i internet konekcije.

Search Console takođe ima "Core Web Vitals" izveštaj koji grupiše stranice po tipu i pokazuje koje grupe imaju problem, što je korisnije od provere jedne stranice po jedne kad sajt ima stotine ili hiljade stranica istog tipa.

Izvor

Ključni zaključci

• LCP (brzina učitavanja glavnog sadržaja) najčešće popravljaju komprimovane slike, CDN i uklanjanje nepotrebnog JavaScript-a.
• CLS (pomeranje rasporeda) se skoro uvek rešava definisanjem width/height na slikama i rezervisanjem prostora za reklame/embed-ove.
• INP (brzina reakcije na klik) zahteva manje JavaScript posla na glavnom thread-u, posebno od trećih-stranih skriptova.
• Google PageSpeed Insights i Search Console-ov Core Web Vitals izveštaj su besplatni, dovoljni alati za proveru.
• Stvarni podaci od posetilaca (ako postoje) su pouzdaniji od simuliranog lab testa.

Zaključak

Core Web Vitals nisu jednokratna popravka - nova funkcionalnost ili treći-strani skript mogu ponovo pogoršati skor mesecima posle prve optimizacije. Ako ste proverili svoj sajt i skor je loš, a niste sigurni odakle da počnete popravku, naš ROI kalkulator za redizajn može da vam pokaže konzervativnu procenu koliko bi brži sajt realno mogao da donese, pre nego što investirate u tehnički redizajn.