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

Google, 2020'den bu yana web sitelerini sıralamak için yalnızca içerik kalitesine değil, kullanıcı deneyimine de bakıyor. İşte bu noktada Core Web Vitals devreye giriyor. Bir sitenin gerçek kullanıcılar tarafından nasıl hissettirdiğini sayısal olarak ölçen bu metrikler, artık SEO'nun ayrılmaz bir parçası.

Core Web Vitals Nedir?

Core Web Vitals, Google'ın belirlediği üç temel performans metriğinden oluşur:

• LCP – Largest Contentful Paint (En Büyük İçerikli Boyama): Sayfadaki en büyük görsel veya metin bloğunun ne kadar sürede yüklendiğini ölçer. Hedef: ≤ 2,5 saniye
• INP – Interaction to Next Paint (Etkileşimden Sonraki Boyama): Kullanıcının sayfayla etkileşime girdiği andan (tıklama, tuş basımı vb.) tarayıcının ekranı güncellediği ana kadar geçen süreyi ölçer. Hedef: ≤ 200 ms (2024 itibarıyla FID'in yerini aldı)
• CLS – Cumulative Layout Shift (Kümülatif Düzen Kayması): Sayfa yüklenirken elementlerin beklenmedik şekilde kayıp kaymadığını ölçer. Hedef: ≤ 0,1

Bu üç metrik bir araya geldiğinde bir sayfanın hızlı mı yüklendiğini, tepkili mi olduğunu ve görsel olarak stabil mi durduğunu anlatır.

Neden Bu Kadar Önemli?

Teknik bir iyileştirme gibi görünse de Core Web Vitals doğrudan iş sonuçlarını etkiler:

• Yavaş yüklenen sayfalar kullanıcı kaybına yol açar; araştırmalar LCP'nin her 1 saniyelik gecikmesinin dönüşüm oranını %4-8 düşürdüğünü gösteriyor.
• Google, iyi Core Web Vitals skorlarına sahip sayfaları arama sonuçlarında daha üst sıralarda gösteriyor.
• Özellikle mobil kullanıcılar için deneyim kalitesi doğrudan bağlılıkla ilişkili.

LCP Nasıl İyileştirilir?

• Sunucu yanıt sürelerini azaltın (TTFB optimizasyonu, CDN kullanımı).
• Hero görselleri için loading="eager" ve fetchpriority="high" nitelikleri ekleyin.
• Görselleri WebP veya AVIF formatına dönüştürün, boyutlandırın.
• Kritik CSS'i inline olarak yerleştirin, render-blocking kaynakları azaltın.

INP Nasıl İyileştirilir?

• JavaScript iş yükünü küçük parçalara bölün; uzun görevlerden kaçının.
• setTimeout veya scheduler.yield() kullanarak ana thread'i serbest bırakın.
• Gereksiz üçüncü taraf scriptleri geciktirin veya kaldırın.
• React/Vue gibi framework kullanıyorsanız bileşen re-render optimizasyonuna dikkat edin.

CLS Nasıl İyileştirilir?

• Tüm görsellere ve video elementlerine genişlik/yükseklik attribute'u tanımlayın.
• Dinamik olarak eklenen reklamlar veya bannerlar 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.

Skoru Nasıl Ölçersiniz?

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

| Araç | Tür | |---|---| | Google Search Console | Gerçek kullanıcı verisi (CrUX) | | PageSpeed Insights | Hem lab hem alan verisi | | Chrome DevTools | Detaylı profil analizi | | Web Vitals Chrome Eklentisi | Anlık izleme |

Son Söz

Core Web Vitals, "yeterince hızlı" ile "gerçekten iyi" arasındaki farkı netleştiriyor. Bu metriklere yatırım yapmak yalnızca Google'ı mutlu etmek için değil — önce kullanıcıyı mutlu etmek, sıralamaları iyileştirmek ondan sonra gelecek. Performansı bir sprint değil, sürekli bir pratik olarak görün; küçük kazanımlar zamanla büyük fark yaratır.