Interaction to Next Paint (INP)

Jeremy Wagner

Chrome kullanım verileri, kullanıcıların bir sayfadaki sürelerinin% 90'ının sayfa yüklendikten sonra harcandığını gösteriyor. Bu nedenle, sayfa yaşam döngüsü boyunca duyarlılığın dikkatli bir şekilde ölçülmesi önemlidir. INP metriği bunu değerlendirir.

Sayfanın duyarlılığı, etkileşimlere hızlı yanıt vermesi 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, online alışveriş sepetine eklediğiniz bir öğenin gerçekten eklenip eklenmediğini, mobil gezinme menüsünün açılıp açılmadığını, giriş formunun içeriğinin sunucu tarafından kimlik doğrulamasından geçip geçmediğini vb. size 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 bildirim gecikirse kullanıcılar sayfanın yeterince hızlı yanıt vermediği izlenimine kapılabilir. INP, geliştiricilerin kullanıcı deneyiminin bu bölümü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. Soldaki örnekte, düşük duyarlılığın nasıl kötü kullanıcı deneyimlerine 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 meydana gelen tüm tıklama, dokunma ve klavye etkileşimlerinin gecikmesini gözlemleyerek sayfanın kullanıcı etkileşimlerine genel olarak yanıt verme oranı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 grup etkinlik işleyicisidir. Örneğin, dokunmatik ekranlı bir cihazdaki "dokunma" etkileşimleri pointerup, pointerdown ve click gibi birden fazla etkinlik içerir. Etkileşimler JavaScript, CSS, yerleşik tarayıcı kontrolleri (ör. form öğeleri) veya bunların bir kombinasyonu tarafından yönlendirilebilir.

Etkileşimin gecikmesi, kullanıcının etkileşime başladığı andan tarayıcının bir sonraki kareyi boyadığı ana kadar geçen süre içinde etkileşimi yönlendiren bir grup etkinlik işleyicinin tek en uzun süre'sinden oluşur.

İyi bir INP puanı nedir?

"İyi" veya "Kötü" gibi etiketleri duyarlılık metriğine sabitlemek zordur. 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 milisaniyeden uzun bir INP, sayfanın duyarlılığının düşük olduğu anlamına gelir.

Etkileşimler neleri içerir?

Etkileşimin birincil sürücüsü genellikle JavaScript olsa da tarayıcılar, onay kutuları, radyo düğmeleri ve CSS tarafından desteklenen kontroller 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özlemlenir:

• Fareyle tıklama.
• Dokunmatik ekranlı bir cihaza dokunma.
• Fiziksel veya dokunmatik klavyede bir tuşa basılması.

Etkileşimler ana dokümanda veya dokümana yerleştirilmiş iFrame'lerde gerçekleşir. Örneğin, yerleştirilmiş bir videoda oynat düğmesini tıklamak. 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'lerde INP'ye ihtiyaç vardır. 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. pointerup ve pointerdown etkinlikleri içeren etkileşimlere dokunun. Etkileşimdeki en uzun süreli 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ı türde duyarlılık metrikleri olduğu anlamına gelir. FID, sayfanın kullanıcı üzerindeki ilk izlenimini değerlendirmek için tasarlanmış bir yükleme duyarlılığı metriği iken INP, sayfanın kullanım süresi içinde ne zaman gerçekleştiği fark etmeksizin genel duyarlılığın daha güvenilir bir göstergesidir.

INP değeri raporlanmazsa ne olur?

Bir sayfanın INP değeri döndürmemesi mümkündür. Bu durum aşağıdakiler dahil olmak üzere çeşitli nedenlerden kaynaklanabilir:

• Sayfa yüklenmiş ancak kullanıcı hiçbir zaman tıklama, dokunma veya klavye tuşuna basma işlemi gerçekleştirmemiş.
• Sayfa yüklendi ancak kullanıcı, kaydırma veya öğelerin üzerine gelme gibi ölçülmeyen hareketler kullanarak sayfayla etkileşime geçti.
• Sayfaya, sayfayla etkileşime geçmek için komut dosyası yazılmamış bir arama tarayıcı veya başsız tarayıcı gibi bir bot tarafından erişiliyor.

INP'yi ölçme

Gerçekçi kullanıcı etkileşimlerini simüle edebileceğiniz ölçüde INP 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, en iyi durumda size yalnızca sayfanın INP değerini değil, aynı zamanda INP değerinin kendisinden sorumlu olan belirli etkileşimin ne olduğunu, etkileşimin sayfa yükleme sırasında mı yoksa sonrasında mı gerçekleştiğini, etkileşimin türünü (tıklama, tuş basma veya dokunma) ve etkileşimin hangi bölümünün yanıt vermeyi etkilediğini belirlemenize yardımcı olabilecek diğer değerli zamanlamaları vurgulayan bağlamsal veriler de sağlar.

Web siteniz Chrome Kullanıcı Deneyimi Raporu'na (CrUX) dahil edilmeye uygunsa PageSpeed Insights'ta CrUX aracılığıyla (ve diğer Önemli Web Verileri) INP için alan verilerini hızlıca alabilirsiniz. En azından web sitenizin INP'sinin kaynak düzeyinde bir resmini alabilirsiniz ancak bazı durumlarda URL düzeyinde veriler 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, sorunlu etkileşimleri laboratuvarda yeniden oluşturma işini çok daha kolay hale getirir.

Ancak saha veriniz olmayabilir. INP bazı laboratuvar araçlarında ölçülebilir olsa da 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 oldukça 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 bir sayfanın etkileşim olmadan yüklenmesini gözlemlediği için sayfanın INP'sini bildirmez. Bu tür durumlarda Toplam Engelleme Süresi (TBT), INP için makul bir proxy metriği olabilir ancak INP'nin tek başına bir alternatifi değildir.

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şturmaya yönelik bazı stratejiler vardır. Stratejiler arasında, yaygın kullanıcı akışlarını takip etmek ve bu süreçteki etkileşimleri test etmek, ayrıca kullanıcı deneyiminin bu önemli bölümünde yavaş etkileşimleri belirlemek için sayfa yüklenirken (ana iş parçacığı genellikle en yoğun olduğunda) sayfayla etkileşim kurmak yer alır.

INP'yi iyileştirme

Sahadaki yavaş etkileşimleri belirleme ve laboratuvar verilerini kullanarak nedenleri tespit etme ve optimize etme sürecinde size rehberlik edecek bir INP optimizasyonu kılavuz koleksiyonu mevcuttur.

Değişiklik günlüğü

Metrikleri ölçmek için kullanılan API'lerde ve bazen de metriklerin tanımlarında zaman zaman hatalar keşfedilir. Bu nedenle, bazen değişiklikler yapılması gerekir ve bu değişiklikler dahili raporlarınızda ve kontrol panellerinizde iyileştirme veya gerileme olarak görünebilir.

Bu metrikleri yönetmenize yardımcı olmak için bu metriklerin uygulanmasında veya tanımında yapılan tüm değişiklikler bu değişiklik günlüğünde gösterilir.

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

Bilginizi test etme