Tugas Panjang adalah kode JavaScript yang memonopoli thread utama untuk jangka waktu yang lama, sehingga menyebabkan UI "membeku".
Saat halaman dimuat, Tugas Panjang dapat mengikat thread utama dan membuat halaman tidak responsif terhadap input pengguna, meskipun terlihat siap. Klik dan ketukan sering kali tidak berfungsi karena fitur interaktif seperti pemroses peristiwa dan pengendali klik belum dilampirkan ke elemen UI. Oleh karena itu, Tugas Panjang dapat sangat meningkatkan Waktu untuk Interaktif Anda.
Chrome DevTools kini dapat memvisualisasikan Tugas Panjang, sehingga mempermudah untuk melihat tugas yang perlu dioptimalkan.
Apa yang dianggap sebagai Tugas Panjang?
Tugas Panjang yang berat CPU-nya disebabkan oleh pekerjaan kompleks yang memerlukan waktu lebih dari 50 md. Model RAIL menyarankan Anda memproses peristiwa input pengguna dalam 50 md untuk memastikan respons yang terlihat dalam 100 md dan mempertahankan koneksi antara tindakan dan reaksi.
Poin penting: Meskipun model RAIL menyarankan untuk memberikan respons visual terhadap input pengguna dalam waktu 100 md, nilai minimum metrik Interaction to Next Paint (INP) memungkinkan hingga 200 md untuk menetapkan ekspektasi yang lebih dapat dicapai, terutama untuk perangkat yang lebih lambat.
Apakah ada Tugas Panjang di halaman saya yang dapat menunda interaktivitas?
Hingga saat ini, Anda harus mencari "blok kuning panjang" skrip secara manual yang panjangnya lebih dari 50 md di Chrome DevTools atau menggunakan Long Tasks API untuk mengetahui tugas apa yang menunda interaktivitas.
Untuk membantu mempermudah alur kerja audit performa, DevTools kini memvisualisasikan Tugas Panjang. Tugas (ditampilkan dalam warna abu-abu) memiliki tanda merah jika merupakan Tugas Panjang.
Untuk menggunakan alat visualisasi baru:
- Rekam rekaman aktivitas di Panel performa saat memuat halaman web.
- Cari tanda merah di tampilan thread utama. Anda akan melihat tugas kini ditandai dengan warna abu-abu dan diberi label Tugas.
- Tahan kursor di atas batang abu-abu. Anda akan melihat dialog yang menampilkan durasi tugas dan apakah tugas tersebut dianggap sebagai Tugas Panjang.
Apa yang menyebabkan Tugas Panjang saya?
Untuk menemukan penyebab tugas yang lama, pilih panel Tugas berwarna abu-abu. Di panel samping di bawah, pilih Bottom-Up dan Group by Activity. Hal ini memungkinkan Anda melihat aktivitas apa yang paling berkontribusi (secara total) pada tugas yang memerlukan waktu begitu lama untuk diselesaikan. Dalam contoh berikut, penyebab keterlambatan terlihat seperti kumpulan kueri DOM yang mahal.
Apa saja cara umum untuk mengoptimalkan Tugas Panjang?
Skrip besar sering kali menjadi penyebab utama Tugas Panjang. Pertimbangkan untuk memisahkannya. Perhatikan juga skrip pihak ketiga, yang juga dapat berisi Tugas Panjang yang menunda konten utama menjadi interaktif.
Bagi semua pekerjaan Anda menjadi beberapa bagian yang berjalan dalam waktu < 50 md, dan jalankan bagian ini di tempat dan waktu yang tepat. Tempat yang tepat untuk beberapa di antaranya mungkin berada di luar thread utama, di pekerja layanan. Untuk panduan membagi tugas yang lama, lihat Mengoptimalkan Tugas yang Lama dan Idle Until Urgent dari Phil Walton.
Pastikan halaman Anda tetap responsif. Meminimalkan Tugas Panjang adalah cara yang bagus untuk memastikan pengguna Anda mendapatkan pengalaman yang menyenangkan saat mengunjungi situs Anda. Untuk informasi selengkapnya tentang Tugas Panjang, lihat Metrik Performa yang Berfokus pada Pengguna.