INP'yi gerçekten düşüren dört müdahale

Önce ölçüm, sonra müdahale

INP'nin en can sıkıcı yanı, laboratuvar araçlarında görünmemesidir. Gerçek kullanıcıların gerçek cihazlarda yaptığı etkileşimleri ölçmeden hangi etkileşimin yavaş olduğunu bilemezsiniz. Bu yüzden her INP çalışmasına saha verisi toplayarak başlarız.

1. Uzun görevleri bölün

50 ms'yi aşan her JavaScript görevi, o sırada gelen kullanıcı etkileşimini bekletir. Büyük işleri scheduler.yield() ya da requestIdleCallback ile parçalara ayırmak çoğu zaman tek başına belirgin bir iyileşme sağlar.

2. Olay dinleyicilerini hafifletin

Scroll ve input olaylarına bağlanan ağır işler, tam da kullanıcının etkileşim hâlinde olduğu anda çalışır. Bu işleri throttle etmek veya bir sonraki boş kareye ertelemek gerekir.

3. Gereksiz render'ları kesin

Bileşen tabanlı arayüzlerde tek bir durum değişikliği, ilgisiz onlarca bileşeni yeniden render edebilir. Bu, kullanıcı bir düğmeye bastığında ekranın geç güncellenmesinin en yaygın nedenidir.

4. Üçüncü parti betikleri disipline edin

Ölçtüğümüz projelerin çoğunda ana iş parçacığı süresinin yarıdan fazlası analitik, chat ve reklam betiklerine gidiyordu. Bu betikleri geciktirmek ya da tümüyle sunucu tarafına taşımak, sayfanın kendi kodunu optimize etmekten daha büyük kazanç sağlar.