Core Web Vitals Devrimi: INP (Interaction to Next Paint) Optimizasyonu ve LCP İyileştirme Stratejileri

Giriş: Google'ın Yeni Metrikleri ve SEO'ya Etkisi

Google, geçtiğimiz yıl FID (First Input Delay) metriğini emekliye ayırarak yerine çok daha kapsamlı bir ölçüm olan INP (Interaction to Next Paint) metriğini getirdi. Artık sadece sayfanın ne kadar hızlı yüklendiği değil, kullanıcının etkileşimlerine ne kadar hızlı yanıt verdiği de sıralamaları doğrudan etkiliyor. Bu rehberde, modern web projelerinde LCP ve INP değerlerini nasıl optimize edebileceğimizi teknik detaylarla ele alacağız.

1. LCP (Largest Contentful Paint) İyileştirme Teknikleri

LCP, sayfanın en büyük görsel veya metin bloğunun görüntülenme süresidir. Bunu 2.5 saniyenin altında tutmak için şu adımları izleyin:

• Resource Prioritization: Ana görselinize fetchpriority="high" niteliğini ekleyin.
• Lazy Loading: LCP elemanında (genellikle hero image) loading="lazy" kullanmaktan kaçının.
• CDN ve Cache: Görselleri WebP veya AVIF formatına çevirip Cloudflare üzerinden sunun.

2. INP (Interaction to Next Paint) Optimizasyonu

INP, kullanıcının tıklama, dokunma veya klavye etkileşiminden sonra tarayıcının görsel güncellemeyi yapana kadar geçen süreyi ölçer. Genellikle 'Main Thread'in (Ana İş Parçacığı) yoğunluğundan kaynaklanır.

• Uzun Görevleri (Long Tasks) Bölün: setTimeout veya scheduler.yield() kullanarak ana iş parçacığını serbest bırakın.
• Framework Giderlerini Azaltın: Özellikle React projelerinde useMemo ve useCallback ile gereksiz render işlemlerini engelleyin.
• Üçüncü Parti Scriptler: GTM (Google Tag Manager) üzerinden çalışan ağırlıklı scriptleri requestIdleCallback ile erteleyin.

Teknik Örnek: Long Task Analizi

Chrome DevTools'ta 'Performance' sekmesini açarak 'Long Tasks' filtrelemesi yapın. Eğer 50ms üzerinde bir blok görüyorsanız, bu işlem kullanıcı etkileşimini doğrudan sekteye uğratıyor demektir.

// Long task'ı bölmek için basit bir örnek
async function performHeavyTask() {
  for (const item of largeDataset) {
    process(item);
    if (shouldYield()) {
      await new Promise(resolve => setTimeout(resolve, 0));
    }
  }
}

Bu metrikler sadece birer sayı değil; kullanıcı deneyimini doğrudan etkileyen, dönüşüm oranlarını (CR) artıran kritik başarı faktörleridir. Sizin projelerinizde INP değerleriniz ne durumda? Tartışalım.

Giriş: Google'ın Yeni Metrikleri ve SEO'ya Etkisi

Google, geçtiğimiz yıl FID (First Input Delay) metriğini emekliye ayırarak yerine çok daha kapsamlı bir ölçüm olan INP (Interaction to Next Paint) metriğini getirdi. Artık sadece sayfanın ne kadar hızlı yüklendiği değil, kullanıcının etkileşimlerine ne kadar hızlı yanıt verdiği de sıralamaları doğrudan etkiliyor. Bu rehberde, modern web projelerinde LCP ve INP değerlerini nasıl optimize edebileceğimizi teknik detaylarla ele alacağız.

1. LCP (Largest Contentful Paint) İyileştirme Teknikleri

LCP, sayfanın en büyük görsel veya metin bloğunun görüntülenme süresidir. Bunu 2.5 saniyenin altında tutmak için şu adımları izleyin:

• Resource Prioritization: Ana görselinize fetchpriority="high" niteliğini ekleyin.
• Lazy Loading: LCP elemanında (genellikle hero image) loading="lazy" kullanmaktan kaçının.
• CDN ve Cache: Görselleri WebP veya AVIF formatına çevirip Cloudflare üzerinden sunun.

2. INP (Interaction to Next Paint) Optimizasyonu

INP, kullanıcının tıklama, dokunma veya klavye etkileşiminden sonra tarayıcının görsel güncellemeyi yapana kadar geçen süreyi ölçer. Genellikle 'Main Thread'in (Ana İş Parçacığı) yoğunluğundan kaynaklanır.

• Uzun Görevleri (Long Tasks) Bölün: setTimeout veya scheduler.yield() kullanarak ana iş parçacığını serbest bırakın.
• Framework Giderlerini Azaltın: Özellikle React projelerinde useMemo ve useCallback ile gereksiz render işlemlerini engelleyin.
• Üçüncü Parti Scriptler: GTM (Google Tag Manager) üzerinden çalışan ağırlıklı scriptleri requestIdleCallback ile erteleyin.

Teknik Örnek: Long Task Analizi

Chrome DevTools'ta 'Performance' sekmesini açarak 'Long Tasks' filtrelemesi yapın. Eğer 50ms üzerinde bir blok görüyorsanız, bu işlem kullanıcı etkileşimini doğrudan sekteye uğratıyor demektir.

// Long task'ı bölmek için basit bir örnek
async function performHeavyTask() {
  for (const item of largeDataset) {
    process(item);
    if (shouldYield()) {
      await new Promise(resolve => setTimeout(resolve, 0));
    }
  }
}

Bu metrikler sadece birer sayı değil; kullanıcı deneyimini doğrudan etkileyen, dönüşüm oranlarını (CR) artıran kritik başarı faktörleridir. Sizin projelerinizde INP değerleriniz ne durumda? Tartışalım.

Harika bir özet olmuş. Özellikle React projelerinde INP değerini düşürmek için concurrent rendering (React 18+) kullanmak hayat kurtarıcı oluyor. Ben projelerimde useTransition kullanarak ağır hesaplamaları düşük öncelikli hale getiriyorum, bu sayede kullanıcı arayüzü donmadan tepki verebiliyor. Ayrıca bundle size optimizasyonu için code splitting yapmayan arkadaşlar mutlaka Next.js tarafındaki dynamic imports yapısını incelemeli.

Katılıyorum. Bir DevOps perspektifinden eklemek gerekirse, LCP değerini iyileştirmenin en hızlı yolu sadece kod tarafı değil, sunucu tarafındaki TTFB (Time to First Byte) değerini düşürmektir. Eğer sunucunuz yavaş yanıt veriyorsa, frontend tarafında ne yaparsanız yapın LCP geç tetiklenir. Cache stratejisi olarak Edge Side Includes (ESI) veya Cloudflare Workers üzerinde KV Store kullanarak statik içerikleri kullanıcıya en yakın noktadan sunmak, LCP skorlarını %30-40 civarında iyileştirebiliyor.