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 berbagai aktivitas yang terjadi di browser untuk mendorongnya. Namun, kesamaannya adalah bahwa semua peristiwa tersebut mengalami beberapa penundaan input sebelum callback peristiwanya mulai berjalan. Dalam panduan ini, Anda akan mempelajari apa yang dimaksud dengan jeda input, dan apa yang dapat Anda lakukan untuk meminimalkannya sehingga interaksi situs Anda berjalan lebih cepat.
Apa yang dimaksud dengan penundaan input?
Penundaan input adalah jangka waktu yang dimulai sejak pengguna pertama kali berinteraksi dengan halaman—seperti mengetuk layar, mengklik dengan mouse, atau menekan tombol—hingga saat callback peristiwa untuk interaksi tersebut mulai berjalan. Setiap interaksi dimulai dengan sejumlah penundaan input.
Sebagian penundaan input tidak dapat dihindari: sistem operasi selalu membutuhkan waktu untuk mengenali peristiwa input dan meneruskannya ke browser. Namun, bagian dari penundaan input tersebut sering kali tidak terlihat, dan ada hal lain yang terjadi di halaman itu sendiri yang dapat membuat penundaan input cukup lama untuk menyebabkan masalah.
Cara mempertimbangkan penundaan input
Secara umum, Anda ingin setiap bagian interaksi berlangsung sesingkat mungkin sehingga situs Anda memiliki peluang terbaik untuk memenuhi nilai minimum "baik" metrik Interaction to Next Paint (INP), terlepas dari perangkat pengguna. Menjaga penundaan input hanya merupakan salah satu bagian dari memenuhi nilai minimum tersebut.
Oleh karena itu, Anda sebaiknya menargetkan penundaan input sesingkat mungkin untuk memenuhi nilai minimum "baik" INP. Namun, Anda harus menyadari bahwa Anda tidak dapat sepenuhnya menghilangkan penundaan input. Selama Anda menghindari pekerjaan thread utama yang berlebihan saat pengguna mencoba berinteraksi dengan halaman Anda, penundaan input harus cukup rendah untuk menghindari masalah.
Cara meminimalkan penundaan input
Seperti yang telah 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 biasa digunakan di JavaScript yang dapat berkontribusi pada penundaan input: setTimeout
dan setInterval
. Perbedaan di antara keduanya adalah setTimeout
menjadwalkan callback untuk dijalankan setelah waktu yang ditentukan. Di sisi lain, setInterval
menjadwalkan callback untuk dijalankan setiap n milidetik selama-lamanya, atau hingga timer dihentikan dengan clearInterval
.
setTimeout
itu sendiri tidak bermasalah—bahkan, setTimeout
dapat membantu menghindari tugas yang panjang. Namun, hal ini bergantung pada kapan waktu tunggu habis, dan apakah pengguna mencoba berinteraksi dengan halaman saat callback waktu tunggu habis berjalan.
Selain itu, setTimeout
dapat dijalankan dalam loop atau rekursif, yang bertindak lebih seperti 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 cenderung mengganggu interaksi. Hal ini karena—tidak seperti satu instance panggilan setTimeout
, yang merupakan callback satu kali yang mungkin mengganggu interaksi pengguna—sifat berulang setInterval
membuatnya jauh lebih mungkin akan mengganggu interaksi, sehingga meningkatkan penundaan input interaksi.
Jika timer terjadi dalam kode pihak pertama, Anda memiliki kontrol atas timer tersebut. Evaluasi apakah Anda membutuhkannya, atau lakukan yang terbaik untuk mengurangi pekerjaan di dalamnya sebanyak mungkin. Namun, timer dalam skrip pihak ketiga adalah cerita yang berbeda. Anda sering kali tidak memiliki kontrol atas tindakan 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 disebabkannya di situs Anda.
Menghindari tugas yang lama
Salah satu cara untuk mengurangi penundaan input yang lama adalah dengan menghindari tugas yang lama. Jika Anda memiliki pekerjaan thread utama yang berlebihan yang memblokir thread utama selama interaksi, hal itu akan menambah penundaan input untuk mereka sebelum tugas yang lama memiliki kesempatan untuk selesai.
Selain meminimalkan jumlah pekerjaan yang Anda lakukan dalam sebuah tugas—dan Anda harus selalu berusaha melakukan pekerjaan sesedikit mungkin di thread utama—Anda dapat meningkatkan responsivitas terhadap input pengguna dengan membagi tugas yang panjang.
Perhatikan tumpang-tindih interaksi
Bagian yang paling menantang dalam mengoptimalkan INP adalah jika Anda memiliki interaksi yang tumpang-tindih. Tumpang-tindih interaksi berarti setelah berinteraksi dengan satu elemen, Anda melakukan interaksi lain dengan halaman sebelum interaksi awal memiliki kesempatan untuk merender frame berikutnya.
Sumber tumpang-tindih interaksi mungkin sesederhana pengguna 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 utama sangat mahal—seperti dalam kasus umum kolom pelengkapan otomatis saat permintaan jaringan dibuat ke backend—Anda memiliki beberapa opsi:
- Pertimbangkan untuk melakukan debouncing input untuk membatasi frekuensi eksekusi callback peristiwa dalam jangka waktu tertentu.
- Gunakan
AbortController
untuk membatalkan permintaanfetch
keluar sehingga thread utama tidak menjadi padat saat 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 di JavaScript dapat mengaktifkan banyak panggilan requestAnimationFrame
, yang mungkin menghalangi interaksi pengguna. Untuk menyiasatinya, 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 mewakili sebagian besar waktu yang diperlukan interaksi Anda untuk berjalan, penting untuk memahami bahwa setiap bagian dari interaksi memerlukan waktu yang dapat Anda kurangi. Jika mengamati penundaan input yang lama, Anda memiliki peluang untuk menguranginya. Menghindari callback timer berulang, membagi tugas yang panjang, dan mengetahui potensi tumpang-tindih interaksi dapat membantu Anda mengurangi penundaan input, sehingga menghasilkan interaktivitas yang lebih cepat bagi pengguna situs Anda.
Banner besar dari Unsplash, oleh Erik Mclean.