INP Metriği Nedir? FID'in Yerine Geçen Yeni Core Web Vital'ın Anatomisi

FID''den INP''ye Geçiş

FID (First Input Delay) sadece ilk etkileşimin gecikmesini ölçüyordu ve sadece tarayıcının meşgul olma süresini kapsıyordu. Gerçek kullanıcı deneyimini tam temsil etmiyordu. INP sayfa yaşam döngüsü boyunca tüm etkileşimlere bakar ve en kötü (genelde 98. yüzdelik) değeri alır.

INP Tanımı ve Hedefler

Google, mobil CrUX raporunda 75. yüzdelik kullanıcı için iyi aralığın tutturulmasını sıralama sinyali olarak kullanıyor.

INP Nasıl Hesaplanır?

Bir etkileşim üç aşamadan oluşur:

1. Input delay: Olay ateşlendiği an + ana thread meşgulse bekleme
2. Processing time: Event handler''ın çalışma süresi
3. Presentation delay: Browser''ın render edip ekrana çizme süresi

Üçünün toplamı o etkileşimin INP''si. Sayfa boyunca yapılan tüm etkileşimlerin en kötüsü (veya 98. yüzdelik) sayfanın INP''si.

INP''yi Yükselten Örüntüler

• Uzun süren event handler (ör. form submit''te senkron validation 400 ms)
• Event handler içinde büyük state güncellemeleri (React''te re-render fırtınası)
• Üçüncü parti script''lerin ana thread''i meşgul etmesi
• Dev toolu açıkken console.log bombardımanı (gerçek kullanıcıya olmaz ama dev''e yanıltıcı)
• Ağır DOM manipülasyonu (büyük listelerde forEach)
• Aynı anda çalışan timeout''lar ve animasyonlar

9 Adımlık INP Optimizasyon Stratejisi

1. Uzun Task''leri Böl

50 ms üstü bir JS task "long task"tır. scheduler.yield() veya setTimeout(fn, 0) ile böl. Yeni web platform API''si:

async function bigWork() {
  for (const item of millionItems) {
    await scheduler.yield();
    process(item);
  }
}

2. Event Handler''ı Defer Et

Anlık render gerekmeyen işler requestIdleCallback''e atılır. Örn. analitik event push''u.

button.addEventListener(''click'', () => {
  updateUI();                          // hemen yap
  requestIdleCallback(() => {
    sendAnalytics();                   // boş zamanda
  });
});

3. React''te startTransition

React 18+ ile urgent olmayan state güncellemeleri düşük öncelikli olarak işaretlenebilir:

import {startTransition} from ''react'';
button.onClick = () => {
  setTabActive(id);                    // urgent
  startTransition(() => {
    setFilteredList(expensiveFilter());// non-urgent
  });
};

4. Debounce ve Throttle

Arama kutusunda her tuşta fetch atma; 300 ms debounce uygula. Kaydırma olayında throttle 16 ms ile 60 fps''te sınırla.

5. Ağır Hesapları Web Worker''a Taşı

Hash hesaplama, filtreleme, parse — ana thread''den worker''a:

const worker = new Worker(''/work.js'');
worker.postMessage(data);
worker.onmessage = e => updateUI(e.data);

6. Üçüncü Parti Script''leri Partytown''a Taşı

Google Analytics, Facebook Pixel, Hotjar gibi araçları web worker''da çalıştır. Ana thread rahat nefes alır. INP''de 200+ ms''lik kazanım sık görülür.

7. Virtual Scrolling

1.000 satırlık tablo yerine sadece görünen 30 satırı render et. react-virtuoso, tanstack-virtual gibi kütüphaneler standart.

8. CSS content-visibility

.kart { content-visibility: auto; contain-intrinsic-size: 300px; }

Görünmeyen elemanları render sırasında atlar, INP''ye ve LCP''ye katkı sağlar.

9. Yield Pattern: isInputPending()

Ana thread''de uzun bir iş yaparken kullanıcı etkileşimini algılayıp durabilirsiniz:

while (moreWork) {
  if (navigator.scheduling.isInputPending()) {
    await scheduler.yield();
  }
  doBatch();
}

Ölçüm: INP''yi Nerede Görürsünüz?

• Chrome DevTools Performance paneli: etkileşim bazlı timing
• web-vitals.js kütüphanesi: gerçek kullanıcılardan RUM verisi toplar
• PageSpeed Insights: CrUX verisiyle 75. yüzdelik INP
• Search Console → Core Web Vitals: sayfa grupları bazlı
• Kendi RUM dashboard''u — sayfa + cihaz + bölge bazlı

React, Vue, Svelte Özel Notlar

React

Concurrent features (Suspense, transitions) tasarım gereği INP dostu. Redux ile büyük store''larda memoization kritik. useMemo, useCallback disiplini.

Vue

Reactivity system event handler''larda iyi, ama v-for büyük listelerde tracking yükler. v-memo direktifi ile cache''le.

Svelte

Derleme zamanı avantajı INP''de kendini gösterir. Ancak store güncellemesi yanlış kurulmuşsa yine sorun çıkar.

Sık Yapılan Hatalar

1. Lighthouse''ın masaüstü skoruna güvenip mobil sahada iyi sanmak
2. FID iyi diye INP''ye bakmamak
3. Üçüncü parti script''leri defer ile "hallettim" sanmak (tag manager hâlâ ana thread''de)
4. CSS animasyonu JS ile yapmak (CSS keyframes kullan)
5. Bir sayfa iyi diye tüm sitenin iyi olduğunu varsaymak

Sıkça Sorulan Sorular

INP hangi etkileşimleri sayar?

Tıklama (pointerdown/up + click), tuşa basma (keydown/up), dokunma (touchstart). Scroll ve hover INP''ye girmez.

RUM olmadan INP ölçebilir miyim?

Lab olarak Lighthouse Throttling ile yaklaşık değer alırsınız, ancak gerçek kullanıcı INP''si için RUM şart.

Mobil ile masaüstü INP aynı mı?

Genelde mobil 2-3 kat daha yüksek — düşük güçlü CPU''lar etkiler. Google''ın ilgilendiği mobil değerlerdir.

INP kötüyse SEO''ya etkisi büyük mü?

Sıralamaya doğrudan katkı küçüktür; ancak kötü UX sonucu artan bounce + düşük dwell time uzun vadede sıralamayı etkiler.

Sonraki Adım

Sitenizin INP denetimi için ücretsiz ön inceleme. İlgili: Core Web Vitals, Hız Vaka Çalışması.