Core Web Vitals: LCP, FID, CLS Nedir ve Nasıl İyileştirilir?

Core Web Vitals, Google'ın web sayfalarının kullanıcı deneyimi kalitesini ölçmek için belirlediği temel metriklerdir. 2021'den beri Google sıralama algoritmasının bir parçası olan bu metrikler, sayfanızın ne kadar hızlı yüklendiğini, ne kadar çabuk etkileşime girdiğini ve görsel olarak ne kadar kararlı olduğunu ölçer.

LCP — Largest Contentful Paint

LCP, sayfanın görüntülenen alanındaki en büyük içerik öğesinin (görsel, video veya metin bloğu) ne kadar sürede render edildiğini ölçer. Kullanıcının "sayfa yüklendi" hissini en iyi yansıtan metriktir.

LCP Eşik Değerleri

• İyi: 2.5 saniye ve altı
• İyileştirme gerekli: 2.5 – 4.0 saniye
• Kötü: 4.0 saniyenin üzeri

LCP'yi İyileştirme Yolları

• Sunucu yanıt süresini azaltın: TTFB (Time to First Byte) doğrudan LCP'yi etkiler. CDN kullanın, sunucu tarafı önbellekleme uygulayın.
• Render-engelleyici kaynakları ortadan kaldırın: Kritik olmayan CSS ve JS dosyalarını erteleyerek (defer, async) ilk render süresini kısaltın.
• Görselleri optimize edin: WebP/AVIF formatı kullanın, uygun boyutta sunun, loading="lazy" uygulayın.
• LCP öğesini önceden yükleyin: Ana görseli <link rel="preload"> ile önceden getirin.
• Yazı tiplerini optimize edin: font-display: swap kullanın, yazı tiplerini önceden yükleyin.

<!-- LCP görseli için preload -->
<link rel="preload" as="image" href="/hero-image.webp"
      fetchpriority="high" />

<!-- Kritik olmayan CSS'i ertele -->
<link rel="preload" as="style" href="/non-critical.css"
      onload="this.onload=null;this.rel='stylesheet'" />

FID / INP — Etkileşim Yanıt Süresi

FID (First Input Delay), kullanıcının sayfayla ilk etkileşiminden (tıklama, dokunma, tuşa basma) itibaren tarayıcının bu etkileşimi işlemeye başlamasına kadar geçen süreyi ölçer. Mart 2024 itibarıyla FID'nin yerini INP (Interaction to Next Paint) almıştır.

INP, sayfanın ömrü boyunca gerçekleşen tüm etkileşimleri değerlendirir ve en kötü gecikmeyi raporlar — bu sayede FID'den çok daha kapsamlı bir ölçüm sunar.

INP Eşik Değerleri

• İyi: 200 milisaniye ve altı
• İyileştirme gerekli: 200 – 500 milisaniye
• Kötü: 500 milisaniyenin üzeri

INP'yi İyileştirme Yolları

• Uzun görevleri bölün: 50ms'den uzun süren JavaScript görevlerini requestIdleCallback veya scheduler.yield() ile küçük parçalara ayırın.
• Gereksiz JavaScript'i azaltın: Kullanılmayan kodu kaldırın, dinamik içe aktarma (import()) ile kod bölme uygulayın.
• Ana thread'i meşgul etmeyin: Ağır hesaplamaları Web Worker'lara taşıyın.
• Üçüncü parti scriptleri erteleyin: Analitik, reklam gibi scriptleri defer veya async ile yükleyin.

CLS — Cumulative Layout Shift

CLS, sayfanın görsel kararlılığını ölçer. Sayfa yüklenirken içerik öğelerinin beklenmedik şekilde kayması kullanıcıyı rahatsız eder ve yanlış tıklamalara neden olur. CLS, bu kaymaların toplamını hesaplar.

CLS Eşik Değerleri

• İyi: 0.1 ve altı
• İyileştirme gerekli: 0.1 – 0.25
• Kötü: 0.25'in üzeri

CLS'nin Yaygın Nedenleri ve Çözümleri

• Boyutsuz görseller: Her <img> ve <video> elemanına width ve height nitelikleri ekleyin veya CSS aspect-ratio kullanın.
• Geç yüklenen reklamlar: Reklam alanları için sabit boyutlu yer tutucu (placeholder) oluşturun.
• Dinamik eklenen içerik: Kullanıcı etkileşimi olmadan DOM'a öğe eklemeyin. Eklenecek alanlar için önceden yer ayırın.
• Web yazı tipleri: font-display: optional veya swap kullanarak FOIT (Flash of Invisible Text) sorununu önleyin.
• Geç yüklenen üst bilgiler/banner'lar: Sayfanın üst kısmına dinamik içerik eklenmesi büyük CLS kaymalarına neden olur.

/* Görseller için aspect-ratio ile yer ayırma */
img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* Reklam alanı için yer tutucu */
.ad-slot {
  min-height: 250px;
  background: #f3f4f6;
}

Core Web Vitals Ölçme Araçları

• Google PageSpeed Insights: Hem laboratuvar hem de saha verilerini gösterir
• Google Search Console: Core Web Vitals raporu ile site genelindeki durumu izleyin
• Chrome DevTools Performance paneli: Detaylı profilleme
• web-vitals kütüphanesi: JavaScript ile gerçek kullanıcı verisi toplama
• Lighthouse: Chrome DevTools veya CI/CD entegrasyonu