INP

Eş anlamlılar: Interaction to Next Paint

INP (Interaction to Next Paint), kullanıcı etkileşimine sayfanın yanıt verme hızını ölçen Core Web Vitals metrikidir. Mart 2024'te FID'yi değiştirdi. İyi skor 200ms altıdır. Yavaş JavaScript, uzun görevler INP'yi kötüleştirir.

INP Nedir?

INP (Interaction to Next Paint — Etkileşimden Sonraki Çizime Kadar Geçen Süre), kullanıcının sayfa ile etkileşim (tıklama, dokunma, klavye) sonrasında sayfanın görsel yanıt verme süresini ölçen metriktir. Mart 2024'te Google Core Web Vitals kapsamında FID'nin (First Input Delay) yerini aldı. Tüm etkileşimleri değerlendirir, sadece ilk girişi değil.

Google'ın INP Hedefleri

  • İyi: 200ms altı
  • Geliştirilmesi gerek: 200-500ms
  • Kötü: 500ms üzeri

INP vs FID

  • FID: Sadece ilk etkileşim, input delay'i ölçüyordu
  • INP: Tüm etkileşimler, etkileşim süresinin tamamı (input delay + processing + paint)
  • INP daha gerçekçi kullanıcı deneyimi ölçümü

INP'yi Yavaşlatan Nedenler

  • Uzun JavaScript görevleri (long tasks > 50ms)
  • Ağır event handler'lar
  • Gereksiz re-render (React/Vue)
  • Büyük DOM boyutu
  • Third-party script'ler (analytics, ads)
  • Main thread blocking
  • Synchronous XHR

INP İyileştirme Yöntemleri

1. JavaScript Kodu Bölme

  • Uzun görevleri requestIdleCallback ile böl
  • scheduler.postTask() API (Chrome)
  • setTimeout(fn, 0) ile yield

2. Debouncing ve Throttling

Sürekli tetiklenen event'leri sınırla (scroll, resize, input):

const debounced = debounce(fn, 150);
input.addEventListener('input', debounced);

3. Web Worker

Ağır hesaplamaları main thread'den çıkar:

const worker = new Worker('heavy.js');
worker.postMessage(data);

4. React / Next.js Optimizasyonu

  • useMemo, useCallback ile re-render önle
  • React 18 useTransition, useDeferredValue
  • Component code splitting (React.lazy)
  • Server Components (Next.js 13+)

5. Third-Party Script Yönetimi

  • async/defer kullan
  • Next.js Script component strategy="afterInteractive"
  • Partytown ile worker'a taşı
  • Gereksiz olanları kaldır

6. CSS Containment

.card { contain: content; }

Tarayıcıya alt ağacın bağımsız olduğunu belirtir — re-render ve reflow hızlanır.

INP Ölçme

  • PageSpeed Insights (field data)
  • Chrome DevTools Performance panel
  • Web Vitals Chrome eklentisi
  • CrUX Dashboard
  • web-vitals JavaScript library (RUM)

Long Task Detection

new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.duration > 50) {
      console.warn('Long task:', entry);
    }
  }
}).observe({ entryTypes: ['longtask'] });

INP ve Mobile

Mobil cihazların CPU'su masaüstünden zayıftır — mobilde INP daha kritik. Testlerde mobile CPU throttle aktif olmalı.

WordPress INP Çözümleri

  • LSCache lazy-load JavaScript
  • Asset CleanUp ile gereksiz script'leri kaldır
  • WP Rocket delay JS
  • Perfmatters gereksiz özellikleri devre dışı bırak

MeoHost INP Optimizasyonu

MeoHost hosting paketlerinde LSCache + JS delay + third-party script deferral özellikleri otomatik aktiftir. WordPress siteleri için INP skoru genellikle 100-180ms bandındadır.

İlgili Terimler