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, sayfa yaşam döngüsünün boyunca yanıt vermenin dikkatli bir şekilde ölçülmesi önemlidir. INP metriği bunu değerlendirir.

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

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 hızlıca ilk görsel geri bildirimi sunmak önemlidir. Tarayıcının boyayacağı bir sonraki kare, bunu yapmanın en erken fırsatıdır.

Bu nedenle, INP'nin amacı bir etkileşimin nihai etkilerinin tümünü (ör. diğer eşzamansız işlemlerden gelen ağ getirmeleri ve kullanıcı arayüzü güncellemeleri) ölçmek değil, sonraki boyamanın engellendiği zamanı ölçmektir. Görsel geri bildirimi geciktirerek kullanıcılar sayfanın yeterince hızlı yanıt vermediğini düşünebilir. 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ğdaki örnekte akordeonun açıldığına dair anında görsel geri bildirim verilmektedir. Düşük yanıt verme hızı sol taraftaki örnekte ve bunun nasıl olumsuz kullanıcı deneyimine yol açabileceği gösterilmektedir.

Bu kılavuzda, INP'nin işleyiş şekli ve nasıl ölçüldüğü açıklanmakta, ayrıca INP'yi iyileştirmeye yönelik kaynaklara yönlendirilmektedir.

INP nedir?

INP, 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 yanıt verme durumunu 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 cihazda "dokunma" etkileşimleri pointerup, pointerdown ve click gibi birden fazla etkinlik içerir. JavaScript, CSS, yerleşik tarayıcı kontrolleri (form öğeleri gibi) veya bunların bir kombinasyonu bir etkileşimi teşvik edebilir.

Bir etkileşimin gecikmesi, kullanıcının etkileşimi başlatmasından, tarayıcının bir sonraki çerçeveyi çizmesine kadar geçen süre, etkileşimi tetikleyen etkinlik işleyiciler grubunun en uzun süresinden oluşur.

İyi bir INP puanı nedir?

"İyi" gibi etiketleri sabitleme veya "kötü" bunu tahmin etmek zor. Bir yandan, iyi yanıt vermeye öncelik veren geliştirme uygulamalarını teşvik etmek istersiniz. Öte yandan, kullanıcıların ulaşılabilir geliştirme beklentileri belirlemek için kullandığı cihazların özelliklerinde önemli farklılıklar olduğunu göz önünde bulundurmanız gerekir.

İyi bir yanıt veren kullanıcı deneyimleri sunduğunuzdan emin olmak için, alanda kaydedilen sayfa yüklemelerinin yüzde 75'lik dilimi (mobil ve masaüstü cihazlar arasında segmentlere ayrılmış olarak) iyi bir eşiktir:

• 200 milisaniye veya altındaki bir INP, sayfanın iyi yanıt verdiği anlamına gelir.
• 200 milisaniye üzerinde ve 500 milisaniye altında veya 500 milisaniye olan bir INP, sayfanın duyarlılığının iyileştirilmesi gerektiği anlamına gelir.
• 500 milisaniye'nin üzerindeki bir INP, bir sayfanın düşük duyarlılığa sahip olduğu anlamına gelir.

Etkileşimde neler var?

Etkileşimin birincil itici gücü genellikle JavaScript'tir. Ancak tarayıcılar, JavaScript tarafından desteklenmeyen onay kutuları, radyo düğmeleri ve CSS tarafından desteklenen kontroller gibi kontroller aracılığıyla da etkileşim sağlar.

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

• Fareyle tıklama.
• Dokunmatik ekranlı bir cihaza dokunma.
• Fiziksel klavyede veya ekran klavyesinde bir tuşa basma.

Etkileşimler ana dokümanda veya dokümana yerleştirilmiş iframe'lerde gerçekleşir (ör. yerleştirilmiş bir videoda oynat tıklandığında). Son kullanıcılar, bir iframe'de nelerin bulunduğundan haberdar olmaz. Bu nedenle, üst düzey sayfanın kullanıcı deneyimini ölçmek için iframe'lerdeki INP'ler gerekir. JavaScript Web API'leri, iframe'lerin içeriğine erişemediğinden bu durum CrUX ile 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şim içindeki en uzun süresi olan etkinlik, etkileşimin toplam gecikmesine katkıda bulunur.

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

INP'nin İlk Giriş Gecikmesi'nden (FID) farkı nedir?

INP, First Input Delay (FID) metriğinin yerini alacak metriktir. Her ikisi de duyarlılık metrikleri olsa da FID yalnızca bir sayfadaki ilk etkileşimin giriş gecikmesini ölçmüştür. INP, giriş gecikmesinden etkinlik işleyicilerinin çalıştırılmasına kadar ve son olarak da tarayıcı bir sonraki kareyi boyayana kadar bir 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, sayfanın kullanıcı üzerindeki ilk gösterimini değerlendirmek için tasarlanmış bir yükleme duyarlılığı metriği olduğunda, INP, sayfa etkileşimlerinin süresi ne olursa olsun genel yanıt vermenin daha güvenilir bir göstergesidir.

INP değeri raporlanmazsa ne olur?

Bir sayfa INP değeri döndürmeyebilir. Bu durum aşağıdakiler 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şimde bulundu.
• Sayfayla etkileşime geçmek için komut dosyası yazılmamış, arama tarayıcısı veya gözetimsiz tarayıcı gibi bir bot sayfaya erişiyor.

INP ölçümü nasıl yapılır?

INP, gerçekçi kullanıcı etkileşimlerini simüle edebilmek için hem sahada hem de laboratuvarda ölçülebilir.

Sahada

İdeal olarak, INP'yi optimize etme yolculuğunuz alan verileriyle başlar. Gerçek Kullanıcı İzleme'den (RUM) alınan alan verileri 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 yanıt verme düzeyini etkilediğini belirlemenize yardımcı olabilecek diğer değerli zamanlamaları) vurgulayan içerik verilerini de sağlar.

Web siteniz Chrome Kullanıcı Deneyimi Raporu'na (CrUX) dahil edilmeye uygunsa PageSpeed Insights'taki CrUX'te (ve diğer Core Web Vitals'da) INP alan verilerini hızlı bir şekilde alabilirsiniz. En azından, web sitenizin INP'sinin kaynak düzeyinde resmini elde edebilirsiniz ancak bazı durumlarda URL düzeyindeki verileri de alabilirsiniz.

Ancak CrUX, bir sorun olup olmadığını size söyleyebilir ancak sorunun nedenini bildiremez. RUM çözümü, duyarlılıkla ilgili sorun yaşayan sayfalar, kullanıcılar veya kullanıcı etkileşimleri hakkında daha fazla ayrıntı öğrenmenize yardımcı olabilir. INP'yi tek tek etkileşimlerle ilişkilendirebilmek, tahmin yürütmeyi ve boşa çaba harcamayı önler.

Laboratuvarda

İdeal olarak, bir sayfanın etkileşimlerinin yavaş olduğunu gösteren saha verilerine sahip olduktan sonra laboratuvarda teste başlamak istersiniz. Alan verileri, laboratuvardaki sorunlu etkileşimleri yeniden oluşturma işini çok daha kolay hale getirecektir.

Bununla birlikte, alan verilerinizin olmaması tamamen mümkündür. INP, bazı laboratuvar araçlarında ölçülebilir ancak laboratuvar testi sırasında bir sayfa için elde edilen INP değeri, ölçüm döneminde hangi etkileşimlerin gerçekleştirildiğine bağlıdır. Kullanıcı davranışları tahmin edilemez ve son derece değişken olabilir. Bu da laboratuvardaki testlerinizin, sorun etkileşimlerini saha verilerinin yapabileceği şekilde göstermeyebileceği anlamına gelir. Ayrıca, bazı laboratuvar araçları yalnızca herhangi bir etkileşim olmadan sayfanın yüklendiğini gözlemlediğinden sayfanın INP değerini raporlamaz. Bu gibi durumlarda Toplam Engelleme Süresi (TBT) INP için makul bir proxy metriği olabilir ancak kendi başına INP'nin yerine geçmez.

Bir sayfanın INP'sini değerlendirmek söz konusu olduğunda laboratuvar araçlarında sınırlamalar olsa da laboratuvarda yavaş etkileşimleri yeniden oluşturmak için bazı stratejiler vardır. Stratejiler, kullanıcı deneyiminin bu önemli bölümünde yavaş etkileşimleri belirlemek amacıyla, genel kullanıcı akışlarını takip etmeyi ve süreç boyunca etkileşimleri test etmeyi, ayrıca sayfa yüklenirken (ana iş parçacığı genellikle en yoğun olduğunda) etkileşimde bulunmayı içerir.

INP'yi iyileştirme

Sahadaki yavaş etkileşimlerin tespiti ve bu etkileşimlerin nedenlerini belirleyip optimize etmenize yardımcı olması için laboratuvar verilerini kullanma sürecinde size yol gösterecek INP'yi optimize etmeyle ilgili bir kılavuz koleksiyonu mevcuttur.

Değişiklik günlüğü

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

Bu metrikleri yönetmenize yardımcı olmak amacıyla, söz konusu metriklerin uygulanmasında veya tanımında yapılan tüm değişiklikler bu Değişiklik Günlüğü'nde gösterilecektir.

Bu metrikler hakkında geri bildiriminiz varsa web-vitals-feedback Google grubuna gönderin.

Bilginizi test etme