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 - od 2021. zvanično, sa godinu-dve 'gracioznog perioda'. Svaki sajt koji nije u zelenoj zoni gubi pozicije, posebno na mobile-u. Profesionalna optimizacija je deo naše usluge web development, ali i sam možeš dosta toga da uradiš.

Šta su Core Web Vitals

Core Web Vitals su 3 specifična metrika koje Google koristi za ocenu UX-a sajta:

• 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

Svaki ima 3 zone: zelenu (dobro), žutu (treba popraviti) i crvenu (loše). Cilj: sva 3 metrika u zelenoj zoni za 75% poseta tvog sajta. Google meri stvarne korisnike (Real User Metrics), ne samo lab testove.

LCP - Largest Contentful Paint

Vreme od učitavanja stranice do trenutka kad se najveći vidljivi element prikaže (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

Šta utiče: veličina hero slike (najveći krivac), spor server, blokirajući JavaScript, render-blocking CSS, neefikasan caching.

Brza pobeda: optimizuj hero sliku - WebP/AVIF format, srcset za responsive verzije, preload tag, fetchpriority='high'. Tipično vraća LCP iz 4.5s u 2.0s.

INP - Interaction to Next Paint

Vreme od korisničkog input-a (klik, kuc) do vizuelne reakcije sajta. Zameno je FID metrik 2024.

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

Šta utiče: težak JavaScript koji 'blokira' main thread, third-party skripte (Tag Manager, Hotjar, chat widget), neoptimizovan event handlers.

Brza pobeda: prevedi sve third-party skripte na 'async' ili 'defer', odloži loading neesencijalnih (chat widget učitaj tek nakon scroll-a).

CLS - Cumulative Layout Shift

Mera koliko se elementi 'skoče' i pomeraju dok se stranica učitava. Iritantno korisniku jer klikne nešto što nije nameravao.

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

Šta utiče: slike bez width/height atributa (browser ne zna koliko mesta da rezerviše), font-i koji se kasnije učitavaju (FOUT), reklame i embedovi koji se ubaju u layout.

Brza pobeda: dodaj width i height na sve <img> tagove, koristi font-display: optional, rezerviši mesto za reklame pre nego što se učitaju.

Kako meriti

Tri besplatna alata koja koristim svakodnevno:

1. PageSpeed Insights (pagespeed.web.dev) - daje sve 3 metrika za bilo koji URL, lab i field podaci
2. Google Search Console > Core Web Vitals - vidiš stvarne metrike za sve stranice tvog sajta
3. Chrome DevTools > Lighthouse - lokalni test, dobar za debug-ovanje pojedinačne stranice

Pravilo: meri pre i posle svake izmene. Bez merenja, optimizacija je nagađanje.

Praktična optimizacija - šta prvo

Prioritet po impact-u na većinu sajtova:

1. Kompresuj sve slike u WebP/AVIF format (smanjuje 60-80% veličinu)
2. Aktiviraj browser caching i CDN (Cloudflare ima besplatan plan)
3. Ukloni nepotrebne plugin-ove (svaki dodatni JS = sporiji sajt)
4. Lazy-load slike i iframe-ove ispod fold-a
5. Optimizuj font-ove (preload glavne, font-display: swap)
6. Minimiziraj CSS i JavaScript (auto-radi modern build tools)
7. Server response time - razmotri bolji hosting (Cloudways, Kinsta) ako si ispod 600ms

Realna procena: prosečan WordPress sajt sa lošim hostingom i nekompresovanim slikama može da se optimizuje za nedelju dana - od PageSpeed score 30 do 85+.

Trebaš performance audit i optimizaciju? Pogledaj usluga web development ili kontaktiraj nas - dajemo besplatan PageSpeed audit i preporuke za poboljšanja.