Core Web Vitals Nedir ve Nasıl İyileştirilir?

Google, kullanıcı deneyimini somut verilerle ölçmek için 2020 yılında Core Web Vitals kavramını tanıttı. Bu metrikler artık yalnızca bir "iyi uygulama tavsiyesi" değil; doğrudan arama sıralamasını etkileyen sinyal gruplarından biri. Peki bu metrikler tam olarak ne anlama geliyor ve sitenizi nasıl iyileştirebilirsiniz?

Core Web Vitals Nedir?

Core Web Vitals, bir web sayfasının gerçek kullanıcı deneyimini üç temel boyutta ölçen metrik setidir:

• LCP – Largest Contentful Paint (En Büyük İçerik Boyaması): Sayfadaki en büyük görsel veya metin bloğunun ne kadar sürede yüklendiğini ölçer. İdeal hedef: ≤ 2,5 saniye.
• INP – Interaction to Next Paint (Sonraki Boyamaya Etkileşim): Kullanıcının bir tıklama veya tuş vuruşu gibi etkileşimine sayfanın ne kadar hızlı görsel yanıt verdiğini gösterir. İdeal hedef: ≤ 200 ms. (2024 itibarıyla eski FID metriğinin yerini almıştır.)
• CLS – Cumulative Layout Shift (Kümülatif Düzen Kayması): Sayfa yüklenirken elementlerin ne kadar kaydığını, yani görsel kararsızlığı ölçer. İdeal hedef: ≤ 0,1.

Neden Bu Kadar Önemli?

Teknik bir metrik olmanın ötesinde Core Web Vitals, doğrudan dönüşüm oranlarını etkiler. Araştırmalar, LCP süresi 1 saniye iyileştirilen e-ticaret sitelerinde sepete ekleme oranının %8'e kadar artabildiğini gösteriyor. Üstelik Google, bu metrikleri Page Experience sinyallerinin bir parçası olarak sıralama algoritmasına dahil etmiş durumda.

LCP Nasıl İyileştirilir?

• Görsel optimizasyonu: Hero banner ve büyük görselleri WebP/AVIF formatına dönüştürün, loading="eager" ve fetchpriority="high" attribute'larını kullanın.
• Sunucu yanıt süresini kısaltın: CDN kullanın, TTFB (Time to First Byte) değerini 800 ms'nin altına indirin.
• Render-blocking kaynakları temizleyin: Kritik olmayan CSS ve JavaScript'i erteleyin (defer, async).

INP Nasıl İyileştirilir?

• Uzun JavaScript görevlerini bölün: 50 ms üzerindeki her görev "uzun görev" sayılır. scheduler.yield() veya setTimeout ile büyük işlemleri küçük parçalara ayırın.
• Üçüncü taraf scriptleri denetleyin: Analitik, reklam ve chat widget'ları INP'yi ciddi biçimde düşürebilir; geç yükleme stratejisi uygulayın.
• React/Vue gibi framework'lerde: Gereksiz re-render'ları useMemo, React.memo gibi tekniklerle önleyin.

CLS Nasıl İyileştirilir?

• Görsel ve video elementlerine boyut tanımlayın: width ve height attribute'ları sayfanın layout'u önceden hesaplamasını sağlar.
• Reklam ve embed alanlarını rezerve edin: Dinamik içerik için sabit yükseklikte bir kapsayıcı tanımlayın.
• Web font yüklemelerini yönetin: font-display: optional veya font-display: swap kullanarak görünmez metin (FOIT) sorununu azaltın.

Metrikleri Nerede Ölçebilirsiniz?

| Araç | Tür | |---|---| | Google Search Console | Alan geneli gerçek kullanıcı verisi | | PageSpeed Insights | Sayfa bazlı lab + alan verisi | | Chrome DevTools (Performance) | Anlık lab verisi | | Web Vitals Chrome Eklentisi | Hızlı tarayıcı kontrolü |

Son Söz

Core Web Vitals, "sitem açılıyor, yeterli" anlayışının geride kaldığını net biçimde ortaya koyuyor. Hız, etkileşim duyarlılığı ve görsel kararlılık artık birer tercih değil, birer zorunluluk. Küçük optimizasyonların büyük farklar yarattığı bu alanda en doğru yaklaşım: önce ölç, sonra önceliklendir, ardından iyileştir.

Bir sonraki yazıda Next.js projelerinde Core Web Vitals optimizasyonunu adım adım ele alacağım. Görüşmek üzere! 🚀