Tugas Panjang adalah kode JavaScript yang melakukan monopolasi thread utama dalam waktu yang lama, sehingga menyebabkan UI "dibekukan".
Saat halaman 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 yang Panjang dapat meningkatkan Waktu untuk Interaktif Anda secara signifikan.
Chrome DevTools sekarang dapat memvisualisasikan Tugas yang Panjang, sehingga lebih mudah untuk melihat tugas yang perlu dioptimalkan.
Apa yang dianggap sebagai Tugas Panjang?
Tugas Lama CPU yang berat disebabkan oleh pekerjaan kompleks yang memerlukan waktu lebih dari 50 milidetik. Model RAIL menyarankan Anda memproses peristiwa input pengguna dalam waktu 50 milidetik untuk memastikan respons yang terlihat dalam waktu 100 milidetik dan mempertahankan hubungan antara tindakan dan reaksi.
Poin utama: Meskipun model RAIL menyarankan untuk memberikan respons visual terhadap input pengguna dalam 100 milidetik, batas metrik Interaction to Next Paint (INP) memungkinkan hingga 200 milidetik 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" secara manual untuk skrip yang berdurasi lebih dari 50 md di Chrome DevTools atau menggunakan Long Tasks API untuk mencari tahu tugas apa yang menunda interaktivitas.
Untuk memudahkan alur kerja audit performa, DevTools kini memvisualisasikan Tugas yang Panjang. Tugas (ditampilkan dalam warna abu-abu) memiliki tanda merah jika tugas tersebut merupakan Tugas Panjang.
Untuk menggunakan alat visualisasi baru:
- Catat rekaman aktivitas di panel Performa saat memuat halaman web.
- Cari bendera merah di tampilan thread utama. Seharusnya, sekarang tugas ditandai dengan warna abu-abu dan diberi label Task.
- Arahkan kursor ke panel abu-abu. Anda akan melihat dialog yang menunjukkan durasi tugas dan apakah tugas tersebut dianggap sebagai Tugas Panjang.
Apa yang menyebabkan Tugas Panjang saya?
Untuk menemukan penyebab tugas yang panjang, pilih panel Tugas berwarna abu-abu. Di panel bawah, pilih Bottom-Up dan Group by Activity. Ini memungkinkan Anda melihat aktivitas apa yang paling banyak berkontribusi (secara total) terhadap tugas yang memerlukan waktu lama untuk diselesaikan. Dalam contoh berikut, penyebab penundaan terlihat seperti kumpulan kueri DOM yang mahal.
Apa saja cara umum untuk mengoptimalkan Tugas yang Panjang?
Skrip besar sering kali menjadi penyebab utama Tugas yang Panjang. Pertimbangkan untuk membaginya. Perhatikan juga skrip pihak ketiga, yang juga dapat berisi Tugas Panjang yang menunda konten utama menjadi interaktif.
Bagi semua pekerjaan Anda menjadi bagian-bagian yang berjalan dalam waktu < 50 md, dan jalankan potongan tersebut di tempat dan waktu yang tepat. Tempat yang tepat untuk beberapa di antaranya mungkin berada di luar thread utama, dalam pekerja layanan. Untuk mendapatkan panduan cara memecah tugas yang panjang, lihat artikel Mengoptimalkan Tugas yang Berjalan Lama dan Tidak Aktif Sampai Penting oleh Phil Walton.
Menjaga halaman Anda tetap responsif. Meminimalkan Tugas yang Panjang adalah cara terbaik untuk memastikan pengguna mendapatkan pengalaman yang menyenangkan saat mengunjungi situs Anda. Untuk mengetahui informasi selengkapnya tentang Tugas Panjang, lihat Metrik Performa yang Berfokus pada Pengguna.