Cari tahu apa yang dimaksud dengan penundaan input, dan pelajari teknik untuk menguranginya agar interaktivitas lebih cepat.
Interaksi di web adalah hal yang rumit, dengan segala macam aktivitas yang terjadi di browser untuk mendorongnya. Namun, kesamaan yang dimiliki mereka adalah bahwa mereka mengalami beberapa penundaan input sebelum callback peristiwa mulai berjalan. Dalam panduan ini, Anda akan mempelajari apa yang dimaksud dengan penundaan input, dan tindakan yang dapat dilakukan untuk meminimalkannya agar interaksi situs Anda berjalan lebih cepat.
Apa yang dimaksud dengan penundaan input?
Penundaan input adalah periode waktu yang dimulai dari saat pengguna pertama kali berinteraksi dengan halaman—seperti mengetuk layar, mengklik dengan mouse, atau menekan tombol—hingga saat callback peristiwa untuk interaksi mulai dijalankan. Setiap interaksi dimulai dengan sejumlah penundaan input.
Beberapa bagian penundaan input tidak dapat dihindari: sistem operasi selalu membutuhkan waktu untuk mengenali peristiwa input dan meneruskannya ke browser. Namun, bagian penundaan input tersebut sering kali tidak terlihat, dan ada hal-hal lain yang terjadi pada halaman itu sendiri yang dapat membuat penundaan input cukup lama sehingga menyebabkan masalah.
Cara memikirkan penundaan input
Secara umum, Anda ingin membuat setiap bagian interaksi sesingkat mungkin sehingga situs Anda memiliki peluang terbaik untuk memenuhi batas "baik" metrik Interaction to Next Paint (INP), terlepas dari perangkat yang digunakan pengguna. Mendeteksi penundaan input hanyalah salah satu bagian dari memenuhi ambang batas itu.
Anda mungkin tergoda untuk melihat batas Penundaan Input Pertama (FID) untuk menentukan kelonggaran penundaan input—tetapi batas "baik" untuk FID adalah 100 milidetik atau kurang. Jika Anda mencapai nilai minimum ini, Anda akan mengalokasikan setengah dari anggaran untuk INP untuk memasukkan penundaan saja. Hal ini tidak disarankan jika Anda mempertimbangkan bahwa interaksi juga memerlukan waktu untuk menjalankan callback peristiwa dan agar browser dapat menggambar frame berikutnya.
Untuk memenuhi batas "baik" INP, sebaiknya targetkan penundaan input sesingkat mungkin, tetapi Anda tidak boleh berharap untuk menghilangkannya sepenuhnya, karena hal itu tidak mungkin. Selama Anda menghindari pekerjaan thread utama yang berlebihan saat pengguna mencoba berinteraksi dengan halaman Anda, penundaan input Anda harus cukup rendah untuk menghindari masalah.
Cara meminimalkan penundaan input
Seperti yang disebutkan sebelumnya, beberapa penundaan input tidak dapat dihindari, tetapi di sisi lain, beberapa penundaan input dapat dihindari. Berikut beberapa hal yang perlu dipertimbangkan jika Anda mengalami penundaan input yang lama.
Hindari timer berulang yang memulai pekerjaan thread utama yang berlebihan
Ada dua fungsi timer yang umum digunakan di JavaScript yang dapat menyebabkan penundaan input: setTimeout
dan setInterval
. Perbedaan antara keduanya adalah setTimeout
menjadwalkan callback untuk dijalankan setelah waktu yang ditentukan. Di sisi lain, setInterval
menjadwalkan callback untuk dijalankan setiap n milidetik terus-menerus, atau hingga timer dihentikan dengan clearInterval
.
setTimeout
sebenarnya tidak bermasalah—sebenarnya, cara ini dapat membantu untuk menghindari tugas yang berjalan lama. Namun, hal ini bergantung pada kapan waktu tunggu terjadi, dan apakah pengguna mencoba berinteraksi dengan halaman saat callback waktu tunggu berjalan.
Selain itu, setTimeout
dapat dijalankan dalam loop atau secara rekursif, dengan tindakan yang lebih mirip setInterval
, meskipun sebaiknya tidak menjadwalkan iterasi berikutnya hingga iterasi sebelumnya selesai. Meskipun ini berarti loop akan menghasilkan thread utama setiap kali setTimeout
dipanggil, Anda harus berhati-hati untuk memastikan callback-nya tidak melakukan pekerjaan yang berlebihan.
setInterval
menjalankan callback pada interval sehingga lebih mungkin menghalangi interaksi. Hal ini karena—tidak seperti satu instance panggilan setTimeout
, yang merupakan callback satu kali yang mungkin menghalangi interaksi pengguna—sifat berulang setInterval
membuatnya jauh lebih mungkin bahwa hal ini akan menghalangi interaksi, sehingga meningkatkan penundaan input interaksi.
Jika timer terjadi dalam kode pihak pertama, Anda dapat mengontrolnya. Evaluasi apakah Anda membutuhkannya, atau lakukan yang terbaik untuk mengurangi pekerjaan di dalamnya sebanyak mungkin. Namun, timer dalam skrip pihak ketiga berbeda ceritanya. Anda sering kali tidak memiliki kontrol atas apa yang dilakukan skrip pihak ketiga, dan memperbaiki masalah performa dalam kode pihak ketiga sering kali melibatkan kerja sama dengan pemangku kepentingan untuk menentukan apakah skrip pihak ketiga tertentu diperlukan, dan jika ya, hubungi vendor skrip pihak ketiga untuk menentukan tindakan yang dapat dilakukan untuk memperbaiki masalah performa yang mungkin terjadi di situs Anda.
Menghindari tugas yang berjalan lama
Salah satu cara untuk mengurangi penundaan input yang lama adalah dengan menghindari tugas yang berjalan lama. Jika Anda memiliki tugas thread utama berlebihan yang memblokir thread utama selama interaksi, hal tersebut akan menambah penundaan input untuk tugas yang panjang sebelum tugas yang panjang memiliki kesempatan untuk diselesaikan.
Selain meminimalkan jumlah pekerjaan yang Anda lakukan dalam suatu tugas—dan Anda harus selalu berusaha melakukan pekerjaan sesedikit mungkin di thread utama—Anda dapat meningkatkan daya respons terhadap input pengguna dengan membagi tugas yang berjalan lama.
Perhatikan interaksi yang tumpang-tindih
Bagian yang sangat menantang dalam mengoptimalkan INP bisa jadi jika Anda memiliki interaksi yang tumpang-tindih. Tumpang tindih interaksi berarti bahwa setelah Anda berinteraksi dengan satu elemen, Anda melakukan interaksi lain dengan halaman sebelum interaksi awal memiliki kesempatan untuk merender frame berikutnya.
Sumber interaksi tumpang-tindih mungkin sesederhana pengguna yang melakukan banyak interaksi dalam waktu singkat. Hal ini dapat terjadi saat pengguna mengetik di kolom formulir, tempat banyak interaksi keyboard dapat terjadi dalam waktu yang sangat singkat. Jika pekerjaan pada peristiwa tombol sangat mahal—seperti dalam kasus umum kolom pelengkapan otomatis tempat permintaan jaringan dibuat ke backend—Anda memiliki beberapa opsi:
- Pertimbangkan untuk melakukan debouncing input guna membatasi frekuensi callback peristiwa dijalankan dalam jangka waktu tertentu.
- Gunakan
AbortController
untuk membatalkan permintaanfetch
keluar sehingga thread utama tidak menjadi macet dalam menangani callbackfetch
. Catatan: Propertisignal
instanceAbortController
juga dapat digunakan untuk membatalkan peristiwa.
Sumber lain dari peningkatan penundaan input karena interaksi yang tumpang tindih dapat berupa animasi yang mahal. Secara khusus, animasi dalam JavaScript dapat memicu banyak panggilan requestAnimationFrame
, yang mungkin menghalangi interaksi pengguna. Untuk mengatasi hal ini, gunakan animasi CSS jika memungkinkan untuk menghindari antrean frame animasi yang berpotensi mahal—tetapi jika Anda melakukannya, pastikan Anda menghindari animasi non-gabungan sehingga animasi berjalan terutama di thread GPU dan compositor, dan bukan di thread utama.
Kesimpulan
Meskipun penundaan input mungkin tidak merepresentasikan sebagian besar waktu yang diperlukan interaksi untuk berjalan, penting untuk dipahami bahwa setiap bagian dari interaksi memerlukan banyak waktu yang dapat Anda kurangi. Jika Anda mengamati penundaan input yang lama, Anda memiliki peluang untuk menguranginya. Menghindari callback timer berulang, memecah tugas yang berjalan lama, dan menyadari potensi tumpang-tindih interaksi dapat membantu Anda mengurangi penundaan input, sehingga menghasilkan interaktivitas yang lebih cepat bagi pengguna situs.
Hero image dari Unsplash, oleh Erik Mclean.