Interaction to Next Paint (INP), Mart 2024’te First Input Delay (FID) yerine geçecek olan bekleyen bir Core Web Vital metriğidir. INP, Düğüm Zamanlama API’sinden elde edilen verileri kullanarak tepkiselliği değerlendirir. Bir etkileşim, bir sayfanın tepkisiz hale gelmesine neden olduğunda, bu kötü bir kullanıcı deneyimidir. INP, kullanıcının sayfa ile yaptığı tüm etkileşimlerin gecikmesini gözlemleyerek, tüm (veya neredeyse tüm) etkileşimlerin altında kalan tek bir değer raporlar. Düşük bir INP, sayfanın kullanıcı etkileşimlerine sürekli olarak hızlı bir şekilde yanıt verebildiği anlamına gelir.
INP Nedir ?
INP metriği, bir sayfanın tepkilere hızlı bir şekilde yanıt vermesi anlamına gelir. Bir sayfa bir etkileşime yanıt verdiğinde, sonuç görsel geribildirimdir ve tarayıcı tarafından bir sonraki karede sunulur. Görsel geribildirim, çevrimiçi alışveriş sepetine eklediğiniz bir öğenin gerçekten eklenip eklenmediğini, bir mobil gezinme menüsünün açılıp açılmadığını, bir giriş formunun içeriğinin sunucu tarafından doğrulandığını ve benzeri şeyleri size söyler.
Bazı etkileşimler doğal olarak diğerlerinden daha uzun sürebilir, ancak özellikle karmaşık etkileşimler için hızlı bir şekilde başlangıç görsel geribildirim sunmak önemlidir. Bir sonraki boyanın yapılacağı süre, bunu yapmanın en erken fırsatıdır. Bu nedenle, INP’nin amacı, etkileşimin tüm sonuçlarını (örneğin ağ getirmeleri ve diğer asenkron işlemlerden gelen UI güncellemeleri) ölçmek değil, bir sonraki boyanın engellenme süresini ölçmektir. Görsel geribildirimi geciktirerek, kullanıcılara sayfanın eylemlerine yanıt vermediği izlenimini verebilirsiniz.
INP’nin amacı, bir kullanıcının bir etkileşimi başlattığı andan bir sonraki kare boyandığı anın mümkün olduğunca kısa olmasını sağlamaktır ve kullanıcının yaptığı tüm veya çoğu etkileşim için geçerlidir.
INP Nasıl Ölçülür?
INP’yi ölçmek için aşağıdaki videoda, sağ taraftaki örnek, bir akordionun açıldığına hızlı görsel geribildirim verir. Ayrıca, zayıf bir tepki süresinin kullanıcının deneyiminin bozulduğu yanlış tepkilere neden olabileceğini gösterir.
Zayıf ve iyi tepki süresinin bir örneği. Solda, uzun süren görevler akordionun açılmasını engeller. Bu durum, kullanıcının deneyiminin bozulduğunu düşünerek birden fazla kez tıklamasına neden olur. Ana iş parçacığı yetiştiğinde, gecikmeli girişleri işler ve akordion beklenmedik bir şekilde açılıp kapanır.
İyi tepki süresi, bir sayfanın üzerinde yapılan etkileşimlere hızlı bir şekilde yanıt vermesi anlamına gelir. Bir sayfa bir etkileşime yanıt verdiğinde, sonuç görsel geribildirimdir ve tarayıcı tarafından bir sonraki karede sunulur. Görsel geribildirim, çevrimiçi alışveriş sepetine eklediğiniz bir öğenin gerçekten eklenip eklenmediğini, bir mobil gezinme menüsünün açılıp açılmadığını, bir giriş formunun içeriğinin sunucu tarafından doğrulandığını ve benzeri şeyleri size söyler.
Bir sayfanın tepki süresini değerlendirmek için “iyi” veya “zayıf” gibi etiketler koymak zordur. Bir yandan, iyi tepki süresine öncelik veren geliştirme uygulamalarını teşvik etmek istersiniz. Öte yandan, insanların gerçekleştirdikleri geliştirme beklentilerini belirlemek için cihazların yeteneklerinde önemli ölçüde değişkenlik olduğunu hesaba katmanız gerekir.
İyi bir tepki süresi sağlamak için ölçebileceğiniz iyi bir eşik, alanda kaydedilen sayfa yüklemelerinin 75. persentilidir ve mobil ve masaüstü cihazlara göre ayrılmıştır:
INP değeri 200 milisaniyenin altında veya 200 milisaniye olarak kabul edilirse, sayfanızın iyi tepki süresi vardır.
INP değeri 200 milisaniyenin üzerinde ve 500 milisaniyenin altında veya 500 milisaniye olarak kabul edilirse, sayfanızın tepki süresini iyileştirmeye ihtiyacı vardır.
INP değeri 500 milisaniyenin üzerindeyse, sayfanızın zayıf bir tepki süresi vardır.
INP, bir sayfanın kullanıcı etkileşimlerine genel olarak nasıl yanıt verdiğini gözlemleyerek değerlendirilen bir metriktir. En kötü gecikmeli etkileşim INP olarak raporlanır.
Bir etkileşim, aynı mantıksal kullanıcı hareketi sırasında tetiklenen bir grup olay işleyicisidir. Örneğin, dokunmatik ekranlı bir cihazda “dokunma” etkileşimleri, pointerup, pointerdown ve tıklama gibi birden çok olay içerir. Bir etkileşimin gecikmesi, kullanıcının etkileşimi başlattığı andan sonraki kareye görsel geribildirimin sunulduğu ana kadar olan süredir.
INP, kullanıcı sayfadan ayrıldığında hesaplanır ve sayfanın ömrü boyunca genel tepki süresini temsil eden tek bir değer raporlar. Düşük bir INP, bir sayfanın kullanıcı girişine güvenilir bir şekilde yanıt verdiği anlamına gelir.
INP ile First Input Delay (FID) arasındaki fark nedir?
INP, tüm sayfa etkileşimlerini dikkate alırken, First Input Delay (FID) yalnızca ilk etkileşimi hesaba katar. Ayrıca, FID yalnızca ilk etkileşimin giriş gecikmesini ölçer, olay işleyicilerin çalışma süresini veya bir sonraki karenin sunulmasındaki gecikmeyi ölçmez.
FID de bir yükleme tepki süresi metriği olduğu için, ilk etkileşimin yükleme aşamasında hemen hemen algılanabilir bir giriş gecikmesi olmadığı durumda, sayfa iyi bir ilk izlenim oluşturmuş demektir.
INP ise sadece ilk izlenimlerle ilgili değildir. Tüm etkileşimleri örnekleyerek, tepki süresi kapsamlı bir şekilde değerlendirilebilir, bu da INP’nin FID’den daha güvenilir bir genel tepki süresi göstergesi olmasını sağlar.
INP değeri raporlanmazsa ne olur?
Bir sayfanın INP değeri raporlanmaması mümkündür. Bunun birkaç nedeni olabilir:
Sayfa yüklendi, ancak kullanıcı hiçbir tıklama, dokunma veya klavye kullanarak etkileşimde bulunmadı.
Sayfa yüklendi, ancak kullanıcı tıklama, dokunma veya klavye kullanmadan kaydırma gibi etkileşimlerle sayfayla etkileşimde bulundu. INP’nin nasıl hesaplandığına dahil edilmez.
Sayfa bir arama tarayıcısı veya başsız tarayıcı gibi bir bot tarafından erişiliyorsa ve bu bot sayfayla etkileşime geçmek için betiklenmemişse.
INP, hem alanda hem de laboratuvar ortamında çeşitli araçlar kullanılarak ölçülebilir.
Alanda ölçüm yapmak en iyi yöntemdir. İdeal olarak, gerçek kullanıcıların metrikleri topladığından emin olmak için Alanda Gerçek Kullanıcı İzleme (RUM) verilerinden INP’yi ölçmek en iyisidir. RUM verileri, sayfanın INP değerini değil, aynı zamanda INP değerinden sorumlu olan belirli etkileşimi, etkileşimin sayfa yüklemesinden sonra mı yoksa yüklemeye kadar mı gerçekleştiğini, etkileşim türünü (tıklama, klavye tuşuna basma veya dokunma) ve diğer değerli bilgileri vurgular.
Laboratuvar ortamında ölçüm yapmak için, sahada yavaş etkileşimler olduğunu gösteren verilere sahip olduktan sonra başlamak istersiniz. Ancak, saha verileri olmadığında, yaygın kullanıcı akışlarını takip etmek ve yol boyunca etkileşimleri test etmek, ayrıca yükleme sırasında sayfayla etkileşimde bulunmak, kullanıcı deneyiminin önemli bir kısmında yavaş etkileşimleri ortaya çıkarmak için bazı stratejilerdir.
INP’yi nasıl geliştirebilirim?
INP’yi optimize etme sürecinde size rehberlik edecek bir dizi kılavuz bulunmaktadır. Bu kılavuzlar, sahada yavaş etkileşimleri belirleme ve laboratuvar verilerini kullanarak çeşitli yollarla bu etkileşimleri optimize etme sürecinde size yardımcı olur.
Bu bilgiler ışığında, Interaction to Next Paint (INP) bir sayfanın kullanıcı etkileşimlerine olan tepkisini değerlendiren bir metrik olarak özetlenebilir. INP, sayfanın genel tepki süresini ölçer ve kullanıcının deneyimi için önemli bir faktördür.