Core Web Vitals Nedir? LCP, INP ve CLS’yi İyileştirmenin Pratik Yolları

Kısa cevap: Core Web Vitals, Google tarafından belirlenen ve bir web sayfasının kullanıcı deneyimi kalitesini ölçen üç temel performans metriğidir: LCP (Largest Contentful Paint - Yükleme Hızı), INP (Interaction to Next Paint - Etkileşim Hızı) ve CLS (Cumulative Layout Shift - Görsel Kararlılık). İyi kabul edilen standart eşikler; LCP için 2,5 saniye ve altı, INP için 200 milisaniye ve altı, CLS için ise 0,1 ve altıdır.

Core Web Vitals Nedir ve Neden Önemlidir?

Google'ın kullanıcı deneyimini ölçümlemek adına geliştirdiği Core Web Vitals (Temel Web Verileri), modern web geliştirmenin ve teknik SEO'nun en kritik bileşenlerinden biridir. Bu metrikler teorik laboratuvar simülasyonları yerine; Chrome tarayıcısı kullanan gerçek dünya kullanıcılarının (Chrome User Experience Report - CrUX) deneyimlerini baz alır.

Bir sayfanın hızlı açılması, ziyaretçinin tıkladığı anda ekranın gecikmeden tepki vermesi ve okuma esnasında içeriğin aniden aşağı yukarı zıplamaması hem dönüşüm oranlarını doğrudan artırır hem de Google arama sıralamalarında pozitif bir sayfa deneyimi (Page Experience) sinyali oluşturur.

Core Web Vitals Metrikleri ve Hedef Eşik Değerleri

Google, her metrik için üç performans bölgesi belirlemiştir. Sitenizin "İyi" kategorisinde sayılması için ziyaretçilerin en az %75'inin iyi eşikte kalması şarttır:

1. LCP (Largest Contentful Paint) Optimizasyonu

LCP, kullanıcının sayfaya girdiğinde ekranda beliren en büyük görsel veya metin bloğunun (genellikle hero banner, manşet görseli veya büyük H1 başlığı) ne kadar sürede render edildiğini ölçer.

LCP İyileştirmek İçin Somut Adımlar:

• LCP Görseline Öncelik Verin: Hero bölümündeki ana görsele asla loading="lazy" vermeyin. Tam aksine tarayıcıya fetchpriority="high" ve loading="eager" özniteliklerini ekleyerek bu görselin ağ kuyruğunda ilk sıraya alınmasını sağlayın.
• Modern Görsel Formatları Kullanın: JPEG ve PNG yerine WebP veya AVIF formatlarını tercih edin. Görseli farklı ekran genişliklerine göre srcset ve sizes öznitelikleriyle sunun.
• Sunucu Yanıt Süresini (TTFB) Düşürün: TTFB 600 ms üzerindeyse LCP'nin 2.5 saniye altında kalması imkânsızdır. OPcache, Redis/Memcached önbellekleme, PHP 8.4+ sürüm yükseltmesi ve Cloudflare gibi küresel bir CDN kullanımı TTFB süresini 100-200 ms bandına çeker.
• Render Engelleyici (Render-Blocking) Kaynakları Temizleyin: Kullanılmayan harici CSS dosyalarını kaldırın, kritik CSS'i (Critical CSS) <style> etiketiyle sayfa içine gömün ve harici fontlar için rel="preconnect" kullanın.

2. INP (Interaction to Next Paint) Optimizasyonu

Mart 2024 itibarıyla eski FID (First Input Delay) metriğinin yerini alan INP, yalnızca ilk tıklamayı değil, ziyaretçinin sayfada geçirdiği tüm süre boyunca yaptığı tıklama, dokunma ve klavye etkileşimlerini ölçer. Sayfanın donup donmadığını tespit eder.

INP İyileştirmek İçin Somut Adımlar:

• Uzun JavaScript Görevlerini (Long Tasks) Parçalayın: 50 milisaniyeden uzun süren her JavaScript görevi ana iş parçacığını (Main Thread) kilitler. Ağır döngüleri ve hesaplamaları scheduler.yield() veya requestIdleCallback() kullanarak küçük parçalara bölün.
• Üçüncü Parti Betikleri Denetleyin: Sayfada çalışan Google Tag Manager, canlı destek sohbet kutuları, hotjar veya reklam pikselleri ana iş parçacığını aşırı meşgul eder. Bu araçları gecikmeli (lazy-load) yükleyin veya gerekmedikçe çalıştırmayın.
• Hafif JavaScript Kütüphaneleri Seçin: Ağır jQuery veya devasa UI kütüphaneleri yerine saf (Vanilla) JavaScript ya da Alpine.js gibi ultra hafif alternatiflere yönelin.

3. CLS (Cumulative Layout Shift) Optimizasyonu

Bir makaleyi okurken ya da butona basmak üzereyken son anda yukarıdan bir reklam veya banner açılıp tüm sayfanın aşağı kayması herkesin yaşadığı can sıkıcı bir durumdur. CLS, bu beklenmedik görsel kaymaların toplam puanını hesaplar.

CLS Sıfırlamak İçin Somut Adımlar:

• Tüm Görsellere ve Videolara Boyut Tanımlayın: Her <img> ve <video> etiketine mutlaka width ve height özniteliklerini girin ya da CSS'te aspect-ratio: 16 / 9; gibi en-boy oranları belirleyin. Böylece görsel henüz inmeden önce tarayıcı sayfada gerekli alanı ayırır.
• Dinamik Banner ve Reklamlar İçin Yer Tutucu (Skeleton) Kullanın: Sonradan yüklenecek olan duyurular, çerez uyarıları ve reklam alanları için CSS ile sabit bir minimum yükseklik (min-height) tanımlayın.
• Web Fontlarında Düzen Kaymasını Önleyin: Web fontları yüklenirken sistem fontuyla arasındaki boyut farkından ötürü kayma yaşanmaması için font-display: swap ile birlikte modern font yükleme API'lerini veya font-display: optional seçeneğini kullanın.

Core Web Vitals Nasıl Ölçülür ve İzlenir?

Performans optimizasyonu yaparken iki farklı veri kaynağını ayırt etmek hayati önem taşır:

• Saha Verisi (Field Data - RUM): Google Search Console ve PageSpeed Insights'ta görünen 28 günlük gerçek kullanıcı verisidir. Google sıralamalarında doğrudan dikkate alınan veri budur.
• Laboratuvar Verisi (Lab Data): Lighthouse ve Chrome DevTools ile anlık yapılan testlerdir. Geliştirme ortamında hataları tespit etmek ve hata ayıklamak için mükemmeldir; ancak gerçek kullanıcı koşullarını (farklı cihazlar, zayıf internet bağlantıları) tam yansıtmaz.

Sonuç: Core Web Vitals Bir Süreçtir

Core Web Vitals iyileştirmesi, sitenize bir eklenti kurup unutacağınız tek seferlik bir görev değildir. Yeni bir özellik geliştirirken, kod yazarken ve içerik girerken performans kültürünü benimsemek gerekir. Yeşil skorlara ulaşmış bir web sitesi; daha düşük hemen çıkma oranı (Bounce Rate), daha yüksek ortalama oturum süresi ve daha güçlü Google görünürlüğü ile işletmenize değer katar.