Core Web Vitals: kako meriti i popraviti LCP, INP i CLS na svom sajtu

Google je 2021. godine uveo Core Web Vitals kao zvaničan ranking faktor. Pet godina kasnije, ovi metrici su postali nešto što nijedan ozbiljan sajt ne može da ignoriše. Ako vaš sajt ne prolazi Core Web Vitals proveru, gubite pozicije na Google-u: bez obzira koliko dobar sadržaj imate.

Problem je što većina vlasnika sajtova u Srbiji ne zna šta tačno ovi metrici mere, kako da ih proveri i šta konkretno da uradi da ih popravi. Ovaj vodič pokriva sve to, korak po korak.

Šta su Core Web Vitals i zašto su bitni

Core Web Vitals su skup od tri metrike koje Google koristi da proceni korisničko iskustvo na vašem sajtu. Ne radi se o tehničkim detaljima koji zanimaju samo programere: radi se o tome kako se vaš sajt ponaša iz perspektive posetioca.

Tri metrike su:

• LCP (Largest Contentful Paint): koliko brzo se učitava glavni sadržaj stranice
• INP (Interaction to Next Paint): koliko brzo sajt reaguje na korisničke akcije
• CLS (Cumulative Layout Shift): koliko se sadržaj pomera dok se stranica učitava

Google ove podatke prikuplja iz Chrome browsera stvarnih korisnika (takozvani “field data”). To znači da nije bitno samo kako sajt radi na vašem računaru: bitno je kako radi kod vaših posetilaca, na njihovim uređajima i njihovim internet konekcijama.

Od 2021. godine, Core Web Vitals su deo Page Experience signala koji utiče na rangiranje. Sajtovi koji prolaze sve tri metrike dobijaju prednost u rezultatima pretrage, posebno kada se rangiraju uz konkurente sa sličnim sadržajem.

LCP: Largest Contentful Paint

Šta je LCP

LCP meri vreme koje je potrebno da se najveći vidljivi element na stranici potpuno učita. To je obično hero slika, veliki blok teksta ili video thumbnail. Google smatra da je ovo najbolji pokazatelj toga kada je stranica “gotova sa učitavanjem” iz perspektive korisnika.

Ciljne vrednosti

• Dobro: ispod 2.5 sekunde
• Treba popraviti: između 2.5 i 4 sekunde
• Loše: preko 4 sekunde

Šta najčešće kvari LCP na srpskim sajtovima

Na osnovu analize srpskih sajtova, evo najčešćih problema:

Neoptimizovane slike. Ovo je ubedljivo najčešći uzrok lošeg LCP-a. Sajt servira JPEG sliku od 3 MB za baner koji se prikazuje u 400 piksela širine na mobilnom. Rešenje: koristite moderne formate (WebP ili AVIF), definišite dimenzije slika i implementirajte responsive slike sa srcset atributom.

Spor server response time (TTFB). Mnogi srpski sajtovi koriste jeftin shared hosting koji daje TTFB od 800ms do 2 sekunde. Kada server sam po sebi odgovara sporo, LCP nema šanse da bude dobar. Razmislite o prelasku na bolji hosting ili koristite CDN za statičke resurse.

Render-blocking resursi. CSS i JavaScript fajlovi koji blokiraju renderovanje stranice. Svaki CSS fajl koji browser mora da preuzme i parsira pre nego što prikaže stranicu dodaje vreme na LCP. Koristite <link rel="preload"> za kritične resurse i odložite učitavanje nekritičnog JavaScript-a.

Nedostatak preload direktiva. Ako je vaš LCP element slika, browser mora prvo da preuzme HTML, pa CSS, pa tek onda da otkrije da treba da preuzme sliku. Dodajte <link rel="preload" as="image"> za hero sliku da browser počne da je preuzima odmah.

Kako popraviti LCP

1. Identifikujte LCP element na stranici koristeći Chrome DevTools (Performance tab)
2. Ako je LCP element slika: optimizujte je (format, veličina, kompresija) i dodajte preload
3. Ako je LCP element tekst: proverite da fontovi ne blokiraju renderovanje (koristite font-display: swap)
4. Smanjite TTFB ispod 600ms: bolji hosting, caching, CDN
5. Uklonite ili odložite render-blocking resurse

INP: Interaction to Next Paint

Šta je INP

INP je metrika koja je u martu 2024. zamenila FID (First Input Delay). Dok je FID merio samo prvo korisničko interagovanje, INP meri sve interakcije tokom čitave posete: svaki klik, tap i unos sa tastature. Uzima se vrednost koja je na 98. percentilu, što znači da se meri najgora interakcija (sa izuzetkom ekstremnih outlier-a).

INP meri koliko vremena prođe od trenutka kada korisnik klikne ili tapne na nešto do trenutka kada browser vizuelno reaguje. Ako kliknete na dugme “Dodaj u korpu” i prođe pola sekunde pre nego što se nešto desi na ekranu: to je loš INP.

Ciljne vrednosti

• Dobro: ispod 200 milisekundi
• Treba popraviti: između 200 i 500 milisekundi
• Loše: preko 500 milisekundi

Šta najčešće kvari INP

Teški JavaScript framework-ovi. Sajtovi koji koriste React, Angular ili Vue sa mnogo komponenti i re-renderovanja imaju problem sa INP jer main thread bude zauzet JavaScript-om dok korisnik pokušava da interaguje sa stranicom.

Third-party skripte. Google Analytics, Facebook Pixel, chat widget-i, cookie consent banneri: svaka skripta koja se izvršava na main thread-u može da blokira korisničke interakcije. Srpski sajtovi često imaju 10-15 third-party skripti koje se sve učitavaju istovremeno.

Veliki DOM. Stranice sa hiljadama HTML elemenata zahtevaju više vremena za browser da obradi promene. Ako vaša stranica ima preko 1500 DOM elemenata, svaka interakcija koja menja DOM biće sporija.

Event handler-i bez debounce-a. Scroll listener-i, resize handler-i i input handler-i koji se pozivaju na svaki event bez throttle-ovanja ili debounce-ovanja blokiraju main thread.

Kako popraviti INP

1. Učitavajte third-party skripte asinhrono ili ih odložite: koristite defer ili async atribute
2. Razbijte dugačke JavaScript task-ove na manje delove koristeći requestIdleCallback ili scheduler.yield()
3. Smanjite veličinu DOM-a: izbegavajte duboko ugneždene strukture
4. Koristite content-visibility: auto za sadržaj koji nije odmah vidljiv
5. Prebacite teške kalkulacije u Web Worker-e gde je moguće

CLS: Cumulative Layout Shift

Šta je CLS

CLS meri vizuelnu stabilnost stranice. Svaki put kada se element na stranici pomeri bez da je korisnik to izazvao (klik, scroll), to se računa kao layout shift. CLS je zbir svih tih nepredviđenih pomeranja.

Zamislite da čitate tekst na telefonu i upravo kada krenete da tapnete na link, odjednom se pojavi reklama iznad i link se pomeri: tapnete na pogrešnu stvar. To je primer lošeg CLS-a.

Ciljne vrednosti

• Dobro: ispod 0.1
• Treba popraviti: između 0.1 i 0.25
• Loše: preko 0.25

Šta najčešće uzrokuje CLS

Slike bez definisanih dimenzija. Kada browser ne zna dimenzije slike pre nego što je preuzme, rezerviše 0 piksela prostora. Kada slika stigne, ceo sadržaj ispod nje se pomeri nadole. Uvek stavite width i height atribute na <img> tagove.

Dinamički ubacivan sadržaj. Banneri, reklame i cookie consent barovi koji se ubacuju nakon inicijalnog učitavanja pomeraju postojeći sadržaj. Rezervišite prostor za ove elemente unapred koristeći CSS min-height ili aspect-ratio.

Web fontovi koji uzrokuju FOUT. Kada se custom font učita i zameni sistemski font, tekst može da promeni veličinu i pomeri okolni sadržaj. Koristite font-display: swap i postarajte se da fallback font ima slične metrike.

Sadržaj koji se ubacuje iznad postojećeg sadržaja. Notifikacije, banneri ili elementi koji se ubacuju na vrh stranice guraju sve ostalo nadole. Ako morate da ubacite sadržaj dinamički, radite to ispod vidljivog dela ili koristite overlay koji ne pomera sadržaj.

Kako popraviti CLS

1. Definišite width i height za sve slike i video elemente
2. Koristite aspect-ratio CSS property za responsive elemente
3. Rezervišite prostor za reklame i dinamički sadržaj sa min-height
4. Učitavajte fontove sa font-display: swap i koristite size-adjust za fallback fontove
5. Nikada ne ubacujte sadržaj iznad postojećeg vidljivog sadržaja bez korisničke akcije

Kako meriti Core Web Vitals

Postoji više alata za merenje, a svaki ima svoju namenu.

PageSpeed Insights

Otvorite pagespeed.web.dev i unesite URL stranice. Dobićete i lab podatke (simulacija) i field podatke (stvarni korisnici). Field podaci su ono što Google koristi za ranking, ali su dostupni samo za sajtove sa dovoljno saobraćaja. Za manje srpske sajtove, lab podaci su jedino što ćete imati: koristite ih kao orijentir.

Google Search Console

U Search Console-u idite na “Core Web Vitals” izveštaj u levom meniju. Ovde vidite agregirane podatke za ceo sajt, podeljene na mobile i desktop. Search Console grupiše stranice u tri kategorije: dobro, treba popraviti i loše. Ovo je najbolji alat za praćenje napretka jer prikazuje trendove tokom vremena.

Chrome DevTools

Otvorite DevTools (F12), idite na Performance tab i snimite učitavanje stranice. Ovde možete tačno videti koji element je LCP, koji task blokira INP i koji elementi uzrokuju layout shift. Za detaljan debugging, ovo je nezamenjiv alat.

Chrome UX Report (CrUX)

Ovo je izvor field podataka koje Google koristi. Možete pristupiti preko BigQuery-ja ili CrUX Dashboard-a. Podaci se ažuriraju mesečno i pokrivaju prethodnih 28 dana. Za srpske sajtove sa manje saobraćaja, CrUX podaci možda neće biti dostupni.

Web Vitals Chrome ekstenzija

Instalirajte Web Vitals ekstenziju za Chrome. Prikazuje LCP, INP i CLS u realnom vremenu dok pretražujete sajt. Korisno za brzu proveru tokom razvoja.

Konkretni koraci za WordPress sajtove

WordPress pokreće većinu sajtova u Srbiji, a nažalost je i najčešći izvor loših Core Web Vitals rezultata.

Optimizacija LCP-a na WordPress-u

• Koristite plugin za optimizaciju slika (Imagify, ShortPixel ili EWWW) koji automatski konvertuje u WebP
• Instalirajte caching plugin (WP Rocket, LiteSpeed Cache ili W3 Total Cache) koji generiše statički HTML
• Uključite lazy loading za slike, ali isključite ga za hero sliku (above-the-fold)
• Razmislite o CDN-u: Bunny CDN ili Cloudflare imaju servere blizu Srbije

Optimizacija INP-a na WordPress-u

• Smanjite broj aktivnih plugin-ova na minimum: svaki plugin dodaje JavaScript
• Odložite učitavanje nekritičnih skripti (koristite WP Rocket-ovu “Delay JavaScript” opciju)
• Izbegavajte page builder-e koji generišu tone JavaScript-a (Elementor, Divi): razmislite o lakšim alternativama kao što je Kadence ili GeneratePress
• Uklonite ili zamenite teške slider plugin-ove

Optimizacija CLS-a na WordPress-u

• Definišite dimenzije za sve slike u Media Library-ju
• Koristite temu koja pravilno rukuje fontovima
• Ako koristite reklame, definišite fiksne dimenzije za ad slot-ove
• Proverite da cookie consent plugin ne pomera sadržaj stranice

Konkretni koraci za Astro sajtove

Astro je dizajniran za performanse, ali i tu postoje stvari koje treba proveriti.

LCP na Astro sajtovima

• Koristite Astro-ov ugrađen Image komponentu (astro:assets) koja automatski generiše optimizovane formate (AVIF, WebP)
• Dodajte loading="eager" i fetchpriority="high" na hero sliku
• Iskoristite prednost statičkog generisanja: svaka stranica je pre-renderovan HTML bez server-side obrade

INP na Astro sajtovima

• Astro po default-u ne šalje JavaScript klijentu, što automatski daje odličan INP
• Ako koristite interactive islands (React, Svelte komponente), koristite client:visible ili client:idle umesto client:load
• Third-party skripte učitavajte sa is:inline i ručno kontrolišite kada se izvršavaju

CLS na Astro sajtovima

• Image komponenta automatski dodaje width i height atribute
• Za custom fontove, koristite font-display: swap u CSS-u i preload-ujte font fajlove
• Ako dinamički učitavate sadržaj (npr. komentare), rezervišite prostor u layout-u

Realne vrednosti koje treba dostići

Nemojte juriti savršene rezultate. Evo realnih ciljeva za srpske sajtove:

Minimalni ciljevi (da prođete Core Web Vitals proveru)

• LCP: ispod 2.5 sekunde na mobilnom
• INP: ispod 200 milisekundi
• CLS: ispod 0.1

Dobri ciljevi (konkurentna prednost)

• LCP: ispod 1.5 sekunde na mobilnom
• INP: ispod 100 milisekundi
• CLS: ispod 0.05

Kontekst za srpsko tržište

Prosečan mobilni internet u Srbiji je dovoljno brz za dobre rezultate, ali mnogi korisnici i dalje koriste starije Android uređaje sa slabijim procesorima. To znači da je INP često veći problem nego LCP: sajt se brzo učita, ali sporo reaguje jer telefon ne može da izvrši sav JavaScript dovoljno brzo.

Takođe, mnogi srpski sajtovi koriste hosting u inostranstvu (najčešće Nemačka ili Holandija). TTFB od 200-400ms za korisnike u Srbiji je normalan sa takvim hostingom. Ako koristite CDN sa edge serverom u Srbiji ili okolnim zemljama, možete spustiti TTFB ispod 100ms.

Prioriteti za optimizaciju

Ako ne znate odakle da počnete, evo redosleda:

1. Slike: optimizujte format, veličinu i učitavanje. Ovo rešava 60-70% LCP i CLS problema na većini sajtova
2. Caching: instalirajte caching plugin (WordPress) ili koristite statičko generisanje (Astro). Dramatično smanjuje TTFB
3. Third-party skripte: odložite sve što nije kritično. Ovo najviše pomaže INP-u
4. Dimenzije elemenata: definišite width/height za slike, video i reklame. Rešava CLS
5. Font učitavanje: pravilno rukujte web fontovima da ne blokiraju renderovanje i ne uzrokuju layout shift

Core Web Vitals nisu jednokratan posao. Svaki novi plugin, svaka nova skripta i svaka promena na sajtu može da pokvari rezultate. Redovno proveravajte Search Console izveštaj i reagujte čim primetite degradaciju.

Povezani članci

Tehnički SEO5. april 2026.

Programatic SEO: Kako Optimizovati Velike Kataloge Proizvoda

Tehnički SEO5. april 2026.

Site Migration SEO: Kako Premestiti Saht Bez Gubitka Rangiranja

Tehnički SEO3. april 2026.

CRO i SEO Integracija: Kako Optimizacija Konverzija Utiče na Rangiranje