Long Tasks

TL;DR: Long Tasks adalah tugas JavaScript yang berjalan di main thread lebih dari 50 milidetik dan memblokir browser dari merespons input pengguna. Long tasks adalah penyebab utama skor INP yang buruk. Memecah tugas panjang menjadi potongan kecil membuat halaman terasa lebih responsif.

Apa itu Long Tasks?

Long Tasks adalah blok pekerjaan di main thread browser yang berlangsung lebih dari 50 milidetik tanpa henti. Selama tugas itu berjalan, browser tidak bisa memproses klik, ketukan, atau scroll, sehingga halaman terasa lambat merespons. Konsep ini erat dengan Total Blocking Time dan menjadi penyebab utama nilai INP yang buruk pada Core Web Vitals.

Analoginya seperti satu kasir yang melayani satu pesanan rumit sangat lama, sementara antrean pelanggan lain hanya bisa menunggu. Memecah pesanan itu membuat antrean bergerak lebih lancar.

Penyebab Umum

Kenapa Penting?

Untuk pemilik website bisnis, long tasks langsung memengaruhi seberapa cepat tombol terasa "hidup" saat diklik, dan itu memengaruhi konversi. Dalam beberapa proyek optimasi yang saya kerjakan, mengurangi skrip pihak ketiga dan memecah eksekusi panjang sering memberi perbaikan INP yang terasa. Tim Chrome menjelaskan teknik memecah tugas ini di panduan web.dev tentang long tasks. Praktik umum termasuk code splitting, menunda skrip non-kritis, dan memberi browser jeda dengan teknik yielding.

Pertanyaan Umum

Berapa batas durasi sebuah tugas disebut long task?

Lebih dari 50 milidetik. Di atas ambang itu, browser dianggap terblokir dari merespons interaksi pengguna selama sisa durasi tugas.

Bagaimana cara menemukan long tasks di situs saya?

Gunakan panel Performance di Chrome DevTools atau Lighthouse. Keduanya menandai tugas panjang dengan warna khusus sehingga mudah dilihat bagian mana yang memblokir main thread.