Sonraki boyamayla etkileşim (INP)

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, ç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 şeyin olduğunu söyleyen ilk görsel geri bildirimi hızlıca 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 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 etkinlik işleyici grubudur. Ö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 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 veya dokunmatik klavyede bir tuşa basılması.

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. 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ştir.
• 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 INP için alan verilerini PageSpeed Insights'taki CrUX aracılığıyla (ve diğer Önemli Web Verileri için) 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 bireysel etkileşimlerle ilişkilendirebilmek, tahmin yürütmeye ve çabanın boşa gitmesini önler.

Laboratuvarda

Bir sayfanın yavaş etkileşimlere sahip olduğunu gösteren alan verileriniz olduğunda, en ideal olarak laboratuvarda teste başlamak istersiniz. Alan verileri, laboratuvardaki sorunlu etkileşimleri yeniden oluşturma işini çok daha basit bir iş haline getirecektir.

Ancak saha verileriniz 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üğü

Hatalar bazen metrikleri ölçmek için kullanılan API'lerde ve bazen metriklerin tanımlarında keşfedilir. Bu nedenle, bazen değişiklikler yapılması gerekir ve bu değişiklikler dahili raporlarınızda ve kontrol panellerinizde iyileştirmeler veya gerilemeler 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