requestIdleCallback API

TL;DR: requestIdleCallback adalah Web API JavaScript yang menjadwalkan fungsi dijalankan saat main thread browser sedang idle. Berbeda dengan setTimeout yang berjalan setelah delay tetap, callback ini menunggu hingga browser tidak sibuk merender frame, lalu menjalankan tugas non-kritis seperti logging analytics, sinkronisasi cache, atau prefetch data. Hasil: skor INP dan TBT lebih rendah karena interaksi pengguna tidak antri di belakang pekerjaan latar.

Apa itu requestIdleCallback?

requestIdleCallback(cb, { timeout }) adalah API yang masuk standar W3C sejak 2016. Browser memanggil cb ketika ada slot kosong di main thread, biasanya saat tidak ada interaksi pengguna dan tidak ada frame yang harus dirender. Setiap pemanggilan menerima objek IdleDeadline dengan method timeRemaining() yang memberi tahu berapa milidetik yang aman dipakai sebelum frame berikutnya.

Analogi sederhana: bayangkan dapur restoran saat jam makan siang. Chef tidak akan menyiapkan dessert besok di tengah rush hour. Tapi pukul 14:30 saat tamu sudah pulang, dapur kosong sebentar, ia mulai prep. requestIdleCallback adalah scheduler yang menunggu momen kosong itu sebelum mengeksekusi tugas latar.

Cara Pakai di Halaman Marketing

Kasus pakai praktis untuk website bisnis:

• Logging analytics non-kritis: kirim event ke GA4 atau backend tanpa memblokir klik berikutnya.
• Sinkronisasi cache lokal: populate IndexedDB dari API setelah halaman selesai LCP.
• Prefetch data sekunder: tarik testimonial atau related products yang muncul di scroll bawah.
• Tracking heatmap: kirim batch koordinat klik tanpa mengganggu interaksi aktif.

const id = requestIdleCallback((deadline) => {
  while (deadline.timeRemaining() > 0 && tasks.length > 0) {
    runTask(tasks.shift());
  }
}, { timeout: 2000 });

Untuk kontrol prioritas lebih granular, kombinasikan dengan Scheduler API postTask. Pakai requestIdleCallback untuk tugas yang boleh tertunda berjam-jam, pakai postTask untuk tugas yang punya prioritas jelas.

Kenapa Penting?

Dari pengalaman menangani Next.js client dengan tag manager tebal, Long Task sering muncul dari script analytics yang dijadwalkan setTimeout(0). Memindahkan script ini ke requestIdleCallback membuat tab terasa lebih responsif. Browser support: Chrome, Edge, Firefox sudah mendukung. Safari belum native, butuh polyfill atau fallback ke setTimeout. Praktik standar: selalu sertakan timeout agar tugas tidak terlalu lama menunggu jika browser tidak pernah idle.

Pertanyaan Umum

Apakah requestIdleCallback bisa menggantikan setTimeout?

Tidak sepenuhnya. setTimeout(cb, 0) tetap berjalan setelah delay minimum (~4 ms) tanpa peduli busy/idle. requestIdleCallback bisa tertunda lama jika browser sibuk. Pakai sesuai kebutuhan: tugas time-sensitive pakai setTimeout, tugas non-kritis pakai requestIdleCallback.

Bagaimana mengukur dampaknya?

Pantau skor INP dan TBT lewat Field Data CrUX sebelum dan sesudah perubahan. Dari studi lapangan, memindahkan analytics dispatcher ke requestIdleCallback umumnya menurunkan TBT 50-150 ms pada halaman dengan banyak third-party script.