Core Web Vitals Nedir? Google'ın Hız Kriterleri 2026

Bir web sitesine girdiğinizde 3 saniye içinde yüklenmiyorsa %53 ihtimalle terk edersiniz. Google bu gerçeği biliyor ve 2021'den bu yana sayfa hızını sıralama faktörü olarak kullanıyor. 2026 itibarıyla bu değerlendirme Core Web Vitals adı verilen 3 metrik üzerinden yapılıyor: LCP, CLS ve INP.

Core Web Vitals Nedir?

• LCP (Largest Contentful Paint): Sayfadaki en büyük görsel öğenin yüklenme süresi.
• CLS (Cumulative Layout Shift): Sayfa yüklenirken öğelerin ne kadar kaydığı.
• INP (Interaction to Next Paint): Kullanıcı etkileşimine yanıt hızı. 2024'te FID'in yerini aldı.

Veriler gerçek kullanıcı ziyaretlerinden toplanan CrUX (Chrome User Experience Report) üzerinden gelir. Resmi kaynak: web.dev/vitals

Neden Önemli?

• İyi CWV skoruna sahip siteler %24 daha az terk ediliyor.
• LCP 2.5s altındaki siteler dönüşüm oranında %8 avantaj sağlıyor.
• E-ticaret sitelerinde her 100ms hız kaybı %1 satış kaybı.
• Google iki eşit kalitede içerik arasında CWV'si iyi olanı öne çıkarıyor.

LCP Nedir?

LCP İyileştirme: 7 Pratik Teknik

1. Hero Görseli Preload Edin

<link rel="preload" as="image"
      href="/img/hero.webp"
      fetchpriority="high">

2. WebP / AVIF Formatları Kullanın

JPEG yerine WebP %30, AVIF %50 daha küçük dosya boyutu:

<picture>
  <source srcset="/img/hero.avif" type="image/avif">
  <source srcset="/img/hero.webp" type="image/webp">
  <img src="/img/hero.jpg" alt="Hero" width="1280" height="720">
</picture>

3. Lazy Loading (Fold Altı İçin)

<img src="/img/below-fold.webp"
     loading="lazy"
     decoding="async"
     width="800" height="600"
     alt="Hizmet görseli">

4. fetchpriority Attribute

<img src="/img/hero.webp" fetchpriority="high">

5. Critical CSS Inline

<style>
  body{font-family:system-ui}
  .hero{min-height:100vh;background:#0A0C1E}
</style>
<link rel="preload" href="/css/main.css" as="style"
      onload="this.onload=null;this.rel='stylesheet'">

6. Font Optimizasyonu

@font-face {
  font-family: 'Outfit';
  src: url('/fonts/outfit.woff2') format('woff2');
  font-display: swap;
}

7. CDN ve SSR

Cloudflare, BunnyCDN gibi CDN ile TTFB'yi düşürün. Laravel tarafında SSR + Cache:

Route::get('/', function () {
    return Cache::remember('home', 3600, fn() => view('home')->render());
});

CLS Nedir?

CLS Önleme: 5 Teknik

1. Görsellere width/height Verin

<img src="/img/kart.webp" width="400" height="300" alt="...">

2. aspect-ratio CSS

.card-image {
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;
}

3. font-display: swap

@font-face {
  font-family: 'Outfit';
  font-display: swap;
  size-adjust: 100%;
}

4. Reklam Alanlarına Yer Ayırın

.ad-slot { min-height: 250px; }

5. Consent Banner Yerleşimi

Cookie banner'ı fixed position ile yerleştirin, içerik aşağı itmesin.

INP Nedir?

Mart 2024'te Google FID yerine INP'yi resmi Core Web Vitals olarak duyurdu.

INP İyileştirme

1. JavaScript Code Splitting

button.addEventListener('click', async () => {
  const { openModal } = await import('./modal.js');
  openModal();
});

2. Debounce

function debounce(fn, delay = 300) {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => fn(...args), delay);
  };
}

3. Yield to Main Thread

async function yieldToMain() {
  return new Promise(resolve => setTimeout(resolve, 0));
}

4. Web Workers

const worker = new Worker('/js/heavy-task.js');
worker.postMessage({ data: largeArray });

5. Passive Event Listeners

window.addEventListener('scroll', handler, { passive: true });

Test Araçları

• PageSpeed Insights: pagespeed.web.dev
• Google Search Console: Tüm sitenin CWV problemleri
• Lighthouse: Chrome DevTools
• WebPageTest: webpagetest.org
• CrUX Dashboard: Gerçek kullanıcı tarihsel grafiği

Gerçek Vaka: 50 Skordan 95 Skora

Uyguladığımız: Hero görseli AVIF + preload, Cloudflare CDN, critical CSS inline, font-display swap, aspect-ratio, JS bundle 3 chunk, Laravel response cache, image lazy loading.

Vaka çalışmaları

SSS

Core Web Vitals skorum kötü, cezalanır mıyım?

Google "cezalandırma" yerine sıralama avantajı/dezavantajı kullanır. Kötü skor doğrudan ceza değil ama rekabette geriye düşürür.

Lab ve field verisi neden farklı?

Lab kontrollü ortamda, field gerçek kullanıcılardan. Google sıralamada field (CrUX) verisini kullanır.

WordPress sitemin skoru nasıl iyileşir?

WP Rocket, LiteSpeed Cache, ShortPixel eklentileri + hero görseli AVIF + unused CSS temizliği.

Mobil ve masaüstü skorları neden farklı?

Google mobil skoru önceliklendirir (mobile-first indexing). Mobil skor daha kritiktir.

CWV iyileştirmek ne kadar sürer?

Küçük 1-2 hafta, orta 3-4 hafta, büyük e-ticaret 2-3 ay. CrUX güncellenmesi 28 gün alır.

Volpora CWV optimizasyonu yapıyor mu?

Evet. Web geliştirme hizmetimiz kapsamında performans audit sunuyoruz. Ücretsiz analiz veya WhatsApp.