Main Thread Blocking

TL;DR: Main thread blocking terjadi ketika skrip berat menyita thread utama browser, sehingga klik dan ketukan pengguna tertunda. Ini penyebab umum skor INP yang buruk. Solusinya: pecah tugas panjang, tunda skrip non-kritis, dan kurangi JavaScript yang dikirim.

Apa itu Main Thread Blocking?

Main thread blocking adalah situasi ketika browser sibuk mengeksekusi satu tugas panjang di thread utama, sehingga tidak bisa merespons input pengguna sampai tugas itu selesai. Bayangkan satu kasir melayani satu pelanggan dengan transaksi rumit, sementara antrean lain menunggu. Selama kasir sibuk, tidak ada yang terlayani. Thread utama menangani rendering, layout, dan respons interaksi, jadi memblokirnya langsung merusak interaktivitas halaman.

Penyebab Umum

• JavaScript bundle besar yang dieksekusi sekaligus (atasi dengan code splitting)
• Kode pihak ketiga (chat, analitik, iklan) yang berat
• Tugas panjang lebih dari 50 ms yang tidak dipecah
• Hydration framework yang berlebihan di awal muat

Kenapa Penting?

Setiap tugas panjang di thread utama adalah jeda yang dirasakan pengguna sebagai "lemot". Berdasarkan praktik optimasi yang saya pakai di proyek client, memecah skrip besar dan menunda pustaka non-kritis sering menurunkan INP secara nyata tanpa mengubah desain. Untuk panduan teknis lengkap, dokumentasi web.dev tentang long tasks menjelaskan strategi memecah pekerjaan thread utama.

Pertanyaan Umum

Apa bedanya dengan TTFB?

TTFB mengukur kecepatan server merespons, terjadi sebelum halaman dirender. Main thread blocking terjadi di browser setelah aset tiba, saat skrip dieksekusi.

Berapa batas tugas dianggap "panjang"?

Tugas yang berjalan lebih dari 50 milidetik dikategorikan long task dan berpotensi menahan respons input.