Sonraki boyamayla etkileşim (INP)

Chrome kullanım verileri, kullanıcıların bir sayfada geçirdiği sürenin% 90'ının sayfa yüklendikten sonra harcadığını gösteriyor. Bu nedenle, yanıt verme düzeyinin sayfa yaşam döngüsü boyunca dikkatli bir şekilde ölçülmesi önemlidir. INP metriği bunu değerlendirir.

Hızlı yanıt verme, bir sayfanın etkileşimlere hızlı yanıt vermesi anlamına gelir. Bir sayfa etkileşime yanıt verdiğinde, tarayıcı boyadığı bir sonraki karede görsel geri bildirim sunar. Görsel geri bildirim size, örneğin çevrimiçi bir 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ğrulanıp doğrulanmadığını vb. belirtir.

Bazı etkileşimler doğal olarak diğerlerinden daha uzun sürer. Ancak özellikle karmaşık etkileşimlerde, kullanıcıya bir şey olduğunu bildirmek için ilk bakışta hızlı bir görsel geri bildirim sunmak önemlidir. Tarayıcının boyayacağı bir sonraki çerçeve, bunu yapmak için ilk fırsattır.

Bu nedenle, INP'nin amacı bir etkileşimin tüm nihai etkilerini (ör. diğer eşzamansız işlemlerden gelen kullanıcı arayüzü güncellemeleri) ölçmek değil, bir sonraki boyamanın engellenme zamanını ölçmektir. Kullanıcılar, görsel geri bildirimi geciktirerek sayfanın yeterince hızlı yanıt vermediği izlenimini verebilirler. INP, geliştiricilerin kullanıcı deneyiminin bu kısmını ölçmesine yardımcı olmak için geliştirilmiştir.

Aşağıdaki videoda sağ tarafta bulunan örnekte bir akordeonun açıldığına dair anında görsel geri bildirim veriliyor. Yetersiz yanıt verme düzeyi, sol taraftaki örnekte gösterilmektedir. Bunun neden kötü bir kullanıcı deneyimine yol açabileceği gösterilmiştir.

Bu kılavuzda INP'nin işleyiş şekli, nasıl ölçüleceği ve INP'yi iyileştirecek kaynaklara işaret edilmektedir.

INP nedir?

INP, bir kullanıcının sayfayı ziyaret ettiği süre boyunca gerçekleşen tüm tıklama, dokunma ve klavye etkileşimlerinin gecikmesini gözlemleyerek sayfanın kullanıcı etkileşimlerine genel duyarlılığını değerlendiren bir metriktir. Nihai INP değeri, aykırı değerler göz ardı edilerek gözlemlenen en uzun etkileşimdir.

Etkileşim, aynı mantıksal kullanıcı hareketi sırasında tetiklenen bir etkinlik işleyici grubudur. Örneğin, dokunmatik ekranlı bir cihazdaki "dokunma" etkileşimleri pointerup, pointerdown ve click gibi birden çok etkinliği içerir. Etkileşimler JavaScript, CSS, yerleşik tarayıcı kontrolleri (form öğeleri gibi) veya bunların bir kombinasyonu tarafından yönlendirilebilir.

Bir etkileşimin gecikmesi, kullanıcının etkileşimi başlattığı andan tarayıcının sonraki kareyi boyadığı ana kadar etkileşimi artıran bir etkinlik işleyici grubunun en uzun süresinden oluşur.

İyi bir INP puanı nedir?

Bir duyarlılık metriğinde "iyi" veya "kötü" gibi etiketleri sabitlemek zordur. Bir yandan, iyi yanıt vermeye öncelik veren geliştirme uygulamalarını teşvik etmek istiyorsunuz. Diğer yandan, insanların ulaşılabilir geliştirme beklentileri belirlemek için kullandığı cihazların yeteneklerinin önemli ölçüde değişkenlik gösterdiğini de hesaba katmanız gerekir.

Kullanıcı deneyimlerini iyi yanıt verme hızıyla sunduğunuzdan emin olmak için ölçmek üzere iyi bir eşik, alanda kaydedilen sayfa yüklemelerinin mobil ve masaüstü cihazlar genelinde segmentlere ayrılmış 75. yüzdelik dilimidir:

• 200 milisaniye altında veya altında bir INP, bir sayfanın iyi duyarlılığa sahip olduğu anlamına gelir.
• 200 milisaniye'nin üzerinde ve altında veya 500 milisaniye altında bir INP, bir sayfanın yanıt verme hızının iyileştirmesi gerektiği anlamına gelir.
• 500 milisaniye'nin üzerindeki bir INP, bir sayfanın yeterli yanıt vermediği anlamına gelir.

Etkileşimde neler bulunur?

Etkileşimin sağlanmasında birincil amaç genellikle JavaScript olsa da tarayıcılar, onay kutuları, radyo düğmeleri ve CSS tarafından desteklenen denetimler gibi JavaScript tarafından desteklenmeyen denetimler aracılığıyla etkileşim sağlar.

INP'nin amaçları doğrultusunda yalnızca aşağıdaki etkileşim türleri göz önünde bulundurulur:

• Fare ile tıklama.
• Dokunmatik ekranı olan bir cihaza dokunulduğunda.
• Fiziksel klavyede veya ekran klavyede bir tuşa basma.

Etkileşimler ana dokümanda veya dokümana yerleştirilmiş iframe'lerde gerçekleşir (örneğin, yerleştirilmiş bir videoda oynat seçeneğinin tıklanması). Son kullanıcılar iframe'de ne olduğunu veya olmadığını bilemez. Bu nedenle, iframe'ler içindeki INP, üst düzey sayfaya ilişkin kullanıcı deneyimini ölçmek için gereklidir. JavaScript Web API'leri, iframe'lerin içeriğine erişemediğinden bu durum CrUX ve RUM arasında bir fark olarak gösterilebilir.

Etkileşimler birden fazla etkinlikten oluşabilir. Örneğin, bir tuş vuruşu keydown, keypress ve keyup etkinliklerini içerir. Dokunma etkileşimleri pointerup ve pointerdown etkinliklerini içerir. Etkileşimdeki en uzun süreye sahip etkinlik, etkileşimin toplam gecikmesine katkıda bulunur.

Sayfanın INP'si, kullanıcı sayfadan ayrıldığında hesaplanır. Sonuç, yaşam döngüsü boyunca sayfanın genel yanıt verme durumunu temsil eden tek bir değerdir. Düşük bir INP, bir sayfanın kullanıcı girişine güvenilir şekilde yanıt verdiği anlamına gelir.

INP ile First Input Delay (FID) arasındaki fark nedir?

INP, First Input Delay (FID) özelliğinin yerini alan metriktir. Her ikisi de yanıt verme metrikleri olsa da FID, yalnızca bir sayfadaki ilk etkileşimin giriş gecikmesini ölçtü. INP, giriş gecikmesinden başlayıp etkinlik işleyicilerini çalıştırmak için gereken süreye ve son olarak tarayıcının bir sonraki kareyi boyayana kadar geçen süreye kadar sayfadaki tüm etkileşimleri gözlemleyerek FID'yi iyileştirir.

Bu farklılıklar, hem INP hem de FID'nin farklı duyarlılık metriği türleri olduğu anlamına gelir. FID'nin, sayfanın kullanıcı üzerindeki ilk gösterimini değerlendirmek için tasarlanmış bir yükleme duyarlılığı metriği olduğu durumlarda, INP sayfa etkileşimlerinin süresi içinde ne zaman gerçekleştiğinden bağımsız olarak genel yanıt verme performansı için daha güvenilir bir göstergedir.

Herhangi bir INP değeri bildirilmezse ne olur?

Bir sayfa hiçbir INP değeri döndürmeyebilir. Bu, aşağıdakiler de dahil olmak üzere çeşitli nedenlerden kaynaklanabilir:

• Sayfa yüklendi, ancak kullanıcı klavyesindeki bir tuşa hiç tıklamadı, dokunmadı veya tuşa basmadı.
• Sayfa yüklendi ancak kullanıcı, kaydırma veya öğelerin üzerine gelme gibi ölçülmeyen hareketler kullanarak sayfayla etkileşime geçti.
• Sayfayla etkileşim kurmak için komut dosyası haline getirilmemiş arama tarayıcısı veya gözetimsiz tarayıcı gibi bir bot sayfaya erişmektedir.

INP'yi ölçme

INP'yi ölçmek için hem sahada hem de laboratuvarda çeşitli araçlar kullanılabilir.

Sahada

İdeal olarak, INP'yi optimize etme yolculuğunuz alan verileriyle başlar. Gerçek Kullanıcı İzleme (RUM) alanında elde edilen alan verileri, size yalnızca bir sayfanın INP değerini değil, aynı zamanda INP değerinden hangi etkileşimin sorumlu olduğunu, etkileşimin sayfa yükleme sırasında veya sonrasında gerçekleşip gerçekleşmediğini, etkileşimin türünü (tıklama, tuşa basma veya dokunma) ve etkileşimin hangi bölümünün duyarlılığı etkilediğini belirlemenize yardımcı olabilecek diğer değerli zamanlamaları da gösteren bağlamsal veriler sunar.

Web siteniz Chrome Kullanıcı Deneyimi Raporu'na (CrUX) dahil edilmeye uygunsa PageSpeed Insights'taki CrUX aracılığıyla (ve diğer Önemli Web Verileri'nde) INP alan verilerini hızlı bir şekilde alabilirsiniz. En azından, web sitenizin INP'sinin kaynak düzeyindeki resmini alabilirsiniz. Ancak bazı durumlarda, URL düzeyindeki verileri de alabilirsiniz.

Ancak CrUX, bir sorun olup olmadığını söylese de soruna neyin neden olduğunu söyleyemez. RUM çözümü, yanıt verme sorunları yaşayan sayfalar, kullanıcılar veya kullanıcı etkileşimleri hakkında daha fazla ayrıntıya ulaşmanıza yardımcı olabilir. INP'yi bireysel etkileşimlerle ilişkilendirebilmek, tahmin yürütmeyi ve gereksiz çabayı önler.

Laboratuvarda

İdeal olarak, bir sayfada yavaş etkileşimler olduğunu gösteren alan verileriniz olduğunda laboratuvarda testlere başlamanız önerilir. Ancak alan verileriniz yoksa laboratuvarda yavaş etkileşimleri yeniden oluşturmak için bazı stratejiler uygulayabilirsiniz. Stratejiler arasında, yaygın kullanıcı akışlarını takip etme ve bu süreçte etkileşimleri test etme, ayrıca sayfa yüklenirken (ana iş parçacığının genellikle en yoğun olduğu sırada) etkileşimde bulunmanın yanı sıra kullanıcı deneyiminin söz konusu önemli kısmı sırasındaki yavaş etkileşimleri belirlemek yer alır.

INP'yi iyileştirme

Sahadaki yavaş etkileşimleri belirleme ve laboratuvar verilerinden yararlanarak bu etkileşimlerin nedenlerini belirleyip optimize etme sürecinde size yol gösterecek bir INP'yi optimize etme rehberleri koleksiyonu mevcuttur.

Değişiklik günlüğü

Zaman zaman metrikleri ölçmek için kullanılan API'lerde, bazen de metriklerin tanımlarında hatalar keşfedilir. Bu nedenle, değişikliklerin bazen yapılması gerekir ve bu değişiklikler dahili raporlarınızda ve kontrol panellerinizde iyileştirmeler veya regresyonlar olarak gösterilebilir.

Bu durumu yönetmenize yardımcı olmak amacıyla, metriklerin uygulanmasında veya tanımında yapılan tüm değişiklikler bu Değişiklik günlüğünde gösterilir.

Bu metriklerle ilgili geri bildiriminiz varsa web-önemli geri bildirim Google grubunda geri bildirimlerinizi gönderin.

Bilginizi test etme