INP Nedir? Core Web Vitals’ta INP’yi İyileştirmenin 7 Yolu

Sayfanız hızlı açılıyor ama bir butona tıkladığınızda yarım saniye hiçbir şey olmuyor mu? İşte INP (Interaction to Next Paint) tam olarak bu gecikmeyi ölçer. Mart 2024’te FID’nin yerini alan INP, bugün Core Web Vitals’ın en çok zorlanılan metriğidir.

INP neyi ölçer?

INP, kullanıcının sayfa üzerindeki tıklama, dokunma ve klavye etkileşimlerinin her birinde, etkileşim anından ekranda bir sonraki görsel güncellemenin çizilmesine kadar geçen süreyi ölçer. Sayfa ömrü boyunca gerçekleşen etkileşimlerin en yavaşlarından biri sayfanın INP değeri olarak raporlanır.

İyi: 200 ms ve altı
İyileştirilmeli: 200 – 500 ms
Kötü: 500 ms üzeri

FID yalnızca ilk etkileşimin bekleme süresine bakıyordu; INP ise tüm etkileşimlerin toplam yanıt süresini değerlendirir. Bu yüzden ağır JavaScript kullanan siteler FID’de yeşil görünürken INP’de kırmızıya düşebilir.

INP nasıl ölçülür?

Gerçek kullanıcı verisi: Google Search Console’daki Core Web Vitals raporu ve PageSpeed Insights’taki CrUX verisi.
Laboratuvar: Chrome DevTools’un Performance panelinde etkileşimleri kaydedip uzun görevleri (long tasks) inceleyin.
Kendi izlemeniz: web-vitals kütüphanesiyle INP’yi analitik aracınıza gönderin ve hangi etkileşimin yavaş olduğunu sayfa bazında görün.

INP’yi iyileştirmenin 7 yolu

1. Uzun görevleri bölün

50 ms’den uzun süren JavaScript görevleri ana iş parçacığını kilitler. Büyük işlemleri parçalara ayırıp aralarda tarayıcıya nefes aldırın; scheduler.yield() veya setTimeout ile görevleri bölmek çoğu zaman tek başına ciddi iyileşme sağlar.

2. Gereksiz JavaScript’i kaldırın

Kullanılmayan kütüphaneler, her sayfada yüklenen ama yalnızca bir sayfada kullanılan bileşenler ve eski polyfill’ler INP’nin sessiz düşmanlarıdır. Kod bölme (code splitting) ve adalar mimarisi (islands) ile yalnızca gereken kodu yükleyin.

3. Üçüncü parti script’leri disipline edin

Canlı destek, ısı haritası, reklam ve pazarlama etiketleri ana iş parçacığında ciddi yer kaplar. Gerçekten ihtiyaç duyulanları tutun, geri kalanını kullanıcı etkileşiminden sonra veya boşta kalma anlarında yükleyin.

4. Olay işleyicilerini hafif tutun

Bir tıklamada yapılan işi ikiye ayırın: kullanıcıya anında görsel geri bildirim verin (buton durumu, yükleniyor göstergesi), ağır hesaplamayı ise bir sonraki kareden sonraya erteleyin.

5. DOM boyutunu küçültün

Binlerce düğümden oluşan sayfalarda her stil değişikliği pahalıdır. Uzun listelerde sanallaştırma (virtualization) kullanın, ekran dışındaki bölümler için content-visibility: auto ile tarayıcının işini azaltın.

6. Yeniden çizimleri (layout thrashing) önleyin

Aynı döngüde DOM’dan ölçüm okuyup hemen ardından stil yazmak, tarayıcıyı tekrar tekrar düzen hesaplamaya zorlar. Okuma ve yazma işlemlerini gruplayın; animasyonlarda transform ve opacity kullanın.

7. Sunucu taraflı render’dan yararlanın

Sayfanın büyük bölümünü sunucuda veya derleme anında HTML olarak üretmek, istemcide çalışması gereken JavaScript miktarını azaltır. Astro ve Next.js gibi modern çatılar bu yaklaşımı varsayılan hale getirir.

Sonuç

INP, kullanıcının sitenizi “hızlı” mı yoksa “hantal” mı algıladığını doğrudan belirler. İyi haber şu ki iyileştirmelerin çoğu büyük bir yeniden yazım gerektirmez; doğru ölçüm ve hedefli müdahalelerle birkaç hafta içinde yeşil skorlara ulaşmak mümkündür.