Core Web Vitals 2024: INP Metriği ve Gerçek Dünya Optimizasyonları

Mart 2024'te Google, FID (First Input Delay) metriğini resmi olarak INP (Interaction to Next Paint) ile değiştirdi. Bu değişiklik, Core Web Vitals'ı ölçme ve optimize etme şeklimizi köklü biçimde etkiliyor.

INP Nedir ve Neden Önemli?

INP, kullanıcının sayfayla yaptığı tüm etkileşimlerin (tıklama, klavye, dokunma) yanıt sürelerini ölçer ve en kötü %95'lik dilimi raporlar. FID yalnızca ilk etkileşimi ölçüyordu — INP ise tüm oturumu kapsar.

INP'yi Kötüleştiren Başlıca Nedenler

• Uzun JavaScript görevleri: Ana thread'i 50ms'den fazla bloke eden her görev INP'yi artırır
• Gereksiz re-render'lar: React'ta state güncellemeleri tüm component tree'yi yeniden render edebilir
• Senkron DOM manipülasyonu: Layout thrashing — okuma ve yazma işlemlerinin karışması
• Ağır event handler'lar: Click handler içinde senkron hesaplama

Uzun Görevleri Parçalama

// Kötü: Ana thread'i bloke ediyor
function processLargeArray(items) {
  return items.map(item => heavyComputation(item));
}

// İyi: scheduler.yield() ile parçalara böl
async function processLargeArray(items) {
  const results = [];
  for (const item of items) {
    results.push(heavyComputation(item));
    // Her iterasyonda browser'a nefes aldır
    if (results.length % 50 === 0) {
      await scheduler.yield();
    }
  }
  return results;
}

React'ta INP Optimizasyonu

import { useTransition, useDeferredValue } from 'react';

function SearchResults({ query }) {
  const [isPending, startTransition] = useTransition();
  const [results, setResults] = useState([]);

  function handleSearch(value) {
    // Acil: input güncelleme
    setInputValue(value);
    // Ertelenebilir: ağır filtreleme
    startTransition(() => {
      setResults(filterItems(value));
    });
  }

  return (
    <div style={{ opacity: isPending ? 0.7 : 1 }}>
      {results.map(r => <ResultItem key={r.id} {...r} />)}
    </div>
  );
}

Layout Thrashing'i Önleme

// Kötü: Her iterasyonda layout hesaplanıyor
elements.forEach(el => {
  const height = el.offsetHeight; // okuma → layout tetikler
  el.style.height = height + 10 + 'px'; // yazma → layout geçersiz kılar
});

// İyi: Önce hepsini oku, sonra hepsini yaz
const heights = elements.map(el => el.offsetHeight); // toplu okuma
elements.forEach((el, i) => {
  el.style.height = heights[i] + 10 + 'px'; // toplu yazma
});

LCP İçin Kritik: fetchpriority

2024'te tarayıcı desteği olgunlaştı. Hero image'ınıza fetchpriority="high" eklemek LCP'yi ortalama %20 iyileştiriyor.

<img
  src="/hero.webp"
  fetchpriority="high"
  loading="eager"
  decoding="async"
  alt="Hero"
/>

CLS İçin: Boyut Rezervasyonu

• Tüm img ve video elementlerine width ve height attribute'u ekleyin
• Font yüklenirken font-display: optional veya size-adjust kullanın
• Dinamik içerik için min-height ile alan rezerve edin

Sonuç

INP, kullanıcı deneyimini FID'den çok daha gerçekçi ölçüyor. Özellikle React uygulamalarında useTransition, useDeferredValue ve scheduler.yield() kombinasyonu INP skorunuzu dramatik biçimde iyileştirebilir. Chrome DevTools'un "Performance" sekmesindeki "Interactions" bölümü ile kendi sitenizi analiz etmeye hemen başlayabilirsiniz.