INP (Interaction to Next Paint), kullanıcının bir etkileşiminden sonra ekranda görsel güncellemenin ne kadar sürede belirdiğini ölçer. 200 ms altı "iyi", 500 ms üstü "kötü" kabul edilir.
FID yalnızca ilk etkileşimi ölçer; INP sayfadaki tüm etkileşimleri değerlendirir. Bu yüzden çoğu sitede FID yeşilken INP kırmızı çıkar.
Neden yüksek çıkar
INP'nin üç bileşeni var: giriş gecikmesi, işleme süresi ve sunum gecikmesi. Pratikte suçlu neredeyse her zaman ana iş parçacığını (main thread) uzun süre meşgul eden JavaScript'tir.
Dokuz adım
1. Uzun görevleri bölün
50 ms'yi aşan her görev bir risktir. Ağır işleri scheduler.yield() ile ya da küçük parçalara bölerek ana iş parçacığını serbest bırakın.
2. Üçüncü taraf scriptleri geciktirin
Chat widget'ı, ısı haritası, A/B test aracı gibi scriptlerin çoğu ilk etkileşimden sonra yüklenebilir. Kritik olmayanları defer ile yükleyin ya da etkileşim sonrasına bırakın.
3. Etiket yöneticisini denetleyin
Google Tag Manager içinde biriken eski etiketler, INP'yi yükselten en sık sebeplerden. Kullanılmayan etiketleri temizleyin.
4. Gereksiz yeniden render'ları azaltın
React tarafında bağlam (context) değişimleri ağaçtaki tüm bileşenleri yeniden çizebilir. Durumu (state) mümkün olduğunca yaprak bileşenlere yakın tutun.
5. Sunucu bileşenlerini kullanın
Next.js App Router'da veri çeken kodu sunucu bileşenlerinde tutmak, istemciye giden JavaScript miktarını doğrudan azaltır.
6. Ağır bileşenleri geç yükleyin
Harita, grafik kütüphanesi, zengin metin editörü gibi bileşenler yalnızca görünür olduklarında yüklenmeli.
7. Girişleri (input) kontrolsüz bırakmayı düşünün
Her tuş vuruşunda tüm formu yeniden çizen kontrollü bileşenler, uzun formlarda ciddi gecikme yaratır.
8. CSS animasyonlarını tercih edin
Düzen (layout) tetikleyen animasyonlar yerine transform ve opacity kullanın; bunlar birleştirici (compositor) katmanda çalışır.
9. Gerçek kullanıcı verisine bakın
Lighthouse'un laboratuvar verisi INP'yi güvenilir biçimde ölçmez. CrUX ve web-vitals kütüphanesiyle sahadan veri toplayın.
Ölçüm döngüsü
Bir değişiklik yaptıktan sonra 28 günlük CrUX penceresinin güncellenmesini beklemek gerekir. Bu yüzden kendi ölçümünüzü kurun: web-vitals ile INP değerlerini toplayın, en yavaş etkileşimlerin hangi bileşende gerçekleştiğini kaydedin.
Bu döngüyü kurmadan yapılan performans çalışması tahmine dayanır ve genellikle yanlış yeri hızlandırmakla biter.