Google Core Web Vitals - Šta Su i Zašto Su Važni?

22. Januar 2025Brend and Web Tim11 min čitanja

Od maja 2021. godine, Google koristi Core Web Vitals kao službeni ranking faktor. To znači da brzina i performance vašeg sajta direktno utiču na poziciju u Google rezultatima!

Sajt sa lošim Core Web Vitals može biti 10-20 pozicija niže od konkurencije, bez obzira koliko je sadržaj kvalitetan.

U ovom tehničkom vodiču ćete naučiti:

Šta su LCP, FID i CLS (3 glavne metrike)
Kako ih meriti (alati i tools)
Kako optimizovati svaku metriku (konkretna rešenja)
Before/After case study (realni rezultati)

1. Šta Su Core Web Vitals?

Core Web Vitals su 3 ključne metrike koje mere user experience:

LCP - Largest Contentful Paint

Šta meri: Brzina učitavanja glavnog sadržaja stranice

Cilj: Koliko brzo korisnik vidi glavni content

Good: < 2.5 sekundi

Needs Improvement: 2.5-4 sekunde

Poor: > 4 sekunde

FID - First Input Delay

Šta meri: Responsiveness (koliko brzo sajt reaguje na klik/tap)

Cilj: Sajt se ne "zamrzava" kada korisnik klikne

[GOOD] < 100 milisekundi

[NEEDS IMPROVEMENT] 100-300ms

[POOR] > 300ms

CLS - Cumulative Layout Shift

Šta meri: Visual stability (da li se content "pomera" tokom učitavanja)

Cilj: Spreči slučajne klikove (npr. kliknete dugme, ono se pomeri)

[GOOD] < 0.1

[NEEDS IMPROVEMENT] 0.1-0.25

[POOR] > 0.25

2. Zašto Su Važni?

Impact na Biznis:

Google Ranking: Direktan ranking faktor (maj 2021+)
User Experience: Bolji UX = više konverzija
Bounce Rate: Loš CWV = high bounce rate
Revenue: 1s sporiji LCP = 7% manje konverzija

Real Stats:

Sajt sa Good CWV = 24% manje napuštanja stranice
[+] Optimizacija LCP sa 4s na 2s = +15% konverzija
[+] Fixing CLS = -20% accidental clicks

3. Kako Meriti Core Web Vitals?

️ Tool #1: Google PageSpeed Insights (Najbolji!)

URL: https://pagespeed.web.dev/

Šta dobijate:

LCP, FID (INP), CLS scores
Overall score (0-100)
Konkretni saveti za optimizaciju
Field Data (real user metrics)
Lab Data (simulated test)

️ Tool #2: Google Search Console

Core Web Vitals Report - Vidi sve stranice i njihove scores

Benefit: Prati real user data, ne samo lab test

️ Tool #3: Chrome DevTools

Lighthouse tab - F12 → Lighthouse → Run audit

️ Tool #4: WebPageTest

URL: https://webpagetest.org/

Benefit: Advanced testing (waterfall, filmstrip)

4. Kako Optimizovati LCP (Largest Contentful Paint)?

Cilj: Glavni content se učitava < 2.5s

Uzroci Spornog LCP:

Velike slike (2-5MB)
Spor server response time (TTFB)
Render-blocking resources (CSS/JS)
Client-side rendering (JavaScript frameworks)

Rešenja:

Solution #1: Optimizuj Slike

Konvertuj u WebP format (50-80% manje bez gubitka kvaliteta)
Resize na potrebnu veličinu (ne upload-uj 4000x3000px za 400x300px slot)
Lazy loading za slike ispod fold-a (loading="lazy")
Preload LCP sliku (<link rel="preload" as="image" href="hero.webp">)
Responsive images (<picture> ili srcset)

Target: < 100KB po slici

Solution #2: Improve Server Response Time (TTFB)

Upgrade hosting (shared → VPS → dedicated)
Use CDN (Content Delivery Network) - Cloudflare (free!)
Enable caching (browser cache + server cache)
Optimize database queries
Reduce redirects

Target TTFB: < 600ms

        Solution #3: Eliminate Render-Blocking Resources
        Inline Critical CSS u <head>
Defer non-critical CSS (media="print" onload="this.media='all'")
Defer JavaScript (<script defer>)
Minimize CSS/JS (remove unused code)

      

5. Kako Optimizovati FID (First Input Delay)?

Cilj: Sajt reaguje na klik < 100ms

Uzroci Spornog FID:

Preveliki JavaScript bundle
Long tasks (JavaScript execution blokira UI)
Third-party scripts (Google Analytics, Facebook Pixel)

Rešenja:

        Solution #1: Minimize JavaScript
        Code splitting - Load samo što je potrebno
Tree shaking - Remove unused code
Lazy load non-critical JS
Defer third-party scripts

      

        Solution #2: Break Up Long Tasks
        Use web workers za heavy computations
requestIdleCallback za non-critical work
Split code into smaller chunks

      

        Solution #3: Optimize Third-Party Scripts
        Async/defer third-party scripts
Self-host critical scripts (Google Fonts)
Remove unnecessary scripts
Facade pattern za embeds (YouTube → load on click)

      

Note: Google is replacing FID with INP (Interaction to Next Paint) u 2024. Ista optimizacija!

6. Kako Optimizovati CLS (Cumulative Layout Shift)?

Cilj: Elementi se ne pomeraju tokom učitavanja (CLS < 0.1)

Uzroci CLS-a:

Slike bez width i height atributa
Ads, embeds, iframes bez dimenzija
Dinamički content (FOIT - Flash of Invisible Text)
Web fonts loading (FOUT - Flash of Unstyled Text)

Rešenja:

Solution #1: Set Image Dimensions

Uvek dodaj width i height!

<img src="hero.webp" width="800" height="600" alt="...">

Browser će rezervisati prostor pre nego što se slika učita.

        Solution #2: Reserve Space za Ads/Embeds
        Set min-height na container-e
Aspect ratio boxes za responsive embeds
Static placeholders za dynamic content

      

        Solution #3: Optimize Font Loading
        font-display: swap u @font-face
Preload critical fonts (<link rel="preload" as="font">)
Self-host fonts umesto Google Fonts
Fallback fonts sa sličnim metrics

      

        Solution #4: Avoid Inserting Content Above Fold
        Ne dodaj banners/notifications iznad existing content-a
Ako moraš - animiraj sa transform (ne top)
Reserve space za cookie banners

      