Core Web Vitals Nedir? LCP, FID ve CLS Optimizasyon Rehberi

Google, 2021'den bu yana sayfa deneyimi sinyallerini sıralama faktörü olarak kullanıyor ve Core Web Vitals bu sinyallerin merkezinde yer alıyor. LCP, FID (artık INP) ve CLS metrikleri sitenizin gerçek kullanıcı deneyimini ölçer. Bu rehberde her metriğin ne anlama geldiğini, nasıl ölçüleceğini ve somut optimizasyon adımlarını detaylı olarak ele alıyoruz.

Core Web Vitals Nedir?

Core Web Vitals, Google'ın web sayfalarının kullanıcı deneyimini değerlendirmek için belirlediği üç temel metriktir. Bu metrikler gerçek kullanıcı verilerine (CrUX — Chrome User Experience Report) dayanır ve Google Search Console'da raporlanır.

2024 itibarıyla FID (First Input Delay) yerini INP (Interaction to Next Paint) metriğine bırakmıştır. INP, sayfadaki tüm etkileşimlerin yanıt süresini ölçerek daha kapsamlı bir değerlendirme sunar. Üç metriğin tamamında "iyi" eşik değerlerini karşılamak SEO açısından kritiktir.

LCP (Largest Contentful Paint) Optimizasyonu

LCP, sayfadaki en büyük içerik öğesinin (genellikle hero görseli veya başlık metni) görünür hale gelme süresini ölçer. İyi değer 2,5 saniyenin altıdır. LCP'yi etkileyen dört ana faktör: sunucu yanıt süresi (TTFB), kaynak yükleme gecikmesi, kaynak yükleme süresi ve istemci tarafı render gecikmesidir.

LCP İyileştirme Adımları

TTFB'yi düşürmek için CDN kullanın ve sunucu tarafı cache'i etkinleştirin. Hero görseli için fetchpriority="high" ve preload kullanarak tarayıcının bu kaynağı öncelikli yüklemesini sağlayın. Render-blocking CSS ve JavaScript'i minimize edin — kritik CSS'i inline olarak ekleyin, geri kalanını asenkron yükleyin.

INP (Interaction to Next Paint) Optimizasyonu

INP, kullanıcının sayfayla etkileşime girdiğinde (tıklama, dokunma, klavye) tarayıcının görsel güncellemeyi ne kadar sürede yaptığını ölçer. 200 milisaniyenin altı iyi kabul edilir. Uzun süren JavaScript görevleri INP'nin en büyük düşmanıdır.

Ana thread'i bloke eden uzun görevleri requestIdleCallback veya scheduler.yield() ile parçalayın. Üçüncü parti script'leri (analytics, chat widget'ları) erteleyerek ana thread yükünü azaltın. JavaScript performans optimizasyonu rehberimiz bu konuda detaylı bilgi sunar.

CLS (Cumulative Layout Shift) Optimizasyonu

CLS, sayfa yüklenirken içerik öğelerinin beklenmedik şekilde kaymasını ölçer. 0,1'in altı iyi kabul edilir. Boyutu belirtilmemiş görseller, geç yüklenen reklamlar ve dinamik olarak eklenen içerikler CLS'nin başlıca nedenleridir.

Tüm görsellere ve video öğelerine width ve height attribute'ları ekleyin. CSS aspect-ratio özelliğini kullanarak responsive görsellerde yer ayırın. Font yükleme sırasında font-display: swap ile layout shift'i minimize edin. Reklam alanları için sabit boyutlu container'lar tanımlayın.

Core Web Vitals Ölçüm Araçları

PageSpeed Insights hem lab hem saha verilerini gösterir. Chrome DevTools Performance paneli detaylı analiz sunar. web.dev kaynağı her metrik için kapsamlı optimizasyon rehberleri içerir. CrUX Dashboard ile zaman içindeki değişimleri takip edebilirsiniz.

Sıkça Sorulan Sorular

Core Web Vitals SEO sıralamasını ne kadar etkiler?

Core Web Vitals, Google'ın yüzlerce sıralama faktöründen biridir. İçerik kalitesi ve backlink'ler hâlâ daha ağırlıklıdır. Ancak benzer içerik kalitesine sahip iki sayfa arasında Core Web Vitals fark yaratabilir. Ayrıca iyi metrikler kullanıcı deneyimini doğrudan iyileştirir.

FID yerine INP mi kullanılıyor?

Evet, Mart 2024 itibarıyla INP resmi olarak FID'nin yerini almıştır. INP, sadece ilk etkileşimi değil sayfadaki tüm etkileşimleri değerlendirdiği için daha kapsamlı bir metriktir.

Hosting seçimi Core Web Vitals'ı etkiler mi?

Evet, özellikle LCP metriğini doğrudan etkiler. Sunucu yanıt süresi (TTFB) LCP'nin ilk bileşenidir. Hızlı bir hosting altyapısı ve doğru sunucu lokasyonu TTFB'yi düşürerek LCP'yi iyileştirir.

Core Web Vitals optimizasyonunu tamamladıktan sonra PageSpeed puanı artırma ve görsel optimizasyonu rehberlerimizi de incelemenizi öneririz.