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'in aksine INP sadece ilk etkileşimi değil, 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() veya 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ı — bunların çoğu ilk etkileşimden sonra yüklenebilir. Kritik olmayan her script defer veya etkileşim sonrası yüklemeye alınmalı.
3. Etiket yöneticisini denetleyin
Google Tag Manager içinde biriken eski etiketler INP'nin en sık görülen sebeplerinden. 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 derleyici (compositor) üzerinde çalışır.
9. Gerçek kullanıcı verisine bakın
Lighthouse laboratuvar verisi INP'yi güvenilir ö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ü kurulmadan yapılan performans çalışması tahmine dayanır — ve genellikle yanlış yeri optimize etmekle sonuçlanır.