Brzina sajta i Google ranking - Core Web Vitals objašnjeni

Core Web Vitals su tri specifična metrika brzine i UX-a koje Google direktno koristi za rangiranje sajtova - zvanično od 2021. Sajt koji nije u zelenoj zoni gubi pozicije, posebno na mobilnim uređajima, gde Google primarno i meri. Profesionalna optimizacija je deo naše usluge web developmenta, ali dosta toga možeš i sam da uradiš - ovaj vodič ti pokazuje tačno kako.

Šta su Core Web Vitals

Core Web Vitals su tri metrike kojima Google ocenjuje stvarno korisničko iskustvo na sajtu:

• LCP (Largest Contentful Paint) - koliko brzo se učitava najveći vidljivi element
• INP (Interaction to Next Paint) - koliko brzo sajt reaguje na korisnikovu akciju
• CLS (Cumulative Layout Shift) - koliko se elementi 'pomeraju' tokom učitavanja

Svaka metrika ima tri zone: zelenu (dobro), žutu (treba popraviti) i crvenu (loše). Cilj je da sve tri budu u zelenoj zoni za 75% poseta - Google gleda 75. percentil stvarnih korisnika, ne prosek. Prevedeno: nije dovoljno da sajt leti na tvom novom laptopu preko optičkog interneta, mora da bude brz i na prosečnom telefonu preko mobilne mreže.

Važna razlika koju mnogi propuste: Google rangira na osnovu field podataka - anonimizovanih merenja stvarnih Chrome korisnika u poslednjih 28 dana (CrUX izveštaj) - a ne na osnovu lab testova. Zato PageSpeed score od 95 ne garantuje zelenu zonu, i obrnuto: sajt sa skorom 70 može imati sve tri metrike u zelenom.

Koliko to utiče na ranking? Core Web Vitals nisu presudan faktor - kvalitetan sadržaj i linkovi i dalje nose najviše. Ali kod izjednačene konkurencije brži sajt dobija prednost, a spor sajt gubi posetioce pre nego što uopšte vide sadržaj. U praksi je efekat brzine na konverzije često veći od efekta na sam ranking - i zato se optimizacija isplati dvostruko.

LCP - Largest Contentful Paint

LCP meri vreme od otvaranja stranice do trenutka kad se prikaže najveći vidljivi element - najčešće hero slika ili veliki naslov.

• Zelena zona: ispod 2.5 sekundi
• Žuta zona: 2.5-4.0 sekundi
• Crvena zona: preko 4.0 sekundi

Kako da izmeriš LCP

Ukucaj URL u PageSpeed Insights (pagespeed.web.dev) i pogledaj field podatke na vrhu izveštaja. Zatim u lab delu klikni na LCP metriku - Lighthouse ti pokaže tačno koji element je LCP na toj stranici. To je element koji optimizuješ, ne 'sve slike na sajtu'.

Tipični uzroci i rešenja

• Prevelika hero slika - JPEG od 2 MB na mobilnoj mreži sam pojede 2-3 sekunde. Rešenje: WebP/AVIF format, srcset za responsive verzije, kompresija.
• LCP slika se učitava lazy - lazy-load na hero slici je klasična greška. Rešenje: ukloni loading='lazy' sa LCP elementa, dodaj fetchpriority='high' i preload tag.
• Spor server - ako TTFB (vreme prvog odgovora servera) prelazi 600ms, problem počinje pre nego što se išta prikaže. Rešenje: bolji hosting, caching, CDN.
• Render-blocking CSS i JavaScript - browser čeka da ih obradi pre prikaza. Rešenje: defer za JS, kritični CSS inline.

U praksi, samo optimizacija hero slike i preload često vrate LCP sa preko 4 sekunde na ispod 2.5 - najveći dobitak za najmanje posla.

INP - Interaction to Next Paint

INP meri vreme od korisničke akcije (klik, kucanje, tap) do vizuelne reakcije sajta. Zamenio je stariji FID metrik 2024. godine i stroži je od njega: gleda sve interakcije tokom posete i ocenjuje te po jednoj od najgorih, pa nije dovoljno da samo prva interakcija bude brza.

• Zelena zona: ispod 200ms
• Žuta zona: 200-500ms
• Crvena zona: preko 500ms

Kako da izmeriš INP

INP vidiš u field podacima PageSpeed Insights-a (lab test ga ne meri direktno). Za dublji debug otvori Chrome DevTools > Performance panel, snimi sesiju dok klikćeš po sajtu i potraži duge taskove označene crvenim - to su skripte koje blokiraju main thread i drže sajt 'zamrznutim' dok korisnik čeka reakciju.

Tipični uzroci i rešenja

• Third-party skripte - Tag Manager sa gomilom tagova, Hotjar, chat widgeti, video embedovi. Rešenje: async ili defer na sve, plus redovan audit - izbaci tagove koje niko ne gleda.
• Chat widget i slični dodaci koji se učitavaju odmah. Rešenje: odloži učitavanje do prvog scroll-a ili interakcije - niko ne otvara chat u prvoj sekundi.
• Težak JavaScript na klik - npr. filter proizvoda koji preračunava ceo katalog. Rešenje: razbij posao na manje delove ili ga prebaci u web worker.
• Prevelik DOM - stranice sa hiljadama elemenata, tipično kod page builder-a. Rešenje: jednostavniji template, manje ugnježdenih sekcija.

CLS - Cumulative Layout Shift

CLS meri koliko elementi 'skaču' i pomeraju se dok se stranica učitava. Ovo je metrika koja korisnike najviše iritira: kreneš da klikneš dugme, sadržaj se pomeri i klikneš reklamu. Nema jedinicu u sekundama - to je skor koji kombinuje koliko se elemenata pomerilo i koliko daleko.

• Zelena zona: ispod 0.1
• Žuta zona: 0.1-0.25
• Crvena zona: preko 0.25

Kako da izmeriš CLS

Pored PageSpeed Insights-a, najbrži način da vidiš šta tačno skače je Chrome DevTools > Performance: snimi učitavanje stranice i panel ti označi svaki layout shift zajedno sa elementom koji ga je izazvao. Bitno: testiraj na mobilnom prikazu, jer se CLS na telefonu često ponaša drugačije nego na desktopu.

Tipični uzroci i rešenja

• Slike bez width/height atributa - browser ne zna koliko mesta da rezerviše, pa se sadržaj pomeri kad slika stigne. Rešenje: width i height na svaki img tag.
• Fontovi koji se kasnije učitavaju (FOUT) - tekst se prikaže pa 'preskoči' kad stigne pravi font. Rešenje: preload glavnog fonta i font-display podešavanje.
• Reklame, embedovi i banneri koji se naknadno ubacuju u layout. Rešenje: rezerviši prostor unapred (min-height na kontejneru).
• Cookie notice koji gura sadržaj nadole. Rešenje: prikaži ga kao overlay preko sadržaja, ne kao blok koji pomera stranicu.

Kako meriti - alati i redosled

Tri besplatna alata koja koristimo svakodnevno, i redosled kojim da ih primeniš:

1. PageSpeed Insights - prva provera

Odi na pagespeed.web.dev, ukucaj URL i sačekaj izveštaj. Gornji deo ('Discover what your real users are experiencing') su field podaci - to je ono što Google vidi. Donji deo je lab test sa konkretnim preporukama za popravke. Ako sajt nema dovoljno saobraćaja za field podatke, oslanjaš se na lab test, ali sa rezervom.

2. Google Search Console - pregled celog sajta

U Search Console otvori izveštaj Core Web Vitals (posebno Mobile tab). Umesto stranice po stranice, Console grupiše slične URL-ove i pokaže ti koje grupe su u žutoj ili crvenoj zoni - tako odmah znaš da li problem imaju sve blog stranice ili samo početna. Kad nešto popraviš, klikni 'Validate fix' da Google ponovo proveri.

3. Chrome DevTools - debug pojedinačne stranice

Lighthouse tab za brz lokalni test, Performance panel za detaljnu analizu šta tačno usporava. Ovo je alat za traženje uzroka, ne za ocenu - ocena dolazi iz field podataka.

Zlatno pravilo: izmeri pre svake izmene i posle nje. Bez merenja, optimizacija je nagađanje - a field podaci se osvežavaju tek kroz 28 dana, pa budi strpljiv sa zaključcima.

Praktična optimizacija - šta prvo

Redosled po uticaju na većinu sajtova - kreni od vrha:

1. Kompresuj sve slike u moderne formate (tipično 60-80% manja veličina fajla)
2. Aktiviraj browser caching i CDN (Cloudflare ima besplatan plan koji pokriva većinu manjih sajtova)
3. Ukloni nepotrebne plugin-ove i skripte - svaki dodatni JS znači sporiji sajt
4. Lazy-load slike i iframe-ove ispod fold-a (ali nikad LCP element)
5. Optimizuj fontove - preload glavnog, izbaci varijante koje ne koristiš
6. Minimiziraj CSS i JavaScript (moderni build alati to rade automatski)
7. Server response time - razmotri bolji hosting ako ti TTFB prelazi 600ms

Slike zaslužuju posebnu pažnju jer su najčešći krivac i za LCP i za CLS. Sam izbor formata pravi ogromnu razliku - detaljno smo obradili kada koji koristiti u vodiču o SVG, WebP i AVIF formatima slika.

Realna procena iz prakse: prosečan WordPress sajt sa lošim hostingom i nekompresovanim slikama može da se dovede u red za oko nedelju dana rada - sa PageSpeed skora 30 na 85+. Ako tek biraš platformu, pročitaj i WordPress ili custom sajt - izbor tehnologije direktno određuje koliko brzine uopšte možeš da izvučeš. A pošto Google meri mobilnu verziju sajta, mobile-first pristup je pola posla.

Česta pitanja

Da li mi treba PageSpeed score 100?

Ne. Score 100 je lep za screenshot, ali Google rangira po field podacima, ne po lab skoru. Cilj je zelena zona za sve tri metrike kod stvarnih korisnika - to često postižeš već sa skorom 80-90. Jurenje poslednjih 10 poena obično košta više nego što vredi.

Za koliko se rezultati vide u Google-u?

Field podaci pokrivaju poslednjih 28 dana, pa se pun efekat izmena vidi tek posle mesec dana. U Search Console pokreni 'Validate fix' da ubrzaš ponovnu proveru. Eventualne promene u rankingu dolaze još sporije - računaj na 1-3 meseca.

Koliko košta optimizacija brzine?

Zavisi od stanja sajta. Osnovna optimizacija WordPress sajta (slike, caching, višak plugin-ova) je u Srbiji okvirno 150-400 EUR jednokratno. Dublje intervencije - promena teme, refaktorisanje koda, migracija hostinga - koštaju više, ali su ponekad jedini put do zelene zone. Zato prvo audit, pa tek onda odluka.

Sajt mi je u žutoj zoni - da li je to hitno?

Nije alarm, ali jeste zadatak. Žuta zona znači da deo korisnika ima loše iskustvo i da konkurent sa zelenim metrikama ima prednost. Kreni od najposećenijih stranica - tamo je najveći povraćaj uloženog.

Zaključak

Core Web Vitals nisu misterija: tri metrike, jasne granice, besplatni alati za merenje. Najveći dobici su skoro uvek isti - optimizovane slike, manje skripti, pristojan hosting. Izmeri, popravi najveći problem, pa izmeri ponovo. Brzina je pritom samo jedan deo tehničkog SEO-a - za širu sliku pogledaj našu uslugu SEO optimizacije.

Ako nemaš vremena ili tehničkog znanja da sve ovo sprovedeš sam, tu smo: performance optimizacija sajtova je deo naše svakodnevice, a preko kontakt stranice možeš da zatražiš besplatan PageSpeed audit sa konkretnim preporukama za tvoj sajt.