Interaction to Next Paint (INP) Nedir?
Merhaba Arkadaşlar,
Bugün Web Sitem Ne Kadar Yaşayacak? serilerimin yeni bir yazısı ile karşınızdayım :) Bir süredir bu alanda yeni bir gelişme olmadığından yeni bir yazı yazma ihtiyacı da duymamıştım. Google Web Vitals metriklerine Mart 12'de yeni bir metrik eklendi. Yaklaşık bir sene öncesinde ön tanıtımları yapılsa da bu metrik henüz kullanıma sunulmamıştı.
Bu arada, daha önce web performansı hakkında yazdığım Medium yazılarımı incelemediyseniz, bu yazının hemen ardından diğer yazılarımı buradan okuyabilirsiniz.
Interaction to Next Paint aslında Web Vitals metriklerinde bulunan First Input Delay (FID) metriğinin yeni bir versiyonu ve onun yerine geçmiş bir metrik olarak karşımıza çıkıyor.
Kısaca FID’yi hatırlamak gerekirse…
FID, kullanıcın site üzerinde gerçekleştirdiği ilk girdinin (mouse, keyboard, dokunma eventleri vb.) tepki verme süresi olarak hesaplanıyordu. Fakat kullanıcı deneyimi kullanıcıların ilk aksiyonlarından sonra sonlanmış olmuyor :) Bu nedenle, bu metriğin INP ile güncellenmesi kullanıcı deneyiminin sürekliliğine de daha uygun görünüyor.
Peki nedir bu INP?
Günlük hayatta web platformlarıyla sürekli etkileşim halindeyiz. Bu etkileşimler sırasında animasyonlar ve dinamik içerikler sıkça karşımıza çıkıyor. Tabi bu özelliklerle birlikte, web platformlarının da zaman zaman yükü artıyor ve kullanıcıların etkileşimlerine yanıt verme sürelerinde gecikmeler yaşanabiliyor. Örneğin; bir button’a tıkladığımızda ya da hamburger menüyü açmak için bir etkileşimde bulunduğumuzda platformun bize en hızlı şekilde yanıt vermesini bekliyoruz. INP de tam burada devreye giriyor, size verilen yanıtı 200 ms threshold’uyla değerlendirip, başarılı ya da başarılı olmadığına karar veriyor.
Aşağıdaki görselde gecikme yaşayan kullanıcı ile yaşamayan kullanıcı deneyimini görebiliyoruz:
Önemli bir not; burada scroll ve hover event’leri etkileşim sınıfına dahil olmuyor. Etkileşim sınıfı genel olarak mouse click, klavye aksiyonlarımız olarak nitelendirilebilir. Çünkü bu event’ler kullanıcın doğrudan yanıt beklediği event’lerdir.
Peki bu metriği nasıl iyileştirebiliriz?
Bu metriğin iyileştirilmesi tarafında diğer metriklerimize göre biraz daha teknik sorumluluklarımız oluyor.
- Kullandığımız UI kütüphanelerinin gerekli güncellemelerinin ve uyumlulukların sağlanması.
- Yanıt vermemiz vakit alacaksa, son kullanıcıya parçalı da olsa ilk yanıtı dönüp sonrasında dinamik olarak yanıtımızı zenginleştirebiliriz.
- Etkileşim yapılan objenin yanıt vermek için farklı bir kaynağa bağlanması gerekiyorsa, bu kaynağa bağlanırken aşağıdaki kısımlarda da iyileştirme yapılabilir
- Bu kaynak harici bir URL ise, dns-prefetch özellikleriyle bağlantıda yaşanabilecek zaman kayıplarının önüne geçilebilir.
- Kullanıcının aksiyona girme ihtimali yüksek olan durumlarda, kaynaklar önden çekilerek işlemin süresi optimize edilebilir.
Ek olarak,
Daha önceki yazılarımda da bahsettiğim gibi, web platformlarınız için aşağıdaki aksiyonları her zaman önemsemelisiniz:
- Kullanılmayan ve gereğinden büyük görsellerden kaçınmalısınız.
- Bir görselin web sitesine gerçekten ihtiyacımız olduğu anda yüklenmesini sağlamalısınız.
- Javascript, css, font ve benzeri dosyaların gerçekten minimalist bir yaklaşımda olduğundan emin olmalısınız.
- Düzenli olarak web sitelerimizin performanslarını yardımcı araçlarla takip etmeli ve raporlamalısınız.
Vakit ayırdığınız için teşekkürler,
Diğer makalelerimi okumak için profil sayfamı ziyaret edebilirsiniz.
Kaynaklar:
