Main thread bloccato: input delay alto prima ancora che il gestore parta

Cosa succede

L'input delay è il tempo tra il clic dell'utente e il momento in cui parte il tuo gestore di eventi. Il gestore può essere perfettamente veloce — ma se il main thread è nel mezzo di un task lungo (idratazione, init analytics, un timer che fa il parsing di dati), l'evento aspetta in coda finché quel task non finisce.

È l'unica fase dell'INP che il tuo gestore non può correggere, perché il colpevole è altro codice che era in esecuzione.

Come riconoscerlo

• L'input delay domina la scomposizione dell'INP; il processing time è breve.
• Il problema è intermittente: lo stesso pulsante è veloce o lento a seconda di quando fai clic.
• È peggiore subito dopo il caricamento della pagina, quando codice di init, idratazione e script di terze parti competono per il main thread.

Come risolverlo

• Trova i task lunghi in DevTools Performance (blocchi segnalati in rosso oltre 50 ms) — la correzione mira a quelli, non al gestore.
• Suddividi il lavoro di init in blocchi con scheduler.yield(), o rinvia le parti non critiche con requestIdleCallback.
• Inizializza le funzionalità in modo lazy al primo uso invece che al caricamento; carica gli script di terze parti con async/defer.

Problema

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

Soluzione

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