Interaction to Next Paint Nedir?

Her güncellemede kullanıcının site ile olan deneyimini geliştirmeye çalışan Google, 2022’nin Mayıs ayında yeni bir metrikle bizi tanıştırdı: Interaction to Next Paint(Bir Sonraki Boyayla Etkileşim). 2023 yılının Mayıs ayında gelen güncellemeyle bu metriğin FID (First Input Delay – İlk Giriş Gecikmesi) metriğinin yerine geleceği belirtildi. Interaction to Next Paint hakkında öğrenmek istediklerinizi yazımızda bulabilirsiniz!

Interaction to Next Paint, yani Bir Sonraki Boyayla Etkileşim, bir sitenin kullanıcının site içi aksiyonlarına (tıklama, dokunma, klavye komutları vb.) duyarlılığını ölçen metriktir. Sitelerin bu metrikle ölçülmelerinin nihai hedefi bir sitede, ziyaretçinin giriştiği her etkileşim için, etkileşimi başlattığı andan itibaren gelecek muhtemel kareyle arasındaki gecikmeleri kısaltmaktır.

2024 yılından itibaren Core Web Vitals ölçümlerinde FID yerini alacak olan INP, genel Core Web Vitals algısını kullanıcı deneyimini geliştirme odağına yaklaştıracak gibi görünüyor.

Hangi Interaction INP’de Ölçümlenir?

Son yapılan güncellemeye göre, INP’yi etkilecek etkileşimler şu şekilde:

Mouse ile tıklama yapmak
Dokunmatik bir ekrana dokunmak
Klavyedeki tuşları kullanmak veya dokunmatik bir ekranda klavyeyi kullanmak.

Not: 28 Haziran 2023 tarihindeki güncel makaleye göre site içerisinde gezinmek veya kaydırmak bir INP metriği sayılmıyor. Bu sebeple, klavye ile yapılan kaydırma işlemleri klavyeyle etkileşim anlamına gelse bile INP skorunu etkilemeyecek.

Bir örnekle inceleyecek olursak:

Yukarıdaki grafiğe göre mouse hareketiyle detay butonuna yaklaşıp tıkladığı andan itibaren, akordeon yapıdaki cevap ve görselin açılma anına kadar geçen süre INP olarak adlandırılabilir.

Optimize Edilmiş INP Skoru Kaçtır?

Mobil ve masaüstü olarak iki segmente ayrılarak ölçümlenecek olan bu skor, ilgili cihazdaki sayfa yüklerinin %75’lik diliminin yüklenme süresini gösterecek.

Milisaniyelik olarak belirlenen bu skorlara baktığımızda:

200 milisaniyenin altında ölçümlenen skor iyi bir etkileşim dönütü olduğunu;
200 milisaniye ve 500 milisaniye arasında ölçümlenen skorun geliştirilmesi gerektiğini;
500 milisaniye üstü ölçümlenen skorun sitenin zayıf performans sergilediğini belirttiğini görüyoruz.

Interaction to Next Paint ve Fırst Input Delay Arasındaki Fark Nedir?

Temelde Google, INP metriğini FID ile değiştirerek kullanıcıların sayfayla etkileşimlerini ve bu etkileşim sürecindeki işlemleri bir kullanıcı yolculuğu olarak gördüğünün ve bu yolculuğun kalitesini iyileştirmeyi hedeflediğinin mesajını veriyor.

First Input Delay (İlk Giriş Gecikmesi) ve Interaction to Next Paint arasındaki temel farkı ise şöyle özetleyebiliriz:

INP ilk etkileşimden sonraki süreçte etkileşime geçilen diğer dosyanın gecikme süresini ölçerken, FID ilk etkileşimin kalitesini puanlamaktadır

INP Datası Nasıl Ölçülür?

CrUX (Chrome User Experience Report) ve CrUX in Pagespeed Insights verilerinden yararlanarak sitenizin INP Skorlarını öğrenebilir ve bunları baz alarak hareket edebilirsiniz.

Interaction to Next Paint Skoru Neden Önemlidir?

Dijital dünyanın her alanında hız en büyük metriklerden olmaya devam ediyor. Dolayısıyla INP, Core Web Vitals’da kullanıcı deneyiminin tümünde sitenin tüm etkileşimlerdeki refleksini baz almasını sağlayacak bir metrik olarak yer alacak gibi görünüyor.

Markaların yaşatacağı deneyimle onları pazarlama hunisinin son bölümüne getirmesi pazarlama stratejisi ve operasyonları açısından çok önemli. Bu nedenle yaşatacağı deneyimle kullanıcıyı içeride tutması ve bir daha gelmesini sağlayacak kadar memnun etmesi bu yoldaki en önemli şartlardan biri. İyi bir INP metriği, sitenin bu yolculukta kullanıcının tüm isteklerine iyi refleksler gösterdiği anlamına gelir ve bu yolculuğun sonunda memnun kalan kullanıcı sayısının pozitif ivmelenmesini sağlayabilir.

Interaction to Next Paint (INP) Skoru Nasıl İyileştirilebilir?

INP Skorunun nasıl iyileştirileceği konusunda son yayınlanan makalede Google, net bir operasyon belirtmese de üç başlık altında toplamıştır:

Yük Gecikmesini Minimize Edin: Yüklenme sırasında yüklenme işlemini bloke eden unsurların küçültülerek veya azaltılarak yüklenme sürecini baltalamamak. Örneğin, kullanılmayan kodların JS dosyalarından kaldırılması, büyük hacimli medyaların küçültülmesi ve DOM hacimlerinin minimize edilmesi gibi.
İşlem Süresini Kısaltın: İşlem boyunca CPU kullanımı buradaki işlem süresini artırabilir. Bu CPU kullanımını nasıl minimize etmek gerektiğini sitenizi kontrol ederek öğrenebilirsiniz. Örneğin bir Javascript dosyası işlenmesi gerektiğinden dolayı gecikmeye sebep oluyorsa gerekli alanlarında setTimeout komutu kullanılarak işleme sırası oluşturulabilir.
Sunum Gecikmesini Minimize Edin: Kullanıcıya gösterilecek ve etkileşime geçecek site varlıklarının sunuma hazır hale getirilme süresinin kısaltılması önemli. Bu noktada bir yükleme sırası oluşturabilmek önemli olabilir. Ayrıca, konuşulan küçük, site varlıkları kavramı değerli. Örneğin, HTML, CSS ve Javascript elementleri sadeleştirerek, lazyload elementi kullanılarak DOM hacmini küçültecek optimizasyonlar yapmak;content-visibility gibi elementlerle below the fold – above the fold sistemine katkıda bulunmak.

Her geçen gün dijital ekosistemin aktif bireylerini 360 olarak sarmalayan mecralar, buradaki bireyleri kendi alanlarında tutabilmek adına ilk etkileşimden son etkileşime kadar eşsiz bir deneyim sunmak için çalışmalarını genişletiyor. Google da bu çalışmalara devam eden bir mecralardan biri. Kullanıcının önüne getirdiği tüm seçeneklerin onlar adına en iyi seçenek, en iyi sonuç olmasını hedefliyor. Bu nedenle INP ile, kullanıcının önüne gelen sitelerin, ilk tıklamadan son ana kadar misafirlerine hoş bir deneyim yaşatmasını zorunlu kılacak gibi görünüyor.

Kaynaklar

Interaction to Next Paint (INP). (n.d.). web.dev. https://web.dev/inp/

“Measure and Optimize Interaction to Next Paint (INP) | DebugBear.” Measure and Optimize Interaction to Next Paint (INP) | DebugBear, 13 July 2023, www.debugbear.com/docs/metrics/interaction-to-next-paint.

“Improve Interaction to Next Paint (INP).” Improve Interaction to Next Paint (INP), www.corewebvitals.io/core-web-vitals/interaction-to-next-paint.

Kolci, Erhan. “Interaction to Next Paint (INP) Nedir? – Boosmart.” Boosmart, 11 May 2023, boosmart.com/interaction-to-next-paint-inp-nedir.

Sözer, Buğra, et al. “Yeni Core Web Vitals Metriği: Interaction to Next Paint – Kriko Blog.” Kriko Blog, 23 May 2023, kriko.blog/seo/teknik-seo/yeni-core-web-vitals-metrigi-interaction-to-next-paint.