Sonraki boyamayla etkileşim (INP)

Jeremy Wagner

Tarayıcı Desteği

  • Chrome: 96.
  • Kenar: 96.
  • Firefox: Desteklenmez.
  • Safari: desteklenmez.

Kaynak

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ı, çizdiği bir sonraki çerçevede 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 çerçeve, bunu yapmak için en erken fırsattır.

Dolayısıyla, INP'nin amacı bir etkileşimin tüm etkilerini (ağ getirmeleri ve diğer eşzamansız işlemlerden gelen kullanıcı arayüzü güncellemeleri gibi) ölçmek değil, next 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 örnek bir akordeonun açıldığına dair anında görsel geri bildirim verir. Düşük yanıt verme hızı sol taraftaki örnekte ve bunun nasıl olumsuz kullanıcı deneyimlerine yol açabileceği gösterilmektedir.

Kötü-iyi yanıt vermeyle ilgili bir örnek. Sol tarafta, uzun görevler akordeonun açılmasını engeller. Bu durum, kullanıcının deneyimin bozulduğunu düşünerek birden çok kez tıklamasına neden olur. Ana iş parçacığı yetiştiğinde geciken girişleri işler ve bu da akordeonun beklenmedik bir şekilde açılıp kapanmasına neden olur. Sağ tarafta, daha duyarlı bir sayfa akordeonu hızlı ve olaysız bir şekilde açar.

Bu kılavuzda, INP'nin işleyiş şekli ve nasıl ölçüldüğü açıklanmakta ve INP'nin iyileştirilmesine yönelik kaynaklar belirtilmektedir.

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 düzeyini değerlendiren bir metriktir. Nihai INP değeri, aykırı değerler göz ardı edilerek gözlemlenen en uzun etkileşimdir.

INP'nin nasıl hesaplandığıyla ilgili ayrıntılar

INP, bir sayfayla yapılan tüm etkileşimler gözlemlenerek hesaplanır. Çoğu site için en kötü gecikmeye sahip etkileşim INP olarak raporlanır.

Bununla birlikte, çok sayıda etkileşim içeren sayfalarda, rastgele kesintiler, normalde duyarlı olan bir sayfada olağan dışı yüksek gecikmeli etkileşime neden olabilir. Belirli bir sayfada ne kadar fazla etkileşim gerçekleşirse bunun gerçekleşme olasılığı da o kadar yüksek olur.

Etkileşim sayısı yüksek olan sayfaların gerçek duyarlılığını daha iyi ölçmek amacıyla her 50 etkileşim için en yüksek bir etkileşimi göz ardı ederiz. Sayfa deneyimlerinin büyük çoğunluğunda 50'den fazla etkileşim olmadığı için en kötü etkileşim genellikle raporlanır. Daha sonra, tüm sayfa görüntülemelerinin 75. yüzdelik dilimi her zamanki gibi raporlanır. Böylece, kullanıcıların büyük çoğunluğunun deneyimlediği veya daha iyi bir deneyim sunduğu bir değer sunmak için aykırı değerler kaldırılır.

Etkileşim, aynı mantıksal kullanıcı hareketi sırasında tetiklenen bir etkinlik işleyici grubudur. Örneğin, "tap" Dokunmatik ekranlı cihazlardaki etkileşimler 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 kareyi boyadığı ana kadar etkileşimi tetikleyen etkinlik işleyici grubunun en uzun süresinden oluşur.

İyi bir INP puanı nedir?

"İyi" gibi etiketleri sabitleme veya "kötü" bunu test etmek zor. Bir yandan, iyi duyarlılığa öncelik veren geliştirme uygulamalarını teşvik etmek istiyorsunuz. Diğer yandan, ulaşılabilir gelişim beklentileri belirlemek için kullanıcıların kullandığı cihazların özellikleri birbirinden önemli ölçüde değişkenlik gösterdiğini de hesaba katmanız gerekir.

İyi bir yanıt verme hızına sahip kullanıcı deneyimleri sunduğunuzdan emin olmak için iyi bir ölçüm eşiği, alanda kaydedilen sayfa yüklemelerinin mobil ve masaüstü cihazlara göre segmentlere ayrılmış 75. yüzdelik dilimidir:

  • 200 milisaniye'nin altındaki INP, bir sayfanın iyi duyarlılığa sahip olduğu anlamına gelir.
  • 200 milisaniye üzerinde ve altında ya da 500 milisaniye'de INP, bir sayfanın yanıt verme özelliğinin 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.
ziyaret edin.
İyi INP değerleri 200 milisaniye veya daha kısa, zayıf değerler 500 milisaniyeden büyük ve iyileştirilmesi gerekenlerin arasındaki tüm değerlerdir.
İyi INP değerleri 200 milisaniye veya daha kısadır. Yetersiz değerler 500 milisaniyeden fazladır.

Etkileşimde neler var?

Ana iş parçacığındaki etkileşimi gösteren bir diyagram. Kullanıcı, görevlerin çalışmasını engellerken giriş yapar. Giriş, bu görevler tamamlanana kadar ertelenir, ardından işaretçi, fare yukarı ve tıklama etkinlik işleyicileri çalışır ve ardından oluşturma ve boyama işi bir sonraki kare sunulana kadar başlatılır.
Bir etkileşimin ömrü. Muhtemelen ana iş parçacığındaki uzun görevler gibi faktörlerden dolayı etkinlik işleyiciler çalışmaya başlayana kadar bir giriş gecikmesi oluşur. Daha sonra etkileşimin etkinlik işleyici geri çağırması çalışır ve bir sonraki kare sunulmadan önce bir gecikme olur.

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 amaçları doğrultusunda, yalnızca aşağıdaki etkileşim türleri gözlemlenir:

  • Fare ile tıklama.
  • Dokunmatik ekranlı bir cihaza dokunma.
  • Fiziksel klavyede veya ekran klavyesinde bir tuşa basma.
ziyaret edin.

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 neyin olup olmadığının farkında olmaz. Bu nedenle, üst düzey sayfada kullanıcı deneyimini ölçmek için iframe'ler içinde INP olması gerekir. JavaScript Web API'lerinin iframe'lerin içeriğine erişimi olmadığından, bu 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şim içindeki en uzun süresi olan etkinlik, etkileşimin toplam gecikmesine katkıda bulunur.

İki etkileşim içeren daha karmaşık bir etkileşimin tasviri. Bunlardan ilki, fare düğmesi bırakılmadan önce bir çerçeve oluşturan ve sonuç olarak başka bir kare sunulana kadar daha fazla işin başlatıldığı bir fare aşağı etkinliğidir.
Birden fazla etkinlik işleyiciye sahip etkileşimin tasviri. Etkileşimin ilk bölümü, kullanıcı fare düğmesini tıkladığında bir giriş alır. Ancak fare düğmesini bırakmadan önce bir çerçeve gösterilir. Kullanıcı fare düğmesini bıraktığında, sonraki kare sunulmadan önce başka bir etkinlik işleyici serisinin çalışması gerekir.

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

INP ile İlk Giriş Gecikmesi (FID) arasındaki fark nedir?

INP, First Giriş Gecikmesi (FID) yerine kullanılacak metriktir. Her ikisi de yanıt verme metrikleri olsa da FID yalnızca sayfadaki ilk etkileşimin giriş gecikmesini ölçtü. INP, giriş gecikmesinden etkinlik işleyicileri çalıştırmak için gereken süreye ve son olarak tarayıcı bir sonraki kareyi boyayana kadar sayfadaki tüm etkileşimleri gözlemleyerek FID'de iyileşme sağlar.

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 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ş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 edebilmeniz 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 size yalnızca bir sayfanın INP değerini değil, aynı zamanda hangi 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ı gösteren bağlamsal verileri 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.

CrUX, bir sorun olduğunu size bildirse de sorunun nedenini belirtemez. RUM çözümü, yanıt verme sorunları yaşayan sayfalar, kullanıcılar veya kullanıcı etkileşimleri hakkında daha fazla bilgi edinmenize 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 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ı öngörülemez ve son derece değişken olabilir. Yani, laboratuvardaki testleriniz sorunlu etkileşimleri, saha verileriyle aynı şekilde göstermeyebilir. 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 içinde INP'nin yerine geçmez.

Bir sayfanın INP'sini değerlendirme konusunda laboratuvar araçlarında sınırlamalar olsa da, laboratuvarda yavaş etkileşimleri yeniden oluşturmaya yönelik bazı stratejiler mevcuttur. 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 nasıl iyileştirilir?

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 metriklerle ilgili geri bildirimde bulunmak istiyorsanız bunları web-vitals-feedback Google grubunda paylaşın.

Bilginizi test etme

INP metriğinin birincil hedefi nedir?

Bir sayfadaki ilk içeriğin gösterilmesi için gereken süreyi ölçmek
Yanlış - Bu, First Contentful Paint'i tanımlar
Sayfanın görsel kararlılığını ölçmek ve beklenmedik düzen kaymalarını en aza indirmek için.
Yanlış - Bu, Cumulative Layout Shift'i açıklar
Bir sayfanın tamamen etkileşimli hale gelmesi için gereken süreyi değerlendirmek
Yanlış. Bu, Etkileşime Hazır Olma Süresi ile ilgili, ancak INP özellikle kullanıcı girişine yanıt vermeye odaklanır
Kullanıcının başlattığı tüm veya çoğu etkileşim için, kullanıcının bir etkileşimi başlatmasından sonraki karenin boyanmasına kadar geçen süreyi en aza indirmek.
Doğru!

INP'yi hesaplamak için aşağıdaki etkileşim türlerinden hangileri gözlemlenir? (Geçerli olan tüm seçenekleri işaretleyin.)

Fare ile tıklama.
Doğru!
Fare tekerleği veya dokunmatik yüzey ile sayfayı kaydırma.
Yanlış: INP kaydırmayı dikkate almıyor
Dokunmatik ekrana dokunma.
Doğru!
Fare imlecini öğelerin üzerine getirin.
Yanlış - INP fareyle üzerine gelmeyi dikkate almaz
Klavyede bir tuşa basma.
Doğru!
Sayfayı yakınlaştırma veya uzaklaştırma.
Yanlış - INP yakınlaştırmayı dikkate almıyor

"Gecikme" nasıldır? nasıl tanımlanmış?

Tarayıcının, bir etkileşimin etkinlik işleyicilerini işlemesi için gereken süre.
Yanlış: Bu yalnızca işleme süresini hesaba katar, giriş gecikmesi veya sonraki kareyi gösterme süresini dikkate almaz.
Bir sayfadaki tüm etkileşimlerin görsel bir yanıt üretmesi için gereken ortalama süre.
Yanlış: INP ortalamaya değil en uzun etkileşime odaklanır
Tarayıcının bir etkileşimle ilişkili etkinlik işleyicileri işlemeye başlaması için gereken süre.
Yanlış. Bu yalnızca giriş gecikmesini hesaba katar, işleme ve oluşturma süresini hesaba katmaz.
Etkileşimin başlangıcından bir sonraki karenin tamamen sunulduğu ana kadar geçen süre.
Doğru!

INP ile FID arasındaki fark nedir?

INP, bir sayfadaki ilk içeriğin görüntülenmesi için gereken süreyi, FID ise kullanıcı girişine yanıt verme süresini ölçer.
Yanlış: Bu, INP değil, First Contentful Paint'i tanımlar
INP tüm etkileşimlerin tam süresini dikkate alırken, FID yalnızca ilk etkileşimin giriş gecikmesini ölçer.
Doğru!
INP ve FID, bir sayfanın etkileşimli hale geldiği farklı zaman damgalarını ölçer.
Yanlış: INP ve FID, etkileşimlerin ne zaman gerçekleştiğine bakılmaksızın sayfanın etkileşimlere ne kadar hızlı yanıt verdiğini gösteren ölçümlerdir.
Bunlar arasında fark yoktur; INP ve FID, aynı metriğin iki farklı adıdır.
Yanlış - Farklı tanımları var

INP verileri, PageSpeed Insights gibi araçlarda bir sayfa için hangi durumlarda kullanılamayabilir?

Sayfada, INP verilerini raporlamayan özel bir performans ölçümü kitaplığı kullanılıyor.
Yanlış. INP, web platformu API'leri kullanılarak otomatik olarak ölçülür ve sayfaların performanslarını özel kitaplıklar aracılığıyla bildirmesine bağlı değildir.
Chrome kullanıcılarından gelen, CrUX veri kümesinde anlamlı bir INP değeri hesaplamak için yeterli etkileşim verisi yok.
Doğru!
Kullanıcılar, sayfayla yalnızca kaydırarak veya fareyle üzerine gelerek etkileşimde bulunurlar. Bu tür durumlar INP için kabul edilmez.
Doğru!
Bu sayfa, INP için otomatik olarak optimizasyon yapan bir çerçeve kullanılarak oluşturulduğundan bildirimde bulunmaya gerek yoktur.
Yanlış: Çerçeveler INP'ye yardımcı olabilir ancak veri mevcutsa metrik yine de alakalıdır ve raporlanır

Laboratuvar ortamında yavaş etkileşimleri yeniden oluşturmak için en etkili strateji nedir?

Zorlu koşullar oluşturmak için yavaş ve güvenilir olmayan ağ bağlantısına sahip ileri teknoloji bir cihazın simülasyonunu yapma.
Yanlış: Ağ önemli bir rol oynasa da cihaz özelliklerinin yavaş etkileşimlere yol açma olasılığı daha yüksektir
Etkileşimleri yalnızca sayfa tamamen yüklendikten ve boşta olduktan sonra test etme.
Yanlış. Bu hata, yükleme sırasında yavaş olan etkileşimleri kaçırabilir.
Olası performans sorunlarını belirlemek için yükleme sırasında sayfayla etkileşim kurma ve genel kullanıcı akışlarını takip etme.
Doğru!
Çoğu kullanıcının karşılaşma olasılığı düşük olan karmaşık, uçtaki büyük etkileşimlere odaklanır.
Yanlış: Yaygın kullanıcı işlemleri akışları tipik INP sorunlarını tanımlamada daha alakalıdır

✨ Bu test, Gemini 1.5 tarafından oluşturuldu ve gerçek kişiler tarafından incelendi. Geri bildiriminizi paylaşın