Core Web Vitals (INP, LCP, CLS) Nedir ve Nasıl Düzeltilir?

Google'ın En Önemli Sıralama Kriteri: Core Web Vitals

Arama motoru devi Google, web sitelerini sıralarken kullanıcıların yaşadığı gerçek deneyimi ölçmek adına Core Web Vitals (Temel Web Verileri) metriklerini geliştirmiştir. Bu metrikler, gerçek kullanıcıların (Chrome User Experience Report - CrUX) sitenizde karşılaştığı yüklenme hızı, etkileşim tepkisi ve görsel kararlılık değerlerini analiz eder. Core Web Vitals skorları zayıf olan siteler, ne kadar kaliteli içeriğe sahip olursa olsun arama sonuçlarında alt sıralara geriler.

1. LCP (Largest Contentful Paint) Optimasyonu

LCP, sayfanın ana ekranında yer alan en büyük görsel veya metin bloğunun yüklenme süresini ölçer. İyi bir LCP skoru için bu sürenin 2.5 saniyenin altında olması gerekir.

LCP Hataları Nasıl Düzeltilir?

• LCP Görselini Önceden Yükleyin (Preload): Ana sayfadaki en büyük banner görseline etiketi ekleyerek tarayıcının bu görseli öncelikli indirmesini sağlayın.
• Görsel Boyutlarını Küçültün: Manşet görsellerini WebP formatına çevirin ve çözünürlüklerini ekran boyutuna uygun ölçeklendirin.
• Sunucu Yanıt Süresini (TTFB) Düşürün: Sunucu tarafında Redis/Memcached önbellekleme kullanarak veritabanı yükünü hafifletin.

2. INP (Interaction to Next Paint) İyileştirmeleri

FID metriğinin yerini alan INP, kullanıcının sayfadaki bir butona tıklaması, bir menüyü açması veya form doldurması anında sitenin verdiği görsel tepki süresini ölçer. İyi bir INP değeri 200 milisaniyenin altında olmalıdır.

INP Hataları Nasıl Düzeltilir?

• Uzun JavaScript Görevlerini Bölün: Ana işlemciyi 50 milisaniyeden fazla meşgul eden ağır JavaScript kodlarını küçük parçalara ayırın.
• Gereksiz Scriptleri Erteleyin: Analiz ve reklam kodlarını ana sayfa yüklenmesi tamamlandıktan sonra çalışacak şekilde yapılandırın.
• Ağır DOM Boyutundan Kaçının: Derinlemesine iç içe geçmiş HTML yapılarını sadeleştirin.

3. CLS (Cumulative Layout Shift) Düzen Kaymalarını Engelleme

CLS, sayfa yüklenirken ögelerin sonradan gelerek düzenin aniden kaymasını ölçer. Yanlışlıkla farklı bir yere tıklanmasına yol açan bu durum kullanıcıları rahatsız eder. CLS skoru 0.1'in altında olmalıdır.

CLS Hataları Nasıl Düzeltilir?

• Görsellere Genişlik ve Yükseklik Tanımlayın: Bütün görsellere width ve height özniteliklerini ekleyin.
• Dinamik Reklam Alanlarına Sabit Yükseklik Verin: Sayfa içine sonradan yüklenen reklam veya banner alanlarının konteyner boyutunu önceden CSS ile sabitleyin.
• Web Font Yüklemelerini Optimize Edin: Harici fontlar yüklenirken yazının anında değişmesini engellemek için CSS tarafında font-display: swap kullanın.

Core Web Vitals skorlarınızı yeşil bölgeye yükseltmek, Google sıralamalarınızı garantiye almak ve teknik altyapınızı güçlendirmek için Kod Uzmanı Teknik SEO danışmanlığımızdan faydalanabilirsiniz.