Bir düğmeye bastığınızda sayfanın hemen tepki vermemesi hem ziyaretçiyi hem de arama performansını olumsuz etkiler. Etkileşim gecikmesi, yani INP, tam olarak bu bekleyişi ölçen bir Core Web Vitals metriğidir. Sayfa ömrü boyunca yapılan tıklama, dokunma ve klavye girişlerinin yanıt sürelerine bakar ve en yavaş etkileşime yakın değeri raporlar.
INP neyi ölçer ve iyi değer nedir?
Bir etkileşimin süresi üç parçadan oluşur: girişin ana iş parçacığı tarafından işlenmeye başlamasını bekleyen süre, olay işleyicilerinin çalışma süresi ve ekranın yeni haliyle çizilmesi için geçen süre. Google’ın eşiklerine göre 200 milisaniye ve altı iyi, 200 ile 500 arası geliştirilmesi gereken, 500 üzeri zayıf kabul edilir. Değerlendirme, gerçek kullanıcılardan toplanan verinin yüzde 75’lik diliminde yapılır. Yani ziyaretçilerin çoğunun deneyimi iyi olmalıdır.
Sorunlu etkileşimleri nasıl bulursunuz?
Önce Search Console’daki Core Web Vitals raporuna ve PageSpeed Insights’taki gerçek kullanıcı verisine bakın. Hangi sayfa gruplarının yavaş olduğunu buradan görürsünüz. Ardından Chrome geliştirici araçlarındaki Performance panelinde o sayfayı kaydedin, menü açma, filtre seçme, sepete ekleme gibi etkileşimleri tek tek deneyin. Uzun görevler kırmızı işaretle gösterilir. Daha kesin sonuç için web-vitals kütüphanesiyle kendi sitenizden saha verisi toplayıp hangi öğenin yavaş kaldığını kaydedebilirsiniz. Laboratuvar testleri etkileşim yapmadığı için INP’yi tek başına yakalayamaz, bu yüzden elle deneme şarttır.
Gecikmeyi azaltmanın yolları
En yaygın neden ana iş parçacığını 50 milisaniyeden uzun süre meşgul eden JavaScript’tir. Büyük işlemleri küçük parçalara bölün ve aralarda tarayıcıya nefes aldırın; setTimeout veya scheduler.yield gibi yöntemler bu iş için kullanılır. Kullanıcıya görünen geri bildirimi önce verin, ağır hesaplamayı sonraya bırakın. Kullanılmayan üçüncü taraf betiklerini kaldırın, sohbet, analiz ve reklam kodlarını sayfa yüklendikten sonra çalışacak şekilde erteleyin. Etkileşim anında ağır çalışan olay işleyicilerini sadeleştirin, kaydırma ve yazma gibi sık tetiklenen olaylarda debounce kullanın.
Çizim maliyetini düşürün
Tarayıcı yanıtı ekrana yansıtırken büyük bir DOM ağacıyla uğraşıyorsa süre uzar. Sayfadaki öğe sayısını azaltın, çok uzun listelerde yalnızca görünen kısmı oluşturun, ekran dışındaki bölümler için content-visibility özelliğini değerlendirin. Düzeni tekrar tekrar hesaplatan kod kalıplarından, örneğin okuma ve yazma işlemlerini art arda karıştırmaktan kaçının. Animasyonlarda mümkün olduğunca transform ve opacity özelliklerini tercih edin.
INP iyileştirmesi tek seferlik bir işlem değildir. Her yeni eklenti veya betik sonrasında ölçümü tekrarlayın, sorunlu etkileşimleri tek tek ele alın ve değişikliklerin saha verisine yansımasını birkaç hafta boyunca izleyin.