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

Google, 2021'den itibaren sayfa sıralama algoritmalarına kullanıcı deneyimi sinyallerini dahil etti. Bu sinyallerin merkezinde Core Web Vitals yer alıyor. Eğer bir web sitesi yönetiyorsanız ya da geliştiriyorsanız, bu metrikleri görmezden gelmek artık lüks değil.

Core Web Vitals Nedir?

Core Web Vitals, Google'ın belirlediği üç temel performans metriğinden oluşur. Her biri gerçek kullanıcı deneyiminin farklı bir boyutunu ölçer:

• LCP – Largest Contentful Paint (En Büyük İçerik Boyama): Sayfanın görünür alanındaki en büyük içerik öğesinin (resim, başlık vb.) ne kadar sürede yüklendiğini ölçer. Hedef: ≤ 2,5 saniye
• INP – Interaction to Next Paint (Sonraki Boyamaya Etkileşim): Kullanıcının sayfayla her türlü etkileşiminin (tıklama, tuş basışı) ne kadar hızlı yanıt ürettiğini ölçer. Mart 2024'te FID'in yerini aldı. Hedef: ≤ 200 ms
• CLS – Cumulative Layout Shift (Kümülatif Düzen Kayması): Sayfa yüklenirken öğelerin ne kadar "zıpladığını" ölçer. O yazıya tıklayacakken reklam kayıyorsa, CLS suçludur. Hedef: ≤ 0,1

Neden Bu Kadar Önemli?

Bir sayfanın teknik olarak "çalışıyor" olması yeterli değil. Google, kullanıcıların sayfanızda nasıl bir deneyim yaşadığına bakıyor. Düşük Core Web Vitals skorları:

• Arama sıralamalarınızı olumsuz etkiler
• Hemen çıkma oranınızı artırır
• Dönüşüm oranlarınızı düşürür

Amazon'un yaptığı bir araştırma, sayfa yükleme süresindeki her 100 ms'lik artışın satışlarda %1 düşüşe yol açtığını gösterdi. Rakamlar konuşuyor.

LCP Nasıl İyileştirilir?

• Sunucu yanıt sürelerini optimize edin (TTFB'yi düşürün)
• Hero görselleri için loading="eager" ve fetchpriority="high" kullanın
• Görselleri modern formatlara (WebP, AVIF) dönüştürün
• CDN kullanarak içeriği kullanıcıya coğrafi olarak yaklaştırın
• Kritik CSS'i inline olarak sayfaya ekleyin

INP Nasıl İyileştirilir?

• JavaScript iş yükünü küçük parçalara bölün (code splitting)
• Uzun süren görevleri (Long Tasks) scheduler.yield() ile bölerek ana thread'i serbest bırakın
• Üçüncü taraf scriptlerin (chatbot, analitik) etkisini izleyin ve geciktirin
• React/Vue gibi framework kullanıyorsanız, gereksiz yeniden render'ları önleyin

CLS Nasıl İyileştirilir?

• Tüm resim ve video öğelerine width ve height attribute'u ekleyin
• Web fontları için font-display: swap kullanın ve FOUT'u minimize edin
• Dinamik olarak yüklenen reklamlar veya banner'lar için yer tutucu alan ayırın
• Animasyonlarda transform ve opacity dışındaki özellikleri kullanmaktan kaçının

Metrikleri Nasıl Ölçersiniz?

Teoriden pratiğe geçmek için şu araçları kullanabilirsiniz:

• Google Search Console → Core Web Vitals Raporu: Gerçek kullanıcı verisi (CrUX)
• PageSpeed Insights: Hem lab hem field verisi bir arada
• Chrome DevTools → Performance paneli: Derinlemesine analiz
• web-vitals.js kütüphanesi: Kendi analitiğinize entegre etmek için

Son Söz

Core Web Vitals, bir SEO çalışması olmaktan öte, kullanıcılarınıza saygı göstermenin teknik yansımasıdır. Metrikler önemli, evet; ama asıl hedef sayfanızı açan kişinin "vay be, ne hızlı" demesidir. Araçlar bize nerede durduğumuzu gösterir, geri kalan iş disiplinli bir optimizasyon döngüsüdür.