Interaction to Next Paint (INP) Nedir?

Yıllardır alışık olduğumuz Google'ın Pagespeed yapısı sitelerin hızlı açılması ve hizmet vermesi üzerine kurulmuş bir yapıdır. Bunun için ölçülebilir parametreler üreterek Chrome'un pazar payından faydalanarak topladığı anonim verileri SEO metriği olarak da kullanıyor. 2022 içinde kullanıma açtığı Interaction to Next Paint(kısa adıyla INP) ile konu sayfa açılma hızından çıkıp artık tam anlamıyla web performans alanına oturtulmaya başlanıyor. Çünkü INP ile artık konu sayfanın ne kadar hızlı açıldığının ötesine geçip, kullanıcının gireceği interaksiyonun ne kadar hızlı gerçekleşeceği ile de alakalı oluyor. Yani site içi gezinme deneyimi bir pagespeed metriği haline dönüşüyor.

Kerem'in blogunda "İlk boyayla etkileşim" olarak önerdiği ancak yine aynı yazıdaki "Genel etkileşim gecikmesi" terimi kavramı çok iyi karşılıyor. Google'ın kendisinin konuyu anlatmakta kullandığı video da gerekli tanımı oldukça iyi özetliyor. Ancak bu metriğin daha iyi anlayabilmek için yazının sonraki bölümlerinde biraz daha bilgiyi derinleştirmemiz gerekecek.

INP Süresinin Açıklaması Nedir?

• Kullanıcının sayfa ile etkileşime girdiği süreç ile event handler'ın çalışması arasında kalan süre,
• Script'in çalışma(execution) süresi,
• Kodun çalışmasıyla kullanıcıya çıktı gösterilmesi arasında geçen süre genel olarak INP'yi arttıran ve metriğin negatif etkilenmesine sebep olan konular arasındadır.

Yukarıdaki maddeler genel olarak milisaniyeler içinde gerçekleşen işlemler olarak düşünebilirsiniz, ancak mobil cihazları, özellikle de CPU gücü düşük modası geçmiş Android telefonları düşünürseniz bu tip gecikmeleri(latency) çoğunlukla yaşadığınızı hatırlayabilirsiniz. Tekrar hatırlatmak gerekiyor ki INP verisi diğer Lighthouse verileri gibi toplam anonim olarak toplanıp %75 percentile üzerinden değerlendiriliyor. Yani önemli olan CPU'su çok iyi cihazlarda muhteşem çalışan uygulama üretmek yerine, ortalama cihazlarda iyi çalışan uygulama üretmektir.

INP Süresiyle İlgili Gerçek Örnekler

Her gün girdiğimiz internet sayfalarından bu konuyu anlatabilecek bazı gerçek hayat örnekleri vermek gerekirse;

• E-ticaret sitesinde alışveriş yapıyorsunuz ve siparişin kargolanacağı adresin girişini yapıyorsunuz. Çoğu sitede olduğu gibi önce il seçiyorsunuz, sonra ilçe seçmek için selectbox'ı tıkladığınızda Ajax sonucu henüz yüklenmediği için bir süre bekliyorsunuz ve belli bir süre sonrasında ilçe bilgisi yükleniyor. Bu INP'ye güzel bir örnek. Bu örnekteki kullanıcı deneyimini iyileştirmek için kullanıcıya Ajax işlem sürecini anlatacak bir "loading indicator" yerleştirmek mantıklı olacaktır.

• Ürün listeleme sayfalarında filtre kullanımlarında checkbox tıklandıktan sonra filtrelenen ürünlerin gelişini doğru şekilde yönetmezsek yine INP'yi artıracak faktörlerden birisi olacaktır. Filtre kullanımlarında ne kadar az karmaşık JS kullanılırsa ve kullanıcı deneyimi ne kadar dikkate alınarak hareket edilirse INP değerini olabildiğince yüksek seviyede tutmuş oluruz.
• Ürün detay sayfalarında kullanıcıların ürün fotoğrafına tıkladıktan sonra fotoğraf galerisini bekledikleri süre INP'yi etkileyebilme potansiyeline sahiptir.

• Sepete ekle butonlarına tıklayıp hani sepete eklendi mi eklenmedi mi bilemediğimiz o milisaniyeler süre var ya; işte o gecikme neredeyse tam olarak INP'nin tanımı.

Örneklerde gördüğünüz gibi SEO bazlı ya da direk dönüşüm oranını etkileyecek noktalarda INP tuzakları bulunuyor.

INP'yi İyileştirmek İçin Neler Yapılabilir?

• Mümkün olduğu kadar güncel JS frontend kütüphanelerini kullanarak performansı iyileştirmek faydalı olacaktır. Vue, React, Angular gibi altyapılar performans ve yeniden kullanılabilirlik avantajı sağladıkları için çoğunlukla tercih ediliyorlar.
• Mümkün olduğunca az karmaşlıklığa sahip JS kütüphanelerine sahip olmak. Bu noktada kişisel tavsiyem mümkün olduğu kadar jQuery'den uzak durmanın fayda sağlayacağı yönündedir.

Kabul Edilebilir INP Metriği Seviyesi Nedir?

INP metriğinin iyi, orta ve kötü seviyeleri için 200 milisaniye ve 500 milisaniye eşik değerlerdir.