Interaction to Next Paint (INP)

Interaction to Next Paint (INP) Nedir?

INP, web sayfalarının kullanıcı etkileşimlerine ne kadar hızlı görsel geri bildirim verebildiğini ölçen bir Core Web Vitals metriğidir. Bir kullanıcı etkileşiminden sonra tarayıcının sonraki çerçeveyi ne kadar sürede boyadığını temsil eder ve kullanıcı deneyimini iyileştirmek için kullanılır. İdeal olarak INP değeri 200 milisaniyenin altında olmalıdır.

INP Nasıl Çalışır?

INP, kullanıcı etkileşiminden sonra tarayıcının yeni bir çerçeve oluşturup görsel olarak güncelleme süresini analiz eder. Yüksek INP değerleri kullanıcı deneyiminin olumsuz etkilendiğine işaret eder; düşük INP ise daha iyi sıralama ve memnuniyet ile ilişkilendirilir.

INP metriği şu interaktif eylemlerden sonra tarayıcının ne kadar hızlı yanıt verdiğini değerlendirir:

• Tıklama
• Dokunma
• Klavye kullanımı
• Kaydırma

Profesyonel açıdan INP, UX ve sayfa tepki süresinin iyileştirilmesi için kritik bir parametredir.

INP Ne Zaman FID'nin Yerini Aldı?

Google, INP'yi Core Web Vitals içinde First Input Delay (FID) yerine kullanmaya geçirdi. INP, yalnızca ilk etkileşimin gecikmesini ölçen FID'nin aksine, sayfa içindeki tüm önemli etkileşimler sonrası yanıt süresini kapsamlı şekilde ele alır. FID ilk giriş gecikmesine odaklanırken, INP; buton, menü, form gönderimi gibi etkileşimlerin sonrasında görünen güncellemeye kadar geçen süreyi değerlendirir.

Güncel resmi referanslar için Google ve web.dev dokümantasyonunu takip edin; geçiş tarihleri duyurularla netleştirilir.

INP Değerleri

İyi (Good): Sayfadaki etkileşimlerin 75. persentil veya üzeri için INP'nin 200 ms altında olması hedeflenir.

İyileştirme gerekli (Needs improvement): Yaklaşık 200 ms ile 500 ms aralığı iyileştirme gerektirir.

Zayıf (Poor): 500 ms üzeri değerler kullanıcı deneyimini ciddi şekilde olumsuz etkiler; acil optimizasyon gerekir.

INP'yi düzenli izlemek ve iyileştirmek, hem kullanıcı memnuniyetini hem arama görünürlüğünü destekler.

INP Hesaplama Yöntemi

INP, etkileşimden sonra sonraki boyamaya kadar geçen süreyi milisaniye cinsinden özetler. Süreçte şu bileşenler rol oynar:

Engelleyen görevler (blocking tasks): Ana iş parçacığında uzun süren işler, kullanıcı girdisinin işlenmesini geciktirebilir.

Input delay (giriş gecikmesi): Girdinin olay işleyicilere ulaşma süresi; ana iş parçacığı meşgulse artar.

Processing time (işleme süresi): Tetiklenen JavaScript ve UI güncellemelerinin işlenmesi.

Presentation delay (sunum gecikmesi): Sonucun ekrana çizilmesi.

Özet formül: INP ≈ Giriş gecikmesi + İşleme süresi + Sunum gecikmesi (ölçüm modeli ve raporlama için Google'ın resmi tanımlarına bakın).

Örnek INP Hesaplama

Kullanıcı bir butona tıkladığında:

• Input delay: 23 ms
• Processing time: 154 ms
• Presentation delay: 63 ms

Örnek toplam: 23 + 154 + 63 = 240 ms (örnek amaçlı; gerçek INP dağılımı ve persentil hesabı saha verisine göre yapılır).

INP, iFrame ve RUM

Sayfadaki iframe'ler (video, harita, gömülü widget vb.) ana sayfanın iş parçacığı ve oluşturma maliyetini etkileyerek INP'yi dolaylı olarak etkileyebilir. iframe içeriğinin yüklenmesi ve etkileşime hazır olması genel yanıt süresine katkıda bulunur.

RUM (Real User Monitoring), gerçek kullanıcıların performansını ölçer; çoğu senaryoda iframe içine doğrudan müdahale kısıtlı olabilir (güvenlik ve çapraz köken politikaları). Bu nedenle iframe kaynaklı sorunları yalnızca RUM ile değil, laboratuvar testleri ve geliştirici araçlarıyla birlikte değerlendirin.

CrUX, PageSpeed Insights ve Search Console

INP'yi saha verisiyle anlamak için şu kaynaklar birlikte kullanılabilir:

• Chrome UX Report (CrUX): g.co/chromeuxdash
• PageSpeed Insights: pagespeed.web.dev
• Search Console — Önemli Web Verileri: Google Search Console

Bu araçların birlikte kullanımı, hem URL bazlı laboratuvar skorlarını hem gerçek kullanıcı kitlesini bağlamlandırır.

INP Ölçümü

Web Vitals Chrome eklentisi: Chrome Web Store üzerinden Web Vitals eklentisini kurun; geliştirici konsolunda INP dahil metrikleri gözlemlemek için eklenti ayarlarından günlüklemeyi etkinleştirin. Testte mobil görünüm, ağ ve CPU kısıtlaması ile etkileşimi tekrarlayın; diğer eklentileri kapatmak ölçüm gürültüsünü azaltır.

Lighthouse (Timespan): Chrome DevTools > Lighthouse modunda Timespan ile belirli bir süre içindeki etkileşimleri ölçebilirsiniz. "Start timespan" ile başlayıp menü veya buton gibi bir etkileşimi tetikleyin, ardından "End timespan" ile bitirin. İyi INP için hedef tipik olarak ≤ 200 ms altıdır; detay için "View Trace" ile görev sürelerini inceleyin.

INP Optimizasyonu

• Saha verisiyle en çok sorun çıkaran sayfa türlerini ve etkileşimleri önceliklendirin ("poor" segmenti, trafik hacmi).
• JavaScript iş yükünü azaltın; gereksiz üçüncü parti scriptleri ve uzun görevleri bölün.
• Laboratuvar profilleme ile yavaş etkileşimleri tekrarlayın ve düzeltmeleri doğrulayın.

Input Delay İçin Stratejiler

• Timer kullanımı: setTimeout / setInterval kullanıcı etkileşimiyle çakışıyorsa gecikmeyi artırabilir; kritik etkileşim yollarında gereksiz periyodik işleri azaltın.
• Uzun görevler: Ana iş parçacığını kilitleyen işleri parçalayın (yield, scheduler, web worker uygun yerlerde).
• Etkileşim çakışması: Ardışık event'leri sadeleştirin; gereksiz fetch'leri AbortController ile iptal edin; mümkünse animasyon için CSS tercih edin.

Kaynak: web.dev — Debounce input handlers, MDN — AbortController

Processing Time: Event Callback ve Layout

• Gereksiz veya ağır callback'leri kaldırın veya erteyin; işi küçük adımlara bölün.
• Görsel geri bildirim gerektirmeyen işleri sonraki çerçeveye bırakın; önce boyamaya giden yolu kısaltın.
• Layout thrashing: DOM'da okuma/yazma döngüsünü azaltın; toplu güncelleme yapın.

Sunum Gecikmesini Azaltma

• DOM boyutu: Gereksiz düğümleri azaltın; büyük listelerde sanallaştırma veya sayfalama düşünün.
• content-visibility: CSS ile görüntü alanı dışı içerikte oluşturma maliyetini düşürün (uygun sayfalarda).
• HTML oluşturma: İstemcide çok büyük template string ile DOM üretmek yerine sunucu HTML'si veya idempotent güncellemeler tercih edin.

Sonuç

INP iyileştirmesi süreklilik ister: etkileşim açısından zengin sitelerde bir darboğaz çözülünce başka etkileşimler öne çıkabilir. Ölçüm–önceliklendirme–iyileştirme döngüsünü düzenli sürdürmek, hem kullanıcı memnuniyetini hem de teknik kalite sinyallerini güçlendirir.

Kaynaklar:

• web.dev — Web Vitals
• web.dev — Optimize INP
• web.dev — Lab vs field data
• DebugBear — INP
• web.dev — Debounce input handlers