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

Google, 2021'den itibaren sıralama algoritmasına kullanıcı deneyimini doğrudan etkileyen bir dizi metriği dahil etti. Bu metrikler topluluğuna Core Web Vitals adı veriliyor. Eğer web sitenizin hem arama motorlarında üst sıralarda yer almasını hem de ziyaretçilerinize pürüzsüz bir deneyim sunmasını istiyorsanız bu kavramı iyi anlamanız şart.

Core Web Vitals Nedir?

Core Web Vitals, bir web sayfasının gerçek kullanıcılar tarafından nasıl deneyimlendiğini ölçen üç temel performans metriğinden oluşur:

• LCP – Largest Contentful Paint (En Büyük İçerik Boyaması): Sayfadaki en büyük görsel veya metin bloğunun ekrana yüklenme süresi. İdeal hedef: ≤ 2,5 saniye.
• INP – Interaction to Next Paint (Etkileşimden Sonraki Boyama): Kullanıcının tıklama, dokunma gibi etkileşimlerine sayfanın ne kadar hızlı görsel yanıt verdiğini ölçer. İdeal hedef: ≤ 200 ms. (2024 itibarıyla CLS'nin yerini aldı.)
• CLS – Cumulative Layout Shift (Kümülatif Düzen Kayması): Sayfa yüklenirken öğelerin beklenmedik şekilde yer değiştirmesini ölçer. İdeal hedef: ≤ 0,1.

Bu üç metrik birleştiğinde, kullanıcının sayfayı yüklerken, etkileşim kurarken ve okurken yaşadığı deneyimi kapsamlı biçimde ortaya koyuyor.

Neden Bu Kadar Önemli?

Teknik bir metrik gibi görünse de Core Web Vitals, aslında doğrudan iş sonuçlarını etkiliyor. Google'ın araştırmalarına göre LCP süresi 0,1 saniye iyileştiğinde mobil dönüşüm oranları ortalama %10,1 artıyor. Kötü bir CLS skoru ise kullanıcının yanlış butona tıklamasına, dolayısıyla hem hayal kırıklığına hem de sipariş kayıplarına yol açabiliyor.

LCP Nasıl İyileştirilir?

• Sunucu yanıt sürelerini kısaltmak için CDN kullanın.
• Hero görselleri için loading="eager" ve fetchpriority="high" niteliklerini ekleyin.
• Büyük resimleri WebP veya AVIF formatına dönüştürün.
• Gereksiz üçüncü taraf script'leri geciktirin ya da kaldırın.

INP Nasıl İyileştirilir?

• JavaScript görevlerini 50 ms'nin altında tutmaya çalışın; uzun görevleri parçalara bölün.
• Ağır hesaplamaları Web Worker ile ana thread'den ayırın.
• React veya Vue kullanıyorsanız gereksiz yeniden render'ları önleyin; useMemo, React.memo gibi optimizasyon araçlarından yararlanın.
• Kullanıcı etkileşimlerinde debounce / throttle uygulayın.

CLS Nasıl İyileştirilir?

• Görsellere ve video öğelerine mutlaka width / height değeri atayın.
• Web fontları için font-display: swap kullanın; ancak fallback font boyutlarını asıl fonta yakın tutun.
• Dinamik içerikleri (reklam, banner) sayfanın üst kısmına yerleştirmekten kaçının ya da bunlar için rezerve alan bırakın.

Performansı Nasıl Ölçersiniz?

Aşağıdaki araçlar ücretsiz ve oldukça kullanışlı:

| Araç | Ne Ölçer? | |---|---| | Google PageSpeed Insights | Hem lab hem alan verisi | | Chrome DevTools | Gerçek zamanlı profilleme | | Search Console | Alan bazlı CWV raporu | | web-vitals JS kütüphanesi | Canlı kullanıcı verisi toplama |

Son Söz

Core Web Vitals, "bir gün bakarım" listesinde tutulacak bir konu değil. SEO etkisi, kullanıcı memnuniyeti ve dönüşüm oranlarına doğrudan yansıyan bu metrikler; özellikle e-ticaret ve içerik odaklı siteler için kritik bir rekabet avantajı sunuyor. Küçük iyileştirmeler bile büyük farklar yaratabilir — önemli olan başlamak.