Bir web sayfasının 1 saniye yavaşlaması dönüşüm oranını ortalama %7 düşürür. Aylık 100.000 TL ciro yapan bir e-ticaret için bu 7.000 TL'lik aylık kayıp demek. Hız yalnızca kullanıcı deneyimi değil; Google'ın resmi sıralama faktörü ve doğrudan ROAS ölçütü. Bu yazıda Core Web Vitals'in üç metriğini, sektörel hedefleri ve site hızını gerçekten artıran teknikleri pratik şekilde anlatıyoruz.

Core Web Vitals Nedir?

Google'ın 2020'de tanıttığı ve 2024'te güncellediği 3 metrik:

  • LCP (Largest Contentful Paint) — En büyük görsel/metin yüklenme süresi. Hedef: < 2.5 saniye
  • INP (Interaction to Next Paint) — Kullanıcının ilk etkileşimine yanıt süresi. Hedef: < 200 ms
  • CLS (Cumulative Layout Shift) — Sayfa yüklenirken oluşan kayma. Hedef: < 0.1

Bu üç metrik gerçek kullanıcı verilerinden (Chrome User Experience Report — CrUX) ölçülür. Tek bir hızlı bağlantıdan testle değil; sahadaki milyonlarca ziyaretçi deneyiminden gelir.

LCP'yi İyileştirme: 7 Pratik Yol

1. Hero Görsel Optimizasyonu

İlk ekranda görünen büyük görsel genelde LCP'dir. Mutlaka:

  • WebP / AVIF formatında servis edin (JPG'den %35-50 daha küçük)
  • Boyutlandırın — viewport'tan büyük indirmek anlamsız
  • fetchpriority="high" attribute'u ekleyin
  • CDN üzerinden servis edin (Cloudflare, Vercel, Bunny)

2. Font Loading

@font-face ile yüklenen webfont'lar LCP'yi geciktirir. Çözüm:

  • font-display: swap kullanın
  • Sadece kullanılan subset'leri yükleyin (Latin Extended yeter, hiyeroglif yok)
  • preload ile kritik fontu önceden indirin

3. CSS / JS Render Engelleyicileri

Head'de yüklenen büyük CSS dosyaları sayfayı bekletir. Çözüm:

  • Critical CSS inline gömün, geri kalanı async yükleyin
  • JS için defer ya da async kullanın
  • Üçüncü parti scriptleri (Analytics, Tag Manager) sayfa sonuna alın

Performans optimizasyon çalışması

INP'yi İyileştirme: Etkileşim Yanıt Süresi

INP, eski FID metriğinin yerini aldı. Daha sıkı bir ölçüm — kullanıcı her tıkladığında, scroll'da, klavye etkileşiminde ölçülür.

  • JavaScript main thread'i bloklamayın — uzun süren işlemleri requestIdleCallback veya Web Workers'a taşıyın
  • Event listener'ları passive yapın ({ passive: true })
  • React/Vue gibi framework'lerde virtual list, memoization, code splitting kullanın
  • Üçüncü parti chat widget'ları (Tawk, Intercom) en büyük INP düşmanıdır — gerçekten gerekli mi?

CLS'yi İyileştirme: Layout Shift'i Yok Etme

Sayfa yüklenirken görsel/reklam/font yer değiştirirse kullanıcı yanlış yere tıklar. Çözüm:

  • Her görsel ve iframe'e width/height verin → tarayıcı yer ayırır
  • aspect-ratio CSS özelliği kullanın (responsive görseller için)
  • Webfont swap sırasında size adjust yapın
  • Reklam alanlarına rezerv yer bırakın (ad blocker'a karşı bile)
  • Geç yüklenen banner / cookie consent üst kısma değil alt köşeye

Test Araçları

  • PageSpeed Insights (pagespeed.web.dev) — Gerçek kullanıcı verisi + lab test
  • WebPageTest — Filmstrip, waterfall, ileri seviye analiz
  • Chrome DevTools Performance — Yerel debug
  • Lighthouse CI — CI/CD pipeline'a entegre sürekli test

Sektörel Hedefler

Genel "iyi" eşiği yeterli değil; rakipleriniz ne durumda?

  • E-ticaret kategori sayfası: LCP < 1.8sn rekabetçi
  • Blog / haber sayfası: LCP < 1.5sn rekabetçi
  • B2B landing page: LCP < 1.2sn rekabetçi (çünkü dönüşüm her saniye düşüyor)
  • Emlak detay sayfası: LCP < 2.0sn (görsel ağırlıklı, biraz tolere edilir)

Sık Yapılan 3 Hata

  1. "Lighthouse 100" hedeflemek — Lab test gerçek kullanıcıyı yansıtmaz. CrUX verisine bakın.
  2. Sıkıştırılmamış görseller — En büyük sıkıntı %80 vakada budur.
  3. Üçüncü parti script şişmesi — GA + GTM + Hotjar + Tawk + Pixel + 3 reklam ağı = INP 600ms+

Sonuç

Core Web Vitals iyileştirmesi, SEO sıralaması ve dönüşüm oranı için paradan tasarruf değil, para kazanma yatırımıdır. AlanyaWebsite olarak SEO ve teknik optimizasyon hizmetimizle her sitenin Core Web Vitals skorunu sahada "İyi" eşiğine taşıyacak teknik denetim ve uygulama yapıyoruz.