Core Web Vitals: LCP ve INP Metriklerini İyileştirme Rehberi

1. Largest Contentful Paint (LCP) Neden Gecikir?

LCP, kullanıcının ekranında görünen en büyük içerik öğesinin (genellikle ana başlık bloğu veya hero görseli) tam olarak çizilme süresini ölçer. İdeal bir deneyimde bu sürenin 2.5 saniyenin, kurumsal yüksek performans hedeflerinde ise 1.2 saniyenin altında olması gerekir.

En yaygın LCP gecikme nedenleri; sunucu ilk yanıt süresinin (TTFB) yüksek olması, render bloklayan harici CSS/JS dosyaları ve geç keşfedilen web fontlarıdır.

• Kritik fontlar için <link rel='preconnect'> kullanımını standart hale getirin
• İlk ekranda (above-the-fold) yer alan bileşenlerde istemci taraflı gecikmeli render yerine doğrudan HTML çıktısı üretin
• Nginx katmanında Brotli veya Gzip sıkıştırmasını etkinleştirin

2. FID Yerine Gelen INP (Interaction to Next Paint) Dönemi

Interaction to Next Paint (INP), yalnızca ilk tıklamayı değil, kullanıcının sayfa açık kaldığı süre boyunca yaptığı tüm tıklama, dokunma ve klavye etkileşimlerinin görsel geri bildirim süresini ölçer.

Uzun süren görevleri (Long Tasks) küçük parçalara bölmek ve gereksiz React yeniden render'larını önlemek INP skorunu doğrudan iyileştirir.

// Uzun süren işlemleri tarayıcı boşta kaldığında çalıştırma
export function runWhenIdle(task: () => void) {
  if ("requestIdleCallback" in window) {
    window.requestIdleCallback(() => task(), { timeout: 1000 });
  } else {
    setTimeout(task, 1);
  }
}