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

Google, 2021'den itibaren arama sıralamasını belirleyen faktörler arasına Core Web Vitals metriklerini ekledi. Peki bu metrikler tam olarak ne anlama geliyor ve bir geliştirici ya da site sahibi olarak bunları nasıl iyileştirebilirsiniz? Gelin birlikte inceleyelim.

Core Web Vitals Nedir?

Core Web Vitals, bir web sayfasının kullanıcı deneyimini nesnel ve ölçülebilir biçimde değerlendiren üç temel metriktir. Google bu metrikleri; yükleme performansı, etkileşim hızı ve görsel kararlılık olmak üzere üç başlık altında toplar.

1. LCP – Largest Contentful Paint (En Büyük İçerikli Boyama)

Sayfadaki en büyük görsel veya metin bloğunun ekranda görünmesi için geçen süredir. Kullanıcının "sayfa yüklendi" hissini ne zaman aldığını temsil eder.

• ✅ İyi: 2,5 saniyenin altı
• ⚠️ İyileştirme Gerekli: 2,5 – 4 saniye arası
• ❌ Kötü: 4 saniyenin üzeri

2. INP – Interaction to Next Paint (Sonraki Boyamaya Etkileşim)

2024 itibarıyla FID'in (First Input Delay) yerini alan bu metrik, kullanıcının sayfayla tüm etkileşimlerini (tıklama, klavye girişi vb.) değerlendirir ve en yavaş yanıtı esas alır.

• ✅ İyi: 200 ms'nin altı
• ⚠️ İyileştirme Gerekli: 200 – 500 ms arası
• ❌ Kötü: 500 ms'nin üzeri

3. CLS – Cumulative Layout Shift (Kümülatif Düzen Kayması)

Sayfa yüklenirken öğelerin ne kadar "sıçradığını" ölçer. Bir butona tıklamak üzereyken o butonun yerinin kayması — işte bu CLS sorunudur.

• ✅ İyi: 0,1'in altı
• ⚠️ İyileştirme Gerekli: 0,1 – 0,25 arası
• ❌ Kötü: 0,25'in üzeri

---

Core Web Vitals Nasıl Ölçülür?

Metrikleri ölçmek için kullanabileceğiniz ücretsiz araçlar:

• Google Search Console → Core Web Vitals raporu
• PageSpeed Insights → Hem lab hem gerçek kullanıcı verisi (CrUX)
• Lighthouse → Tarayıcı üzerinden anlık analiz
• Chrome DevTools → Performance sekmesi

---

İyileştirme İçin Pratik Adımlar

LCP İyileştirmesi

• Sunucu yanıt sürelerini (TTFB) düşürün; CDN kullanın.
• Hero görsellerini WebP formatına dönüştürün ve fetchpriority="high" özelliği ekleyin.
• Kritik CSS'i inline edin, render-blocking kaynakları temizleyin.
• Büyük görselleri lazy load yerine öncelikli yükleyin.

INP İyileştirmesi

• Uzun süren JavaScript görevlerini (long tasks) parçalara bölün.
• Ağır hesaplamaları Web Worker'a taşıyın.
• Gereksiz üçüncü taraf script'lerini kaldırın veya erteyin.
• Event handler'larınızı hafif tutun; DOM manipülasyonunu optimize edin.

CLS İyileştirmesi

• Tüm görsel ve video öğelerine width ve height attribute'u mutlaka ekleyin.
• Dinamik olarak eklenen reklamlar veya banner'lar için alan rezerve edin.
• Web fontları için font-display: optional veya swap kullanın.
• Animasyonlarda transform ve opacity dışındaki CSS özelliklerinden kaçının.

---

SEO ile İlişkisi

Core Web Vitals, Google'ın Page Experience sinyallerinin bir parçasıdır. Kötü metrikler doğrudan sıralama kaybına yol açmayabilir; ancak rekabetçi anahtar kelimelerde iki benzer sayfa arasında belirleyici fark yaratabilir. Üstelik iyi metrikler = mutlu kullanıcılar = daha düşük bounce rate demektir.

---

Sonuç

Core Web Vitals; sadece bir SEO oyunu değil, kullanıcıya gerçekten iyi bir deneyim sunmanın somut göstergesidir. LCP, INP ve CLS metriklerini düzenli olarak takip etmek, hem arama motoru görünürlüğünüzü hem de kullanıcı memnuniyetinizi doğrudan etkiler. Küçük optimizasyonlar bile büyük farklar yaratabilir — başlamak için tek yapmanız gereken PageSpeed Insights'ı açmak.