Interaction to Next Paint (INP) Nedir?

INP, FID'den çok daha katı — FID sadece ilk tıklamayı ölçüyordu, INP TÜM tıklamalar arasındaki 'en kötü' P98'i alıyor. Bir e-ticaret sitesinde 50 ürün filtresinin biri yavaş olsa bile INP düşük çıkıyor.

INP'yi bozan 5 ana faktör: 1. Ağır 3rd-party JavaScript (Google Tag Manager, Hotjar, Mixpanel, Facebook Pixel — birden çok script main thread'i bloke eder) 2. Büyük React component'leri (state update sırasında 100+ child re-render) 3. Synchronous event handler (uzun for loop, big array filter — main thread blocks) 4. Layout shift sırasında click — kullanıcı bir yeri tıklıyor, sayfa kayıyor, button başka yere gidiyor 5. Eski jQuery + DOM manipulation (vanilla JS bunlardan daha hızlı 2026'da)

INP optimizasyon teknikleri: 1. requestIdleCallback ile ağır işleri 'browser boş anına' ertele 2. Web Workers — ağır hesaplamayı arka thread'e at 3. useDeferredValue + useTransition (React 18) — non-blocking state updates 4. Code splitting + lazy load — 3rd party scripts idle-time mount 5. Reduce JavaScript bundle size — tree shaking, dynamic imports 6. Debounce/throttle — input event'leri 7. CSS containment — layout/paint isolation

DevPixel projelerinde 3rd party script yönetimi: Google Tag Manager + Meta Pixel + Trustpilot widget'ları DeferredChrome komponentine sarılmış, requestIdleCallback ile yükleniyor. Sonuç: INP <100ms ortalama.