Long Tasks API (PerformanceObserver Long Tasks)

TL;DR: Long Tasks API mendeteksi tugas JavaScript di main-thread yang berdurasi lebih dari 50 ms. Tugas panjang ini adalah penyebab utama responsivitas buruk dan skor INP yang merah, terutama di perangkat menengah-bawah Indonesia.

Apa itu Long Tasks API?

Long Tasks API adalah bagian dari PerformanceObserver yang membiarkan developer "mendengarkan" semua blok kerja JavaScript yang menahan main-thread lebih dari 50 milidetik. Spesifikasi 50 ms berasal dari batas RAIL Model milik Google: di atas itu, pengguna mulai merasakan halaman tidak responsif. Long Tasks API tidak memperbaiki masalah secara otomatis, tapi menunjukkan dengan tepat skrip atau handler mana yang menjadi biang.

Cara Memakainya

new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log('[Long task](/glosarium/long-task)', entry.duration, entry.name);
  }
}).observe({ type: 'longtask', buffered: true });

Field [attribution](/glosarium/attribution) dalam entry memberi tahu container script (iframe, ad, third-party) yang menyumbang durasi terbesar. Ini melengkapi data dari TBT lab dan data field [CrUX](/glosarium/crux).

Kenapa Penting?

Untuk marketer, Long Tasks API adalah cara objektif menjawab pertanyaan, "siapa yang membuat website lambat berinteraksi?". Dalam beberapa audit klien e-commerce, dua dari tiga long task ternyata berasal dari skrip pihak ketiga (chat widget, pixel iklan), bukan kode aplikasi sendiri. Mengetahui hal ini mengubah keputusan mitigasi: bukan refactor kode, tapi load skrip pihak ketiga lebih lambat atau via Web Worker.

Pertanyaan Umum

Apakah Long Tasks API tersedia di semua browser?

Per April 2026, dukungan baik di Chromium dan Edge. Safari dan Firefox masih terbatas, jadi data yang dikumpulkan bias ke pengguna Chrome.

Apakah saya perlu memasangnya di production?

Tidak wajib, tapi sangat membantu. Banyak tim memakai sampling 5-10% pengguna untuk menjaga overhead minimal dan tetap mendapat sinyal.