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 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.

Zayıf ve iyi yanıt verme örneği. 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 sorunsuz bir şekilde açar.

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.

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

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

Ancak çok sayıda etkileşim içeren sayfalarda rastgele kesintiler, aksi takdirde duyarlı olan bir sayfada alışılmadık derecede yüksek gecikmeli etkileşimlere neden olabilir. Belirli bir sayfada ne kadar fazla etkileşim gerçekleşirse bu durumun gerçekleşme olasılığı o kadar artar.

Etkileşim sayısı yüksek olan sayfaların gerçek duyarlılığını daha iyi ölçmek için her 50 etkileşimde en yüksek etkileşimi yoksayarız. Sayfa deneyimlerinin büyük bir kısmında 50'den fazla etkileşim yoktur. Bu nedenle, genellikle en kötü etkileşim raporlanır. Ardından, tüm sayfa görüntülemelerinin 75. yüzdelik dilimi her zamanki gibi raporlanır. Bu sayede, kullanıcıların büyük çoğunluğunun deneyimlediği veya daha iyi bir değer sunmak için aykırı değerler de kaldırılır.

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.
İyi INP değerleri 200 milisaniye veya daha az, kötü değerler 500 milisaniyeden fazladır. Bu değerler arasındaki değerlerde iyileştirme yapılması gerekir.
İyi INP değerleri 200 milisaniye veya daha kısadır. Yetersiz değerler 500 milisaniyeden fazladır.

Etkileşimler neleri içerir?

Ana iş parçacığındaki bir etkileşimi gösteren diyagram. Kullanıcı, görevlerin çalışmasını engellerken giriş yapar. Giriş, bu görevler tamamlanana kadar ertelenir. Ardından işaretçi yukarı, fare yukarı ve tıklama etkinlik işleyicileri çalıştırılır. Sonraki kare sunuluncaya kadar oluşturma ve boyama işlemi başlatılır.
Etkileşimin ömrü. Etkinlik işleyicileri çalışmaya başlayana kadar giriş gecikmesi yaşanır. Bu durum, ana iş parçacığındaki uzun görevler gibi faktörlerden kaynaklanabilir. Ardından etkileşimin etkinlik işleyicisi geri çağırma işlevleri çalıştırılır ve sonraki kare sunulmadan önce bir gecikme yaşanır.

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.

İ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ılmasını sağlayan bir fare aşağı etkinliğidir.
Birden çok etkinlik işleyiciyle etkileşimin tasviri. Kullanıcı bir fare düğmesini tıkladığında etkileşimin ilk kısmı bir giriş alır. Ancak fare düğmesi bırakılmadan önce bir çerçeve gösterilir. Kullanıcı fare düğmesini bıraktığında, bir sonraki kare sunulmadan önce başka bir dizi etkinlik işleyicinin çalıştırılması gerekir.

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

INP metriğinin birincil hedefi nedir?

Bir sayfanın ilk içeriğinin görüntülenmesi için geçen süreyi ölçmek için.
Yanlış: Bu, İlk Zengin İçerikli Boyama'yı tanımlar.
Bir sayfanın görsel kararlılığını ölçmek ve beklenmedik düzen kaymalarını en aza indirmek için
Incorrect - This describes Cumulative Layout Shift
Bir sayfanın tamamen etkileşime hazır hale gelmesi için geçen süreyi değerlendirmek için
Yanlış: Bu, etkileşime geçme süresiyle ilgilidir ancak INP özellikle kullanıcı girişine verilen yanıta odaklanır.
Kullanıcının başlattığı tüm veya çoğu etkileşim için kullanıcının etkileşim başlattığı andan sonraki karenin boyanmasına kadar geçen süreyi en aza indirmek amacıyla.
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.)

Fareyle tıklama.
Doğru!
Fare tekerleği veya dokunmatik yüzeyle sayfayı kaydırabilirsiniz.
Yanlış: INP kaydırmayı dikkate almıyor
Dokunmatik ekrana dokunma.
Doğru!
Fare imlecini öğelerin üzerine getirin.
Yanlış: INP, fareyle üzerine gelme işlemini dikkate almaz.
Klavyedeki bir tuşa basılması.
Doğru!
Sayfayı yakınlaştırma veya uzaklaştırma.
Yanlış: INP, yakınlaştırmayı dikkate almaz

INP için bir etkileşimin "gecikmesi" nasıl tanımlanır?

Tarayıcının bir etkileşimin etkinlik işleyicilerini işlemesi için geçen 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 oluşturması için geçen 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 değer 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 gösterildiği ana kadar geçen süre.
Doğru!

INP ile FID arasındaki fark nedir?

INP, bir sayfanın ilk içeriğinin gösterilmesi için geçen süreyi ölçerken FID, kullanıcı girişine verilen yanıtı ölçer.
Yanlış: Bu, INP'yi değil, İlk Zengin İçerikli Boyama'yı açıklar.
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şime hazır hale geldiği farklı zaman damgalarını ölçer.
Yanlış: INP ve FID, etkileşimlerin ne zaman gerçekleştiğinden bağımsız olarak sayfanın etkileşimlere ne kadar hızlı yanıt verdiğini ölçer.
Aralarında fark yoktur. INP ve FID, aynı metrik için iki farklı addır.
Yanlış: Bu terimlerin farklı tanımları vardır.

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 özel kitaplıklar aracılığıyla performanslarını kendi kendilerine bildirmesine bağlı değildir.
CrUX veri kümesinde anlamlı bir INP değeri hesaplamak için Chrome kullanıcılarından yeterli etkileşim verisi yok.
Doğru!
Kullanıcılar sayfayla yalnızca kaydırma ve fareyle üzerine gelme işlemleriyle etkileşime geçti. Bu işlemler INP için dikkate alınmaz.
Doğru!
Sayfa, INP için otomatik olarak optimize eden bir çerçeve kullanılarak oluşturulduğundan sayfayı bildirmeniz gerekmez.
Yanlış: Çerçeveler INP'ye yardımcı olabilir ancak veriler mevcutsa metrik yine de alakalı ve raporlanır

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

Zorlu koşullar oluşturmak için yavaş ve güvenilir olmayan bir ağ bağlantısına sahip üst düzey bir cihazı simüle etme.
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 durumda, yükleme sırasında yavaş olan etkileşimler kaçırılabilir.
Olası darboğazları belirlemek için yükleme sırasında sayfayla etkileşim kurma ve yaygın 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 ve uç durum etkileşimlerine odaklanma
Yanlış: Yaygın kullanıcı akışları, tipik INP sorunlarını belirlemek için daha alakalı

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