Interaction To Next Paint (INP) Nedir? Nasıl Ölçülür?

Günler geçtikçe ve teknoloji geliştikçe, sağlıklı bir web sitesini diğerlerinden ayırmak gittikçe zorlaşıyor. Eskiden sadece sitemiz açılıyorsa sitemizi sağlıklı varsayarken, daha sonra hayatımıza mobil cihazlar da girince bir web sitesinin tüm ekranlara uygun tasarlanmış olması en büyük sağlık kriterlerimizden biri oldu. Günümüzde ise, web sitemizi sağlıklı hale getirmek için sitemizi bir çok metriğe uygun hale getirmemiz gerekiyor. Bugün, bu metriklerin en yenisi olan Interaction To Next Paint (INP)‘yi konuşacağız. Google, bu metriği Mart 2024’de First Input Delay (FID) metriğinin yerine getirecek.

Interaction To Next Paint (INP) Nedir?

Interaction To Next Paint’i bir web sitesinin kullanıcının aksiyonlarına verdiği tepkilerin süresinin ölçülmesi olarak tanımlayabiliriz.

Peki nedir bu tepkiler?

Günümüzde hepimiz sosyal medya uygulamalarında zaman geçiriyoruz. Instagram’da bir fotoğrafı beğendiğiniz senaryoyu düşünün. Ekrana çift tıkladığınız anda uygulama size bir tepki veriyor ve siz fotoğrafı beğenmiş olduğunuzu anlıyorsunuz. Peki ya siz ekrana çift tıkladığınız anda uygulama size 3 saniye sonra tepki verseydi? Burada bir hata olduğunu düşünürdük ve uygulamayı yeniden başlatırdık veya birden çok kez beğenme düğmesine basardık. Kısacası bu oldukça kötü bir kullanıcı deneyimi olurdu. İşte, Interaction To Next Paint tam olarak bunu ölçüyor. Kullanıcın yaptığı bir aksiyona ne kadar hızlı bir sonuç gösterirsek, o kadar iyi bir INP deneyimi sunmuş oluyoruz.

INP Nasıl Ölçülür?

Yukarıdaki örnek Instagram senaryomuzdan devam edersek, INP kullanıcı beğenme hareketini yaptığı an ile uygulamanın beğenme sonucunu gösterdiği an arasındaki geçen süreyi ölçer. Bu geçen süre, sizin INP skorunuzdur. Daha genel bir tanımla, kullanıcı aksiyona başladığı an ile aksiyonun sonucunu gördüğü an arasında geçen süredir.

Sitemin INP Skorunu Nasıl Öğrenirim?

Sitenizin INP skorunu anlık olarak Google PageSpeed aracıyla https://pagespeed.web.dev adresinden ölçebilirsiniz, biz Bekçi olarak ise, sizin yerinize web sitenizin Google PageSpeed skorunu her gün ölçüyoruz ve bunun raporlamasını size yapıyoruz.

İyi Bir INP Skoru Ne Olmalı?

Google’ın verilerine göre:

• Eğer sitenizin INP skoru 200ms ve altındaysa, bu sitenizin iyi bir INP skoru olduğuna işaret eder.
• Eğer sitenizin INP skoru 200ms ve 500ms arasındaysa, bu sitenizin INP skorunun geliştirilebilir seviyede olduğunu işaret eder.
• Eğer 500 ms ve üstündeyse, sitenizin INP skorunun kötü bir kullanıcı deneyimi sunduğunu işaret eder.

INP Nasıl Optimize Edilir?

İsterseniz bu sefer de farklı bir senaryodan gidelim. Diyelim ki sizin bir e-ticaret siteniz var, burada kullanıcılarınız bir ürünü beğendiğinde “Sepete Ekle” butonuna basarak sepetine ekliyor. Ve bastığı anda uygulamanız arka taraftaki yazılımınıza sepete ekleme isteğini atıyor, yazılımınız sepete ekleme işlemlerini yapıp ön taraftaki uygulamayı işlemin sonucu hakkında bilgilendiriyor. Ön taraftaki uygulama ise, eğer işlemin sonucu başarılıysa “sepete eklendi.”, başarısız ise “bir hata oluştu” gibi bir uyarı gösteriyor. Buraya kadar her şey normal görünse de, aslında bu, potansiyel bir INP sorunudur. Ve bu sorun da tahmin edebileceğiniz gibi, kullanıcının “Sepete Ekle” butonuna bastığı anda arkada dönen işlemlerin sonucunu beklemesidir. Kullanıcı bunu beklerken belki bir hata olduğunu düşünüp tekrar tekrar sepete ekle butonuna basacak ve birden fazla kez ürünü sepete de ekleyecek olabilir. Kullanıcıya bu hissiyatı yaşatmamak için, kullanıcı butona bastığı anda hiç gecikmeden isteğini işlediğimizi belirten bir işaret göstermeliyiz, örneğin bu bir yükleniyor animasyonu olabilir. Daha sonra işlemlerimizi arkada yapabiliriz. Özetle arayüzlerimizi kullanıcının her aksiyonuna kullanıcıyı bekletmeden tepki verecek şekilde hazırlarsak, INP açısından optimize bir sitemiz olmuş olur.

INP ve Diğer Metrikleri Sizin Yerinize Takip Edelim

Biz Bekçi olarak, sitenizin tüm Google PageSpeed metriklerini sizin yerinize takip ediyoruz. Aynı zamanda Bekçi, bu metriklerin yanında sitenizin performansıyla ilgili her şeyi periyodik olarak ölçüp size geri bildirimler veriyor. Siz de web sitenizin bir Bekçi’si olsun isterseniz, Bekçi’yi hemen ücretsiz kullanmaya başlayabilirsiniz.