Google'ın yıllardır alıştığımız Pagespeed yapısı, web sitelerinin hızlı bir şekilde yüklenmesini ve hizmet vermesini sağlamak üzerine kuruludur. Google, ölçülebilir parametreler üreterek ve Chrome'un pazar payından toplanan anonim verilerden yararlanarak bu metrikleri SEO göstergeleri olarak kullanır. 2022'de Next Paint ile Etkileşim'in (INP) kullanıma sunulmasıyla odak noktası yalnızca sayfa yükleme hızından daha geniş bir web performansı perspektifine kaydı. INP yalnızca bir sayfanın ne kadar hızlı yüklendiğini değil aynı zamanda sayfadaki kullanıcı etkileşimlerinin ne kadar hızlı işlendiğini de ölçer. Temel olarak sitede gezinme deneyimini bir Sayfa Hızı ölçümüne dönüştürür.
Kerem'in blogundaGoogle'ın kendi videosunda da güzel bir şekilde açıkladığı bu kavrama uygun olarak "Genel Etkileşim Gecikmesi" terimi öneriliyor. Ancak bu ölçümü tam olarak anlamak için aşağıdaki bölümlerde konuyu daha derinlemesine ele alacağız.
INP Süresinin Açıklaması Nedir?
INP süresi şunları içerir:
- Kullanıcının sayfayla etkileşimi ile olay işleyicisinin yürütülmesi arasında geçen süre.
- Komut dosyasının yürütme süresi.
- Kodun yürütülmesinden çıktının kullanıcıya görüntülenmesine kadar geçen süre.
Bu işlemler genellikle milisaniyeler içinde gerçekleşir, ancak mobil cihazlarda, özellikle de düşük CPU gücüne sahip eski Android telefonlarda bu tür gecikmeler (gecikme) sıklıkla fark edilebilir. Diğer Lighthouse verileri gibi INP verilerinin de anonim olarak toplandığını ve 75. persentil. Bu nedenle amaç, yalnızca üst düzey cihazlarda değil, ortalama cihazlarda iyi performans gösteren uygulamalar oluşturmaktır.
INP Süresinin Gerçek Hayattan Örnekleri
Bu kavramı açıklamak için her gün ziyaret ettiğimiz internet sayfalarından bazı gerçek hayattan örnekler:
E-ticaret Sitesine Adres Girme
Bir e-ticaret sitesinden alışveriş yaparken ve kargo için adres girerken öncelikle ili seçiyorsunuz. Daha sonra ilçe seçmek için seçim kutusuna tıkladığınızda Ajax sonucunun yüklenmesi için bir süre bekliyorsunuz ve belli bir süre sonra ilçe bilgileri yükleniyor. Bu INP'ye iyi bir örnektir. Bu örnekte kullanıcı deneyiminin iyileştirilmesi, kullanıcıyı Ajax süreci hakkında bilgilendirmek için bir "yükleme göstergesi" eklenmesini içerebilir.
Seçimi Sıralama
Ürün listeleme sayfalarında filtreler kullanılırken, filtrelenen ürünler onay kutusuna tıklandıktan sonra düzgün yönetilmezse INP'yi artıracaktır. Daha az karmaşık JS kullanmak ve filtre işlemleri sırasında kullanıcı deneyimini dikkate almak, INP değerinin mümkün olduğu kadar yüksek tutulmasına yardımcı olabilir.
Ürün Fotoğraf Galerileri
Kullanıcıların ürün detay sayfalarındaki bir ürün fotoğrafına tıkladıktan sonra fotoğraf galerisinin yüklenmesini bekledikleri süre INP'yi potansiyel olarak etkileyebilir.
Rezervasyon Düğmesi
"Rezervasyon Yap" butonunun tıklanması ile bir sonraki sayfa arasındaki etkileşim gecikmesi INP'ye bir örnektir.
Sepete Ekle Düğmesi
"Sepete Ekle" düğmesine basıldığında ve ürünün sepete eklenip eklenmediğini merak ederken geçen milisaniyelik gecikme, INP'yi mükemmel şekilde tanımlıyor.
Bu örneklerde görüldüğü gibi hem SEO hem de doğrudan dönüşüm oranlarını etkileyen senaryolarda INP tuzakları mevcuttur.
INP Nasıl Geliştirilir?
- Güncel JS Ön Uç Kitaplıklarını Kullanın: Vue, React ve Angular gibi modern JS ön uç kitaplıklarını kullanarak performansı artırmak, performans ve yeniden kullanılabilirlik avantajları sundukları için faydalıdır.
- JS Kütüphanelerinin Karmaşıklığını En Aza İndirin: Daha az karmaşık JS kütüphanelerinin kullanılması tavsiye edilir. Kişisel olarak jQuery'den mümkün olduğunca kaçınmanızı öneriyorum.
Kabul Edilebilir INP Metrik Düzeyleri
için eşik değerleri iyi, orta ve zayıf INP seviyeleri 200 milisaniye ve 500 milisaniyedir. INP'yi bu eşiklerin altında tutmak, iyi bir kullanıcı deneyimi ve genel web performansını sürdürmek için çok önemlidir.
