Interaction to Next Paint (INP)

Jeremy Wagner

Barry Pollard

Yayınlanma tarihi: 6 Mayıs 2022, Son güncelleme tarihi: 9 Eylül 2025

Chrome kullanım verileri, kullanıcının bir sayfada geçirdiği sürenin% 90'ının sayfa yüklendikten sonra olduğunu gösteriyor. Bu nedenle, sayfa yaşam döngüsü boyunca duyarlılığın dikkatli bir şekilde ölçülmesi önemlidir. Etkileşim Hazırlığı Süresi metriği bunu değerlendirir.

İyi duyarlılık, bir sayfanın etkileşimlere hızlı yanıt vermesi anlamına gelir. Bir sayfa etkileşime yanıt verdiğinde tarayıcı, boyadığı bir sonraki karede görsel geri bildirim gösterir. Görsel geri bildirimler, örneğin, bir öğenin online alışveriş sepetine 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 kimliğinin doğrulanıp doğrulanmadığını ve benzeri bilgileri gösterir.

Bazı etkileşimler diğerlerinden daha uzun sürer. Ancak özellikle karmaşık etkileşimlerde, kullanıcıya bir şeylerin gerçekleştiğini bildirmek için hızlı bir şekilde ilk görsel geri bildirimi sunmak önemlidir. Tarayıcının çizeceği bir sonraki kare, bunu yapmak için en erken fırsattır.

Bu nedenle INP'nin amacı, bir etkileşimin nihai etkilerinin tümünü (ör. ağ getirme işlemleri ve diğer eşzamansız işlemlerden gelen kullanıcı arayüzü güncellemeleri) ölçmek değil, sonraki boyamanın engellendiği süreyi ölçmektir. Görsel geri bildirimin gecikmesi, kullanıcılarda sayfanın yeterince hızlı yanıt vermediği izlenimini yaratabilir. 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 veriliyor. Soldaki örnekte, kötü yanıt verme durumu ve bunun nasıl kötü kullanıcı deneyimlerine yol açabileceği gösterilmektedir.

Bu kılavuzda, Etkileşim Hazırlığı Süresi'nin işleyiş şekli, nasıl ölçüleceği ve iyileştirilmesine yönelik kaynaklar açıklanmaktadır.

INP nedir?

INP, bir sayfanın kullanıcı etkileşimlerine genel olarak yanıt verme oranını değerlendiren metriktir. Bu değerlendirmeyi yapmak için kullanıcının sayfayı ziyaret ettiği süre boyunca meydana gelen tüm tıklama, dokunma ve klavye etkileşimlerinin gecikmesini gözlemler. 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. Etkileşimler JavaScript, CSS, yerleşik tarayıcı kontrolleri (ör. form öğeleri) veya bunların bir kombinasyonu tarafından yönlendirilebilir.

Bir etkileşimin gecikmesi, kullanıcının etkileşime başlamasından tarayıcının bir sonraki kareyi çizebilmesine kadar geçen sürede, etkileşimi yönlendiren bir grup etkinlik işleyicinin en uzun süresinden oluşur. Nadiren de olsa boyanacak bir çerçeve olmayabilir ancak tarayıcı bir çerçeve boyayabildiğinde etkileşim sona erer.

İyi bir INP puanı nedir?

Duyarlılık metriğine "iyi" veya "kötü" gibi etiketler eklemek zordur. Bir yandan, iyi yanıt verme özelliğine öncelik veren geliştirme uygulamalarını teşvik etmek istiyorsunuz. Öte yandan, ulaşılabilir geliştirme beklentileri belirlemek için kullanıcıların kullandığı cihazların özelliklerinde önemli ölçüde değişkenlik olduğunu da göz önünde bulundurmanız gerekir.

İyi yanıt veren kullanıcı deneyimleri sunduğunuzdan emin olmak için ölçülecek iyi bir eşik, mobil ve masaüstü cihazlarda segmentlere ayrılmış olarak sahada kaydedilen sayfa yüklemelerinin yüzde 75'lik dilimidir:

• INP'nin 200 milisaniyenin altında veya bu değerde olması, sayfanın iyi bir duyarlılığa sahip olduğu anlamına gelir.
• INP'nin 200 milisaniyenin üzerinde ve 500 milisaniyenin altında veya bu değerde olması, sayfanın duyarlılığının iyileştirilmesi gerektiği anlamına gelir.
• 500 milisaniyenin üzerindeki bir INP değeri, sayfanın duyarlılığının düşük olduğunu gösterir.

Etkileşimde neler bulunur?

Etkileşimin temel sürücüsü genellikle JavaScript olsa da tarayıcılar, onay kutuları, radyo düğmeleri ve CSS ile desteklenen kontroller gibi JavaScript ile desteklenmeyen kontroller 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 ekran klavyesinde bir tuşa basma

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ıklama. Son kullanıcılar, bir iframe'de ne olduğunu veya olmadığını bilmez. Bu nedenle, üst düzey sayfanın kullanıcı deneyimini ölçmek için iframe'lerde INP gereklidir. 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şimdeki en uzun süreli etkinlik, etkileşimin toplam gecikmesine katkıda bulunur.

Şemada gösterildiği gibi, INP'nin işleme süresi, söz konusu çerçevedeki tüm etkinlik işleyici geri çağırmalarını içerir. Bu durumda, etkileşim için herhangi bir geri çağırma işlenmeden önceki süre giriş gecikmesi, tüm geri çağırmaların yürütülme süresi işleme süresi ve geri çağırmalar yürütüldükten sonra kare kullanıcının ekranında gösterilene kadar geçen süre sunum gecikmesi olur.

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

Etkileşim Hazırlık Süresi'nin (INP) ilk giriş gecikmesinden (FID) farkı nedir?

INP, First Input Delay (FID) metriğinin yerini alacak metriktir. Her ikisi de duyarlılık metriği olsa da FID yalnızca bir sayfadaki ilk etkileşimin giriş gecikmesini ölçer. INP, giriş gecikmesinden başlayıp etkinlik işleyicilerin çalıştırılmasına kadar ve son olarak tarayıcı bir sonraki kareyi çizene kadar bir sayfadaki tüm etkileşimleri gözlemleyerek FID'yi iyileştirir.

Bu farklılıklar, INP ve FID'nin farklı türde yanıt verme hızı 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, etkileşimlerin sayfanın yaşam döngüsünün hangi aşamasında gerçekleştiğinden bağımsız olarak 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üklendi ancak kullanıcı hiçbir zaman tıklamadı, dokunmadı veya klavyesinde bir tuşa basmadı.
• Sayfa yüklendi ancak kullanıcı, kaydırma veya öğelerin üzerine gelme gibi ölçülmeyen hareketlerle sayfayla etkileşimde bulundu.
• Sayfaya, sayfayla etkileşim kurmak için komut dosyası oluşturulmamış bir bot (ör. arama tarayıcısı veya başsız tarayıcı) tarafından erişiliyor.

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

INP, gerçekçi kullanıcı etkileşimlerini simüle edebildiğiniz ölçüde hem gerçek ortamda hem de laboratuvarda ölçülebilir.

Sahada

İdeal olarak, INP optimizasyonu yolculuğunuz alan verileriyle başlar. En iyi durumda, gerçek kullanıcı izleme (RUM) alan verileri size yalnızca bir sayfanın INP değerini değil, aynı zamanda INP değerinin kendisinden hangi etkileşimin sorumlu 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şa basma veya dokunma) ve etkileşimin hangi bölümünün yanıt verme hızını etkilediğini belirlemenize yardımcı olabilecek diğer değerli zamanlamaları da gösterir.

Web siteniz Chrome Kullanıcı Deneyimi Raporu'na (CrUX) dahil edilmeye uygunsa PageSpeed Insights'taki CrUX aracılığıyla INP (ve diğer Önemli Web Verileri) için hızlıca alan verileri alabilirsiniz. En azından web sitenizin INP'si hakkında kaynak düzeyinde bir resim elde edebilirsiniz ancak bazı durumlarda URL düzeyinde veriler de alabilirsiniz.

Ancak CrUX, bir sorun olup olmadığını söyleyebilir ancak soruna neyin neden olduğunu söyleyemez. Bir RUM çözümü, yanıt verme sorunları yaşayan sayfalar, kullanıcılar veya kullanıcı etkileşimleri hakkında daha fazla ayrıntı bulmanıza yardımcı olabilir. INP'yi tek tek etkileşimlere atfedebilmek, tahminde bulunmayı ve boşa harcanan çabayı önler.

Laboratuvarda

İdeal olarak, bir sayfanın yavaş etkileşimlere sahip olduğunu gösteren alan verileriniz olduğunda laboratuvarda test etmeye başlamak istersiniz. Alan verileri, laboratuvarda sorunlu etkileşimleri yeniden üretme işini çok daha kolay hale getirecektir.

Ancak saha verilerinizin olmaması da mümkündür. INP, bazı laboratuvar araçlarında ölçülebilse de laboratuvar testi sırasında bir sayfanın INP değeri, ölçüm döneminde gerçekleştirilen etkileşimlere bağlıdır. Kullanıcı davranışları tahmin edilemez ve çok değişken olabilir. Bu nedenle, laboratuvarda yaptığınız testler, saha verilerinin ortaya çıkarabileceği sorunlu etkileşimleri aynı şekilde ortaya çıkarmayabilir. Ayrıca, bazı laboratuvar araçları yalnızca bir sayfanın yüklenmesini herhangi bir etkileşim olmadan gözlemlediğinden sayfanın INP'sini bildirmez. Bu gibi durumlarda, Toplam Engelleme Süresi (TBT), INP için makul bir vekil metrik olabilir ancak kendi başına 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şturmak için bazı stratejiler vardır. Stratejiler arasında yaygın kullanıcı akışlarını takip etme ve yol boyunca etkileşimleri test etmenin yanı sıra, kullanıcı deneyiminin bu önemli bölümünde yavaş etkileşimleri belirlemek için ana iş parçacığı genellikle en yoğun olduğu sırada sayfa yüklenirken sayfayla etkileşim kurma da yer alır.

JavaScript'te INP'yi ölçme

JavaScript'te INP'yi ölçmek için tüm etkileşimlerin etkinlik zamanlamalarını ölçmeniz ve ardından sayfa kaldırılırken bu etkileşimlerin tamamında 98. yüzdelik dilimi almanız gerekir. INP'nin nasıl hesaplandığına dair referans uygulama içeren web vitals JavaScript kitaplığı kaynak koduna bakabilirsiniz.

Çoğu durumda, sayfa kaldırılırkenki mevcut INP değeri, söz konusu sayfanın nihai INP değeridir. Ancak bir sonraki bölümde belirtildiği gibi birkaç önemli istisna vardır. web vitals JavaScript kitaplığı, Web API'lerinin sınırlamaları dahilinde bu durumları mümkün olduğunca dikkate alır.

Metrik ile API arasındaki farklar

• 104 milisaniyenin altındaki event girişler, varsayılan olarak performans gözlemcileri kullanılarak raporlanmaz. Bu varsayılan değer, durationThreshold parametresi kullanılarak bir performans gözlemcisi kaydedildiğinde değiştirilebilir ancak bu değerin bile minimum değeri 16 milisaniyedir. Bu nedenle, first-input girişinin de gözlemlenmesi önerilir. Bu giriş de bir Etkinlik Zamanlaması girişidir ancak süresi durationThreshold'den kısa olsa bile gözlemlenebileceği garanti edilir. Bu sayede, etkileşim içeren sayfaların her zaman bir INP değeri bildirmesi sağlanır.
• Yüzdelik dilimleri mükemmel bir şekilde hesaplamak için teknik olarak tüm örneklerin bellekte tutulması gerekir. Bu da maliyetli olabilir. Ancak, özellikle p98 gibi çok yüksek yüzdelik dilimleri, yalnızca en kötü N etkileşimin küçük bir listesini tutarak yaklaşık olarak hesaplayabilirsiniz. 10 yaygın bir seçimdir.
• Bir sayfa geri/ileri önbellekten geri yüklenirse kullanıcılar bunu ayrı bir sayfa ziyareti olarak deneyimlediğinden INP değeri sıfıra sıfırlanmalıdır.
• API, iframe'lerde gerçekleşen etkileşimler için event girişini bildirmez ancak metrik, sayfanın kullanıcı deneyiminin bir parçası olduğu için bu girişi bildirir. Bu durum, CrUX ile RUM arasında bir fark olarak görünebilir. INP'yi doğru şekilde ölçmek için bunları göz önünde bulundurmanız gerekir. Alt çerçeveler, event-timing girişlerini üst çerçeveye bildirmek için API'yi kullanabilir.

Bu istisnalara ek olarak, INP'nin sayfanın tüm yaşam süresini ölçmesi nedeniyle bazı ek karmaşıklıkları vardır:

• Kullanıcılar bir sekmeyi çok uzun süre (günler, haftalar, aylar) açık tutabilir. Hatta kullanıcılar sekmeleri hiç kapatmayabilir.
• Mobil işletim sistemlerinde tarayıcılar genellikle arka plan sekmeleri için sayfa kaldırma geri çağırmalarını çalıştırmaz. Bu nedenle, "nihai" değeri bildirmek zorlaşır.

Bu tür durumları ele almak için INP, bir sayfa arka planda olduğunda ve boşaltıldığında (visibilitychange etkinliği bu senaryoların her ikisini de kapsar) bildirilmelidir. Bu verileri alan analiz sistemlerinin de nihai INP değerini arka uçta hesaplaması gerekir.

Geliştiriciler, tüm bu durumları ezberlemek ve bunlarla uğraşmak yerine INP'yi ölçmek için web-vitals JavaScript kitaplığını kullanabilir. Bu kitaplık, iFrame durumu hariç daha önce bahsedilen her şeyi hesaba katar:

import {onINP} from 'web-vitals';

// Measure and log INP in all situations
// where it needs to be reported.
onINP(console.log);

INP nasıl iyileştirilir?

Sahadaki yavaş etkileşimleri belirleme ve nedenlerini tespit edip bunları optimize etmenize yardımcı olacak laboratuvar verilerini kullanma sürecinde size yol gösterecek INP'yi optimize etme kılavuzları mevcuttur.

Değişiklik günlüğü

Metrikleri ölçmek için kullanılan API'lerde ve bazen de metriklerin tanımlarında hatalar keşfedilebilir. 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 durumu 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 metriklerle ilgili geri bildiriminiz varsa web-vitals-feedback Google grubunda paylaşın.

Bilginizi test etme