Main thread terblokir: input delay tinggi sebelum handler Anda berjalan

Apa yang terjadi

Input delay adalah waktu antara klik pengguna dan saat event handler Anda mulai. Handler-nya sendiri bisa sangat cepat — tetapi jika main thread sedang di tengah tugas panjang (hidrasi, init analitik, timer yang mem-parsing data), event menunggu dalam antrean sampai tugas itu selesai.

Ini satu-satunya fase INP yang tidak bisa diperbaiki handler Anda, karena penyebabnya adalah kode lain yang kebetulan sedang berjalan.

Cara mengenali

• Input delay mendominasi rincian INP; processing time singkat.
• Masalahnya berselang: tombol yang sama cepat atau lambat tergantung kapan Anda mengklik.
• Paling parah tepat setelah halaman dimuat, saat kode init, hidrasi, dan skrip pihak ketiga berebut main thread.

Cara memperbaiki

• Temukan tugas panjang di DevTools Performance (blok bertanda merah di atas 50 ms) — perbaikannya menyasar mereka, bukan handler.
• Pecah pekerjaan init menjadi potongan dengan scheduler.yield(), atau tunda bagian non-kritis dengan requestIdleCallback.
• Inisialisasi fitur secara lazy saat pertama digunakan alih-alih saat halaman dimuat; muat skrip pihak ketiga dengan async/defer.

Masalah

// at page load: one 800 ms task — every click during it waits
initAnalytics()
buildSearchIndex(allProducts)
prefetchRecommendations()

Perbaikan

initAnalytics()
await scheduler.yield()                  // events can run between steps
buildSearchIndex(allProducts)
requestIdleCallback(() => prefetchRecommendations())