Pelajari cara mendiagnosis pekerjaan yang mahal yang mencegah interaksi pengguna.
Tugas Panjang dapat membuat thread utama tetap sibuk, sehingga menunda interaksi pengguna. Chrome DevTools sekarang dapat memvisualisasikan Tugas yang Panjang, sehingga memudahkan Anda melihat tugas yang perlu dioptimalkan.
Jika menggunakan Lighthouse untuk mengaudit halaman, Anda mungkin familier dengan Waktu untuk Interaktif, yaitu metrik yang menunjukkan kapan pengguna dapat berinteraksi dengan halaman Anda dan mendapatkan respons. Namun, tahukah Anda Tugas Panjang (JavaScript) dapat sangat berkontribusi pada TTI yang buruk?
Apa itu Tugas Panjang?
Tugas Panjang adalah kode JavaScript yang memonopoli thread utama untuk jangka waktu yang lama, sehingga menyebabkan UI "dibekukan".
Saat halaman web sedang dimuat, Tugas Panjang dapat mengikat thread utama dan membuat halaman tidak responsif terhadap input pengguna meskipun terlihat siap. Klik dan ketukan sering tidak berfungsi karena pemroses peristiwa, pengendali klik, dll. belum dilampirkan.
Tugas Panjang dengan CPU yang berat terjadi karena pekerjaan kompleks yang memerlukan waktu lebih dari 50 milidetik. Mengapa 50 md? Model RAIL menyarankan Anda memproses peristiwa input pengguna dalam waktu 50 md untuk memastikan respons yang terlihat dalam 100 md. Jika tidak, hubungan antara tindakan dan reaksi akan terputus.
Apakah ada Tugas Panjang di halaman saya yang dapat menunda interaktivitas?
Hingga saat ini, Anda harus mencari "blok kuning panjang" secara manual dari skrip yang berdurasi lebih dari 50 md di Chrome DevTools atau menggunakan Long Tasks API untuk mencari tahu tugas yang menunda interaktivitas. Ini bisa sedikit rumit.
Untuk memudahkan alur kerja audit performa Anda, DevTools kini memvisualisasikan Tugas yang Panjang. Tugas (ditampilkan dalam warna abu-abu) memiliki tanda merah jika tugas tersebut merupakan Tugas Panjang.
- Catat trace di panel Performa saat memuat halaman web.
- Cari bendera merah di tampilan thread utama. Anda akan melihat tugas sekarang berwarna abu-abu ("Task").
- Mengarahkan kursor ke atas batang akan memberi tahu Anda durasi tugas dan apakah tugas dianggap "lama".
Apa yang menyebabkan Tugas Panjang saya?
Untuk mengetahui penyebab tugas berjalan lama, pilih panel Tugas berwarna abu-abu. Di panel samping di bawah, pilih Bottom-Up dan Group by Activity. Ini memungkinkan Anda untuk melihat aktivitas apa yang paling banyak berkontribusi (secara total) terhadap tugas yang memerlukan waktu begitu lama untuk diselesaikan. Di bawah ini, tampaknya serangkaian kueri DOM yang mahal.
Apa saja cara umum untuk mengoptimalkan Tugas yang Panjang?
Skrip besar sering kali menjadi penyebab utama Tugas Panjang, jadi pertimbangkan untuk membaginya. Perhatikan juga skrip pihak ketiga; Tugas Panjang dapat menghambat konten utama menjadi interaktif.
Bagi semua pekerjaan Anda menjadi potongan-potongan kecil (yang berjalan dalam waktu <50 md) dan jalankan potongan tersebut di tempat dan waktu yang tepat; tempat yang tepat bahkan mungkin berada di luar thread utama, dalam sebuah pekerja. Idle Before Urgent karya Phil Walton adalah bacaan yang bagus untuk topik ini. Lihat juga artikel mengoptimalkan tugas panjang untuk mengetahui strategi umum dalam mengelola dan memecah tugas yang panjang.
Menjaga halaman Anda tetap responsif. Meminimalkan Tugas yang Panjang adalah cara yang bagus 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.