Da li Core Web Vitals uticu na Google rangiranje?

Da. Od juna 2021, Core Web Vitals su zvanican faktor rangiranja kroz Page Experience Update. Sajtovi koji prolaze CWV pragove imaju 24% manje napustanja. Google prikazuje CWV status u Search Console i koristi Field data (stvarni korisnici) za evaluaciju.

Koji je najvazniji Core Web Vital?

LCP (Largest Contentful Paint) je najuticajniji jer direktno meri percipiranu brzinu ucitavanja — koliko brzo korisnik vidi glavni sadrzaj. CLS je najcesci problem (slike bez dimenzija, dinamicki oglasi), a INP je najtezi za optimizaciju (zahteva efikasan JavaScript).

Sta je razlika izmedju Field data i Lab data?

Field data (CrUX) dolazi od stvarnih korisnika sa Chrome browser-a — to je ono sto Google koristi za rangiranje. Lab data (Lighthouse) su simulirani testovi u kontrolisanom okruzenju — korisni za debugging ali ne uticu direktno na rang. PageSpeed Insights prikazuje oba.

Sta je INP i zasto je zamenio FID?

INP (Interaction to Next Paint) meri odzivnost na SVE korisnicke interakcije tokom cele posete, dok je FID merio samo PRVU interakciju. INP je bolji pokazatelj jer hvata spore event handlere, tezak JavaScript i blokirajuci main thread. Zamenio je FID u martu 2024.

Core Web Vitals — LCP, CLS, INP vodic

Q: Sta su Core Web Vitals?

Core Web Vitals su 3 Google metrike koje mere korisnicko iskustvo na web stranici: LCP (Largest Contentful Paint) meri brzinu ucitavanja, CLS (Cumulative Layout Shift) meri vizuelnu stabilnost, a INP (Interaction to Next Paint) meri odzivnost na korisnicke akcije. Od 2021. su faktor rangiranja u Google pretrazi.

Kompletni vodic za 3 Google metrike koje direktno uticu na rangiranje i korisnicko iskustvo

Metrike: LCP, CLS, INP

2021

CWV postali faktor rangiranja

24%

Manje napustanja sa dobrim CWV

2024

INP zamenio FID (mart)

1. Sta su Core Web Vitals

Core Web Vitals (CWV) su skup od 3 metrike koje je Google definisao u maju 2020. za merenje korisnickog iskustva na web stranicama. Svaka metrika pokriva kljucni aspekt:

LCP (Largest Contentful Paint) — brzina ucitavanja: koliko brzo korisnik vidi glavni sadrzaj
CLS (Cumulative Layout Shift) — vizuelna stabilnost: koliko se elementi pomeraju tokom ucitavanja
INP (Interaction to Next Paint) — odzivnost: koliko brzo stranica reaguje na klikove i tapove

Od juna 2021, CWV su zvanican faktor rangiranja u Google pretrazi kroz Page Experience Update. Google meri CWV na osnovu stvarnih podataka korisnika (Chrome User Experience Report / CrUX) — ne laboratorijskih testova.

Istorija: Originalno su CWV bili LCP + CLS + FID (First Input Delay). U martu 2024, Google je zamenio FID sa INP jer INP meri SVE interakcije, ne samo prvu.

2. LCP — Largest Contentful Paint

LCP meri koliko vremena treba da se ucita najveci vidljivi element na stranici u viewport-u. To je obicno:

Hero slika ili banner
Veliki blok teksta (H1 naslov + paragraf)
Video poster frame
<img>, <svg>, <video> ili element sa background-image

LCP vrednost	Ocena	Boja
≤ 2.5 sekunde	Dobar	● Zelena
2.5s – 4.0s	Treba poboljsati	● Narandzasta
> 4.0 sekunde	Los	● Crvena

Najcesci uzroci loseg LCP-a

Spor server (TTFB) — ako server odgovara sporo, sve kasni. Cilj: TTFB < 600ms.
Render-blocking resursi — CSS i JS u <head> koji blokiraju renderovanje dok se ne ucitaju.
Velike slike — neoptimizovane hero slike od 2-5MB. Koristite WebP/AVIF + srcset.
Client-side rendering — SPA (React/Vue) koje renderuju sadrzaj tek nakon sto se JS izvrsi.
Web fontovi — FOIT (Flash of Invisible Text) dok se font ucitava. Koristite font-display: swap.

Pro tip: Koristite <link rel="preload"> za hero sliku i kriticni CSS. Ovo govori browseru da pocne da ih ucitava odmah, pre nego sto parser dodje do <img> taga.

3. CLS — Cumulative Layout Shift

CLS meri koliko se vizuelno pomeraju elementi tokom ucitavanja stranice. Svako neocekivano pomeranje frustrira korisnike — kliknete na dugme, ali ono se pomeri i kliknete na nesto drugo.

CLS vrednost	Ocena	Boja
≤ 0.1	Dobar	● Zelena
0.1 – 0.25	Treba poboljsati	● Narandzasta
> 0.25	Los	● Crvena

Kako se racuna CLS

CLS = impact fraction × distance fraction. Impact fraction je procenat viewport-a koji je pogodjen, a distance fraction koliko se element pomerio. Rezultat se akumulira tokom cele posete stranici.

Najcesci uzroci loseg CLS-a

Slike bez width/height — #1 uzrok. Browser ne zna koliko prostora da rezervise dok se slika ucitava.
Dinamicki oglasi — AdSense/display ads koji se ubacuju posle ucitavanja i guraju sadrzaj nadole.
Web fontovi (FOUT) — fallback font zauzima drugaciju sirinu od web fonta, pa se tekst pomeri kad font stigne.
Dinamicki sadrzaj — baneri, notification bar-ovi, cookie consent koji se ubacuju posle ucitavanja.
Iframes bez dimenzija — YouTube embed, Google Maps bez width/height.

<!-- LOSE — nema dimenzije, uzrokuje CLS -->
<img src="hero.jpg" alt="Hero">

<!-- DOBRO — dimenzije rezervisu prostor -->
<img src="hero.jpg" alt="Hero" width="1200" height="630">

<!-- NAJBOLJE — responsive sa rezervisanim prostorom -->
<img src="hero.jpg" alt="Hero" width="1200" height="630"
     style="max-width:100%; height:auto;"
     srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w"
     sizes="(max-width:600px) 400px, (max-width:1000px) 800px, 1200px">

Najcesca greska: Dodavanje width i height atributa u CSS umesto u HTML. Browser treba HTML atribute da rezervise prostor PRE nego sto se CSS ucita.

4. INP — Interaction to Next Paint

INP meri odzivnost stranice na korisnicke interakcije — koliko vremena prodje od klika/tapa do vizuelne reakcije na ekranu. INP je zamenio FID u martu 2024.

INP vrednost	Ocena	Boja
≤ 200ms	Dobar	● Zelena
200ms – 500ms	Treba poboljsati	● Narandzasta
> 500ms	Los	● Crvena

INP vs FID — zasto je INP bolji

Aspekt	FID (zastareo)	INP (aktuelan)
Sta meri	Samo prvu interakciju	SVE interakcije tokom posete
Rezultat	Input delay (samo deo)	Ceo lifecycle: input + processing + paint
Pokriva	~1 interakciju	Desetine/stotine interakcija
Realniji	Ne — stranica moze biti spora posle prvog klika	Da — meri najgoru interakciju (P98)

Najcesci uzroci loseg INP-a

Tezak JavaScript — event handleri koji rade previse posla (DOM manipulacija, kalkulacije)
Long tasks — JS zadaci koji blokiraju main thread duze od 50ms
Third-party skripte — analytics, chat widgets, ad skripte koje blokiraju main thread
Veliki DOM — stranice sa 1500+ DOM elemenata usporavaju interakcije
Layout thrashing — citanje i pisanje DOM-a u petlji (force reflow)

// LOSE — layout thrashing (force reflow u petlji)
for (var i = 0; i < elements.length; i++) {
  var height = elements[i].offsetHeight;  // citanje → force reflow
  elements[i].style.height = height + 10 + 'px';  // pisanje
}

// DOBRO — batch read pa batch write
var heights = [];
for (var i = 0; i < elements.length; i++) {
  heights.push(elements[i].offsetHeight);  // sva citanja
}
for (var i = 0; i < elements.length; i++) {
  elements[i].style.height = heights[i] + 10 + 'px';  // sva pisanja
}

5. Pragovi i ocenjivanje

Google koristi 75. percentil (P75) Field data za ocenjivanje. To znaci: CWV se ocenjuje na osnovu iskustva 75% vasih korisnika — ne proseka, ne najgoreg, vec P75.

Metrika	Dobar	Srednji	Los	P75 znaci
LCP	≤ 2.5s	2.5 – 4s	> 4s	75% korisnika vidi glavni sadrzaj za <2.5s
CLS	≤ 0.1	0.1 – 0.25	> 0.25	75% korisnika ima score <0.1
INP	≤ 200ms	200 – 500ms	> 500ms	75% interakcija je brze od 200ms

Da bi stranica "prosla" CWV: SVE TRI metrike moraju biti u "Dobar" zoni na P75 nivou. Ako je LCP dobar ali CLS los — stranica NE prolazi.

6. Field data vs Lab data

Aspekt	Field data (CrUX)	Lab data (Lighthouse)
Izvor	Stvarni Chrome korisnici	Simulacija u kontrolisanom okruzenju
Google koristi za rang	DA — ovo je sto utice na SEO	NE — samo za debugging
Gde videti	Search Console, PageSpeed Insights (gornji deo)	Lighthouse, PageSpeed Insights (donji deo)
Vreme	Poslednja 28 dana (rolling)	Trenutni snapshot
Metrike	LCP, CLS, INP + TTFB, FCP	LCP, CLS, TBT (zamena za INP), FCP, SI, TTI
Prednosti	Realno iskustvo, razliciti uredjaji/konekcije	Reproducibilno, detaljan waterfall
Mane	Treba dovoljno saobracaja, kasni 28 dana	Ne odrazava stvarne uslove

Vazno: Lighthouse skor 100 NE garantuje dobre CWV u Field data. Vas Lighthouse test koristi brzu masinu i dobru konekciju, ali vasi korisnici su na mobilnom sa 4G. Uvek proverite OBA.

7. CWV i Google rangiranje

Google je potvrdio da CWV uticu na rangiranje, ali sa nijansama:

CWV su "tiebreaker" — pri istoj relevantnosti sadrzaja, sajt sa boljim CWV dobija prednost
Sadrzaj je i dalje #1 — sajt sa odlicnim sadrzajem i losim CWV ce i dalje rangirati bolje od sajta sa dobrim CWV i losim sadrzajem
Page-level, ne site-level — svaka stranica se ocenjuje zasebno
Mobile i desktop odvojeno — mobilni CWV uticu na mobilno rangiranje, desktop na desktop
24% manje napustanja — sajtovi koji prolaze CWV imaju znacajno bolje korisnicke metrike (Google studija)

8. Optimizacija LCP

Preload hero sliku: <link rel="preload" as="image" href="hero.webp">
Koristite WebP/AVIF umesto PNG/JPEG — 25-50% manji fajlovi
Eliminisajte render-blocking CSS: inline kriticni CSS, ostalo async
font-display: swap — prikazite tekst odmah sa fallback fontom
Server-side rendering — za SPA (React/Next.js) koristite SSR ili SSG
CDN — servirajte sadrzaj sa najblizeg servera (CDN vodic)
TTFB < 600ms — optimizujte backend, koristite caching
fetchpriority="high" na hero slici — prioritizujte ucitavanje

<!-- Preload hero slika + fetchpriority -->
<link rel="preload" as="image" href="hero.webp" fetchpriority="high">

<!-- Hero slika sa svim optimizacijama -->
<img src="hero.webp" alt="Hero" width="1200" height="630"
     fetchpriority="high"
     decoding="async"
     srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
     sizes="(max-width:600px) 100vw, (max-width:1000px) 80vw, 1200px">

9. Optimizacija CLS

width + height na svim slikama i video-ima — browser rezervise prostor pre ucitavanja
aspect-ratio CSS — aspect-ratio: 16/9 za responsive kontejnere
Rezervisan prostor za oglase — min-height na ad slot-ovima
font-display: optional — ako CLS od fontova je problem, optional ne menja layout
Izbegavajte dinamicko ubacivanje sadrzaja iznad fold-a
CSS contain: layout — izoluje layout promene unutar elementa
transform animacije umesto width/height/top/left — ne uzrokuju layout shift

/* Rezervisan prostor za reklamu */
.ad-slot {
  min-height: 250px;
  background: #f0f0f0;
  contain: layout;
}

/* Aspect ratio za video embed */
.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}

/* Font koji ne uzrokuje CLS */
@font-face {
  font-family: 'Inter';
  src: url('inter.woff2') format('woff2');
  font-display: swap; /* ili 'optional' za nula CLS */
}

10. Optimizacija INP

Izbegavajte long tasks — razbijte JS zadatke na delove <50ms sa requestIdleCallback ili scheduler.yield()
Debounce/throttle event handlere — scroll, resize, input handleri ne trebaju da se fire svakih 16ms
Web Workers — prebacite teske kalkulacije van main thread-a
Smanjite DOM velicinu — ispod 1500 elemenata, idealno <800
Lazy load third-party skripte — analytics, chat, ads ucitajte posle interakcije
Koristite CSS za animacije umesto JS — CSS animacije ne blokiraju main thread
requestAnimationFrame za vizuelne update-e umesto setTimeout

// Razbijanje long task-a sa scheduler.yield()
async function processLargeList(items) {
  for (let i = 0; i < items.length; i++) {
    processItem(items[i]);
    // Yield main thread svakih 10 stavki
    if (i % 10 === 0 && navigator.scheduling) {
      await navigator.scheduling.yield();
    }
  }
}

// Debounce za input handler
function debounce(fn, ms) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), ms);
  };
}
searchInput.addEventListener('input', debounce(handleSearch, 300));

11. Alati za merenje

Web Security Scanner — proverava TTFB, velicinu stranice, kompresiju, cache, HTTP/2 i lazy loading.
PageSpeed Insights — prikazuje i Field data (CrUX) i Lab data (Lighthouse). Najvazniji alat za CWV.
Google Search Console — Core Web Vitals izvestaj za ceo sajt. Prikazuje koliko URL-ova prolazi/ne prolazi, grupisano po problemu.
Chrome DevTools — Performance tab za detaljnu analizu. Prikazuje Long Tasks, Layout Shifts, LCP element.
web-vitals.js — JavaScript biblioteka za merenje CWV u produkciji. Salje podatke u vasu analitiku.
WebPageTest — napredniji testovi sa razlicitih lokacija, filmstrip, waterfall.
Chrome UX Report (CrUX) — besplatan BigQuery dataset sa Field data za milione sajtova.

<!-- Merenje CWV u produkciji sa web-vitals.js -->
<script type="module">
  import {onLCP, onCLS, onINP} from 'https://unpkg.com/web-vitals@4?module';
  function sendToAnalytics(metric) {
    console.log(metric.name, metric.value, metric.rating);
    // Posaljite u Google Analytics, custom endpoint, itd.
  }
  onLCP(sendToAnalytics);
  onCLS(sendToAnalytics);
  onINP(sendToAnalytics);
</script>

12. Reference i resursi

Proverite performanse vaseg sajta →

Core Web Vitals — LCP, CLS, INP Guide

Complete guide to Google's 3 metrics that directly impact rankings and user experience

Metrics: LCP, CLS, INP

2021

CWV became ranking factor

24%

Less abandonment with good CWV

2024

INP replaced FID (March)

What are Core Web Vitals
LCP — Largest Contentful Paint
CLS — Cumulative Layout Shift
INP — Interaction to Next Paint
Thresholds and scoring
Field data vs Lab data
CWV and Google ranking
Optimizing LCP
Optimizing CLS
Optimizing INP
Measurement tools
References

1. What are Core Web Vitals

Core Web Vitals (CWV) are 3 metrics defined by Google in May 2020 to measure user experience: LCP (loading speed), CLS (visual stability), INP (responsiveness). Since June 2021, they're an official ranking factor.

History: Originally CWV were LCP + CLS + FID. In March 2024, Google replaced FID with INP because INP measures ALL interactions, not just the first one.

2. LCP — Largest Contentful Paint

LCP measures how long it takes for the largest visible element to load: hero image, large text block, video poster.

LCP value	Rating
≤ 2.5s	Good
2.5s – 4.0s	Needs improvement
> 4.0s	Poor

Common causes: slow server (TTFB), render-blocking CSS/JS, large images, client-side rendering, web fonts (FOIT).

Pro tip: Use <link rel="preload"> for hero image and fetchpriority="high" on the LCP element.

3. CLS — Cumulative Layout Shift

CLS measures how much elements visually shift during page load. Every unexpected movement frustrates users.

CLS value	Rating
≤ 0.1	Good
0.1 – 0.25	Needs improvement
> 0.25	Poor

Common causes: images without width/height (#1), dynamic ads, web fonts (FOUT), dynamically injected content, iframes without dimensions.

<!-- BAD — no dimensions, causes CLS -->
<img src="hero.jpg" alt="Hero">

<!-- GOOD — dimensions reserve space -->
<img src="hero.jpg" alt="Hero" width="1200" height="630">

Common mistake: Adding width/height in CSS instead of HTML. Browser needs HTML attributes to reserve space BEFORE CSS loads.

4. INP — Interaction to Next Paint

INP measures responsiveness to user interactions. Replaced FID in March 2024 because INP measures ALL interactions, not just the first.

INP value	Rating
≤ 200ms	Good
200ms – 500ms	Needs improvement
> 500ms	Poor

Common causes: heavy JavaScript, long tasks (>50ms), third-party scripts, large DOM (>1500 elements), layout thrashing.

5. Thresholds and scoring

Google uses 75th percentile (P75) of Field data. All THREE metrics must be "Good" for a page to pass.

6. Field data vs Lab data

Aspect	Field (CrUX)	Lab (Lighthouse)
Source	Real Chrome users	Simulated environment
Used for ranking	YES	NO — debugging only
Where to see	Search Console, PSI (top)	Lighthouse, PSI (bottom)
Time	Last 28 days (rolling)	Current snapshot

Important: Lighthouse score 100 does NOT guarantee good Field CWV. Your test uses a fast machine; users are on mobile with 4G.

7. CWV and Google ranking

CWV are a "tiebreaker" — at equal content relevance, better CWV wins
Content is still #1 — great content with poor CWV beats poor content with great CWV
Page-level, not site-level evaluation
Mobile and desktop measured separately

8. Optimizing LCP

Preload hero image: <link rel="preload" as="image" href="hero.webp">
Use WebP/AVIF (25-50% smaller)
Eliminate render-blocking CSS: inline critical CSS
font-display: swap for web fonts
SSR/SSG for SPAs, CDN, TTFB < 600ms
fetchpriority="high" on hero image

9. Optimizing CLS

width + height on ALL images and videos
aspect-ratio CSS for responsive containers
min-height on ad slots
font-display: optional if font CLS is a problem
contain: layout to isolate layout changes
Use transform animations instead of width/height/top/left

10. Optimizing INP

Break long tasks with scheduler.yield() or requestIdleCallback
Debounce/throttle event handlers
Web Workers for heavy computation
Keep DOM < 1500 elements
Lazy load third-party scripts
CSS animations instead of JS

11. Measurement tools

Web Security Scanner — checks TTFB, page size, compression, cache, HTTP/2
PageSpeed Insights — Field + Lab data, most important CWV tool
Google Search Console — CWV report for entire site
Chrome DevTools — Performance tab for detailed analysis
web-vitals.js — measure CWV in production
WebPageTest — advanced multi-location testing

12. References and resources

Check your site's performance →

Performanse vodicPerformance Guide Optimizacija slikaImage Optimization HTTP CachingHTTP Caching Gzip i BrotliGzip & Brotli CDNCDN Lazy LoadingLazy Loading

Core Web Vitals — LCP, CLS, INP vodic

Sadrzaj

1. Sta su Core Web Vitals

2. LCP — Largest Contentful Paint

Najcesci uzroci loseg LCP-a

3. CLS — Cumulative Layout Shift

Kako se racuna CLS

Najcesci uzroci loseg CLS-a

4. INP — Interaction to Next Paint

INP vs FID — zasto je INP bolji

Najcesci uzroci loseg INP-a

5. Pragovi i ocenjivanje

6. Field data vs Lab data

7. CWV i Google rangiranje

8. Optimizacija LCP

9. Optimizacija CLS

10. Optimizacija INP

11. Alati za merenje

12. Reference i resursi

Core Web Vitals — LCP, CLS, INP Guide

Table of Contents

1. What are Core Web Vitals

2. LCP — Largest Contentful Paint

3. CLS — Cumulative Layout Shift

4. INP — Interaction to Next Paint

5. Thresholds and scoring

6. Field data vs Lab data

7. CWV and Google ranking

8. Optimizing LCP

9. Optimizing CLS

10. Optimizing INP

11. Measurement tools

12. References and resources