INP değeriniz kötü. Yavaş etkileşimleri nasıl bulur ve düzeltirsiniz?

INP (Interaction to Next Paint), Mart 2024'te FID'in yerini aldı ve sayfadaki tüm tıklama, dokunma ve tuş etkileşimlerinden en kötülerine yakın olanını ölçer. İyi değer 200 ms veya altıdır. Her etkileşim üç parçadan oluşur:

1. Input delay: Ana thread başka bir işle meşgul olduğu için handler'ın başlayamaması.
2. Processing duration: Event handler'ların çalışma süresi.
3. Presentation delay: Handler bittikten sonra style/layout/paint süresi.

Bulma

• RUM: web-vitals attribution build'i ile onINP hangi eleman, hangi etkileşim türü ve hangi parçanın uzun sürdüğünü verir. Long Animation Frames (LoAF) API hangi script'in suçlu olduğunu gösterir.
• DevTools Performance panelinde CPU throttling (4x-6x) ile etkileşimi kaydedin; "Interactions" izinde uzun görevleri inceleyin.

Düzeltme teknikleri

• Ana thread'e nefes aldırın: Görsel güncellemeyi önce yapın, ağır işi sonraya bırakın.

const yieldToMain = () =>
  globalThis.scheduler?.yield
    ? scheduler.yield()
    : new Promise((r) => setTimeout(r, 0));

button.addEventListener("click", async () => {
  showSpinner();                     // hemen görsel geri bildirim
  await yieldToMain();               // tarayıcı önce boyasın
  runHeavyFiltering();               // sonra ağır iş
  sendAnalytics();                   // kritik olmayan iş en sona
});

• Uzun görevleri (>50 ms) parçalara bölün; çok ağır hesaplamayı Web Worker'a taşıyın.
• React'te pahalı güncellemeleri startTransition/useDeferredValue ile düşük önceliğe alın; gereksiz render'ları azaltın (React Compiler, memo).
• Büyük DOM'u küçültün (virtualization), layout thrashing'i önleyin (okuma ve yazmayı karıştırmayın), content-visibility: auto kullanın.
• Üçüncü parti script'leri (chat widget, tag manager) erteleyin veya kaldırın.
• Hydration sırasında yapılan etkileşimler de INP'yi bozar: daha az JS gönderin, Server Components ve selective hydration'dan yararlanın.

scheduler.yield() Chromium (129+) ve Firefox (142+) tarayıcılarda vardır; Safari'de henüz yoktur, bu yüzden setTimeout fallback'i kullanılır.