Bloglara Dön

Core Web Vitals Optimizasyonu: Kapsamlı Rehber

Teknik SEO Core Web Vitals
3 dk okuma

Core Web Vitals (CWV), kullanıcı deneyiminin ölçülebilir yüzüdür. Google, bu metrikleri sıralama sinyali olarak kullanır ve yeşil bandın altında kalan siteler açık bir dezavantaj yaşar. Bu rehberde LCP, INP ve CLS metriklerini uçtan uca ele alıyoruz — teori değil, gerçek dünyada uygulanan optimizasyonlar ile birlikte.

LCP (Largest Contentful Paint)

Sayfa yüklendiğinde en büyük görsel öğenin ekranda görünme süresi. Hedef: < 2.5s. Yaygın çözümler:

  • Hero görselini WebP/AVIF olarak sunun.
  • fetchpriority="high" ve preload <link> ekleyin.
  • Görseli src+srcset ile responsive verin.
  • Font display: swap.
  • CDN kullanın (Cloudflare, Bunny).
  • Kritik CSS inline, geri kalanı defer.
  • HTML’i mümkünse edge cache’de tutun.
  • Server response time (TTFB) 200ms altında olsun.

INP (Interaction to Next Paint)

Kullanıcının bir tıklama/etkileşimine karşılık ekranda görsel yanıt gelme süresi. Hedef: < 200ms. Çözümler:

  • JavaScript payload’unu küçültün (tree shaking, code splitting).
  • Long task’ları (50ms+) web worker’a alın.
  • Ana thread’i boşaltmak için requestIdleCallback.
  • 3rd party script’leri (analytics, chat widget) defer.
  • Event handler’ları debounce/throttle edin.
  • Framework seçimi: hydration ağır sitelerde Astro/Qwik değerlendirin.

CLS (Cumulative Layout Shift)

Sayfa yüklenirken öğelerin “zıplaması”. Hedef: < 0.1. Çözümler:

  • Tüm görsellere width/height veya aspect-ratio verin.
  • Font swap patlaması önleyin (font-display: swap + fallback boyut).
  • Reklam alanları için sabit yükseklik.
  • Web font’ları preload edin.
  • Async içerik yer tutucu (skeleton).

Ölçüm Araçları

  • PageSpeed Insights: lab + field verisi.
  • Chrome DevTools Performance: derin analiz.
  • CrUX Dashboard: BigQuery / Looker Studio.
  • Search Console CWV raporu: aylık trend.
  • WebPageTest: filmstrip ve waterfall.
  • Real User Monitoring: SpeedCurve, Vercel Speed Insights.

Örnek Optimizasyon

Bir Laravel + Blade sitesinde LCP’yi 4.1s’den 1.9s’ye indirmek için:

  1. Kritik CSS inline (~14KB).
  2. Hero WebP + preload + fetchpriority.
  3. Font-display swap.
  4. Google Fonts local host.
  5. 3rd party analytics defer.
  6. Cloudflare önünde HTML cache.

Sonuç: LCP 1.9s, INP 145ms, CLS 0.03. Google Search Console’da tüm sayfalar “iyi” bandına geçti.

Framework Bazlı İpuçları

  • WordPress: WP Rocket + WebP Express + Cloudflare APO.
  • Laravel/Blade: route:cache + view:cache + kritik CSS inline.
  • Next.js: Image component + font/next optimize.
  • Astro: zaten hızlı; content collections + island’lar minimum JS.

Sık Yapılan Hatalar

  1. Lab verisine güvenip field veriyi göz ardı etmek.
  2. Chrome DevTools’u mobile throttling olmadan test etmek.
  3. Lighthouse skorunu hedef sanmak (CWV daha önemli).
  4. Hero görselini lazy load yapmak.
  5. Font’u CDN’den değil kendi sunucudan servisleyip preload etmemek.

Sıkça Sorulan Sorular

Skorum 90+ ama field kötü?

Lab ve field farklı ortamlarda ölçüldüğü için normaldir. Field öncelik.

Ne kadar sürede Google’a yansır?

28 günlük ortalama üzerinden hesaplanır; iyileştirmeler 4-6 hafta sonra tam yansır.

Sonuç

Core Web Vitals iyileştirmeleri hem SEO’yu hem dönüşüm oranlarını artırır. Aylık ölçüm ve iterasyon şart. Yalnızca sıralama için değil, gerçek kullanıcı deneyimi için de her sitenin karşılamak zorunda olduğu temel bir standart hâline geldi.