Main thread blocked: high input delay before your handler even runs

What is happening

Input delay is the time between the user's click and the moment your event handler starts. The handler itself can be perfectly fast — but if the main thread is in the middle of a long task (hydration, analytics init, a timer parsing data), the event waits in the queue until that task finishes.

This is the only INP phase your handler can't fix, because the culprit is some other code that happened to be running.

How to recognise it

• Input delay dominates the INP breakdown; processing time is short.
• The problem is intermittent: the same button is fast or slow depending on when you click.
• It is worst right after page load, when init code, hydration and third-party scripts compete for the main thread.

How to fix it

• Find the long tasks in DevTools Performance (red-flagged blocks over 50 ms) — the fix targets them, not the handler.
• Split init work into chunks with scheduler.yield(), or defer non-critical parts with requestIdleCallback.
• Lazy-init features on first use instead of at page load; load third-party scripts with async/defer.

Problem

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

Fix

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