Digital Transformation
Main Thread (Browser)
TL;DR: Main thread adalah jalur tunggal eksekusi di browser yang memproses HTML, JavaScript, CSS, layout, dan paint. Karena hanya satu, jika ada task lebih dari 50 ms ia menjadi long task dan memblokir interaksi. Skor INP, TBT, dan FID semua bergantung pada keramaian main thread. Strategi mengurangi beban: kode lebih ringan, kerjaan ke Web Worker, atau jadwalkan ulang lewat requestIdleCallback dan postTask.
Apa itu Main Thread?
Setiap tab browser modern menjalankan satu main thread plus beberapa thread sekunder (compositor, raster, service worker, Web Worker). Yang paling sering jadi bottleneck adalah main thread karena ia bertanggung jawab atas hampir semua pekerjaan yang langsung memengaruhi visual dan respons UI. Saat pengguna mengetik di form, klik tombol, atau scroll halaman, browser harus menggambar frame baru pada main thread. Jika main thread sedang sibuk eksekusi JavaScript besar, interaksi tertunda.
Analogi sederhana: main thread seperti kasir tunggal di minimarket. Antrean panjang berarti pelanggan menunggu lama, meski stok barang melimpah. Web Worker dan thread lain adalah kasir di belakang yang bisa membantu prep, tapi pembayaran tetap di kasir utama.
Apa yang Memberatkan Main Thread
Sumber beban paling sering ditemui di proyek client Indonesia:
- Third-party scripts: GTM, Hotjar, chat widget, retargeting pixel. Sering muncul sebagai Long Task.
- JavaScript framework runtime: React hydration, Vue mount, terutama saat halaman pertama.
- Inline scripts besar: library yang di-load synchronous di
<head>. - Layout thrashing: loop yang baca-tulis DOM bolak-balik memicu reflow.
- Bundle JS gemuk: angka aman first-load Next.js di bawah 200 KB. Audit pakai Bundle Analyzer.
Cara Mengurangi Beban Main Thread
Praktik standar berdasarkan dokumentasi web.dev:
| Teknik | Kapan dipakai |
|---|---|
| Code splitting | Saat first-load JS > 200 KB |
requestIdleCallback | Tugas non-kritis (analytics, sync) |
| Web Worker | Komputasi berat (parsing besar, kompresi) |
defer / async script | Third-party non-kritis |
| Lazy hydration | Komponen interaktif di bawah lipatan |
Pantau dengan Chrome DevTools Performance panel atau Long Task API di field. Untuk monitoring jangka panjang, kirim sample ke endpoint analytics pakai PerformanceObserver.
Kenapa Penting?
Skor INP yang buruk hampir selalu berasal dari main thread yang macet saat interaksi datang. Dari pengalaman 7+ tahun menangani performance audit, sumber utama adalah third-party tag dan hydration React yang tidak dipecah. Membersihkan main thread bukan optimasi micro, ini berdampak langsung pada INP yang sekarang faktor Core Web Vitals resmi.
Pertanyaan Umum
Apakah Web Worker bisa menggantikan main thread sepenuhnya?
Tidak. Web Worker tidak punya akses DOM. Pakai Web Worker untuk komputasi murni (parsing, math, compression). DOM manipulation harus tetap di main thread.
Bagaimana cara tahu task mana yang paling berat?
Buka Chrome DevTools Performance, rekam interaksi pengguna, lalu cari blok merah di track Main. Atau di production, pakai Long Task API untuk mengirim sample task durasi tinggi ke endpoint logging.