Core Web Vitals Nedir? İşletme Sahipleri İçin Performans Rehberi

2024 yılı itibarıyla Google, Core Web Vitals metriklerini resmi sıralama sinyali olarak kullandığını açıkladı. Bu üç metrik — LCP, INP ve CLS — kullanıcının sayfayı nasıl hissettiğini sayısallaştırır. Teknik olmayan işletme sahipleri için bu metriklerin ne anlama geldiğini, sitenizi nasıl etkilediğini ve hangi adımlarla iyileştirilebileceğini açıklıyoruz.

Core Web Vitals Neden Önemli?

Google Arama, kullanıcıya en iyi deneyimi sunan sayfayı öne çıkarmayı hedefler. İçerik kalitesi bu kararın en büyük belirleyicisidir; ancak aynı içerik kalitesindeki iki sayfa arasında kullanıcı deneyimi farkı varsa, daha iyi deneyim sunan sayfa avantaj elde eder. Core Web Vitals bu farkı ölçer.

Bunun ötesinde, kötü hız metrikleri doğrudan gelir kaybına yol açar: Google araştırmalarına göre LCP 1 saniyeden 3 saniyeye yükselince dönüşüm oranı ortalama %20 düşer. Mobil ziyaretçiler açısından bu oran daha yüksektir.

LCP — Largest Contentful Paint: En Büyük İçerik Boyama

LCP, tarayıcının görünür alan içindeki en büyük içerik öğesini (genellikle hero görsel veya ana başlık) ne kadar sürede boyandığını ölçer. Kullanıcının bakış açısından "sayfa ne zaman kullanılabilir hale geldi?" sorusuna en yakın yanıttır.

Hedef Değer

• İyi (yeşil): ≤ 2.5 saniye
• İyileştirme gerekiyor (sarı): 2.5 – 4.0 saniye
• Kötü (kırmızı): > 4.0 saniye

Yüksek LCP'nin Başlıca Nedenleri

• Optimize edilmemiş hero görsel: 2MB+ PNG veya JPEG, WebP kullanılmamış
• Yavaş sunucu yanıtı (TTFB): Sunucu 800ms'nin üzerinde yanıt veriyor
• Render-blocking kaynaklar: CSS veya JavaScript dosyaları sayfanın önce yüklenmesini engelliyor
• CDN kullanılmıyor: Tüm varlıklar tek sunucudan, coğrafi gecikmeyle sunuluyor

LCP İyileştirme Adımları

1. Hero görseli WebP formatına çevir, boyutunu 200KB altına indir
2. <link rel="preload"> etiketi ile hero görseli önden yükle
3. Hosting kalitesini yükselt: paylaşımlı hosting yerine VPS veya cloud hosting tercih et
4. Statik varlıklar için CDN (Cloudflare ücretsiz plan) kullan

INP — Interaction to Next Paint: Etkileşimden Sonraki Boyama

INP, 2024 yılında FID'in (First Input Delay) yerini aldı. Kullanıcının sayfayla etkileşime girdiği andan (tıklama, dokunma, klavye girişi) tarayıcının ekranı güncellediği ana kadar geçen süreyi ölçer. Tek bir etkileşimi değil, sayfanın tüm kullanım süresini değerlendirir.

Hedef Değer

• İyi: ≤ 200ms
• İyileştirme gerekiyor: 200 – 500ms
• Kötü: > 500ms

Yüksek INP'nin Nedenleri

• Ana iş parçacığını (main thread) kilitleyen ağır JavaScript
• Üçüncü taraf scriptler: canlı sohbet widget'ları, reklam scriptleri, analitik araçlar
• Karmaşık CSS animasyonları ve layout yeniden hesaplamaları

CLS — Cumulative Layout Shift: Kümülatif Düzen Kayması

CLS, sayfa yüklenirken görsel öğelerin ne kadar kaydığını ölçer. Bir butona tıklamak üzereyken üstüne bir reklam banner'ı kaydıysa ve yanlış elemana tıkladıysanız — bu yüksek CLS'dir ve hem kullanıcı deneyimini hem Google sıralamasını olumsuz etkiler.

Hedef Değer

• İyi: ≤ 0.1
• İyileştirme gerekiyor: 0.1 – 0.25
• Kötü: > 0.25

CLS İyileştirme Adımları

• Tüm <img> etiketlerine width ve height attribute ekle — tarayıcı boşluk rezerve eder
• Web fontları için font-display: swap kullan
• Reklam alanları için boyut rezervasyonu yap
• Geç yüklenen içerik (lazy-load) için yer tutucu (skeleton) kullan

Core Web Vitals'ı Nasıl Ölçersiniz?

1. Google PageSpeed Insights

pagespeed.web.dev adresine sitenizin URL'sini girin. Hem "Lab Data" (simüle edilmiş) hem "Field Data" (gerçek kullanıcı) sonuçlarını görir. Field Data yoksa trafik yetersizdir.

2. Google Search Console

Sol menüde "Deneyim → Core Web Vitals" raporu, tüm sitenin URL grupları bazında durumunu gösterir. Hangi sayfalar kötü, hangileri iyi — toplu görünüm sağlar.

3. Chrome DevTools — Lighthouse

F12 → Lighthouse sekmesi → "Performance" analizi. Lokal geliştirme ortamında da çalışır; ancak gerçek kullanıcı verisiyle doğrulanmalıdır.

Kodem Yazılım Projelerinde Core Web Vitals Standartları

Kodem Yazılım'da teslim edilen her proje PageSpeed Insights'ta mobil 85+, masaüstü 90+ hedefiyle teslim edilir. Bunun için standart uygulanan teknikler: WebP görsel optimizasyonu, kritik CSS inline, JavaScript defer/async, Cloudflare CDN ve sunucu tarafı cache. Teslim öncesi her proje bu metrikler için test edilir ve rapor müşteriye sunulur.