Hilo principal bloqueado: input delay alto antes de que tu manejador se ejecute

Qué ocurre

El input delay es el tiempo entre el clic del usuario y el momento en que arranca tu manejador de eventos. El manejador puede ser perfectamente rápido — pero si el hilo principal está en mitad de una tarea larga (hidratación, init de analítica, un timer parseando datos), el evento espera en la cola hasta que esa tarea termina.

Es la única fase de INP que tu manejador no puede arreglar, porque el culpable es otro código que estaba ejecutándose.

Cómo reconocerlo

• El input delay domina el desglose de INP; el processing time es corto.
• El problema es intermitente: el mismo botón es rápido o lento según cuándo hagas clic.
• Es peor justo tras la carga de la página, cuando el código de init, la hidratación y los scripts de terceros compiten por el hilo principal.

Cómo solucionarlo

• Encuentra las tareas largas en DevTools Performance (bloques marcados en rojo de más de 50 ms) — la solución va contra ellas, no contra el manejador.
• Divide el trabajo de init en trozos con scheduler.yield(), o aplaza las partes no críticas con requestIdleCallback.
• Inicializa funciones de forma perezosa en el primer uso en lugar de al cargar la página; carga los scripts de terceros con async/defer.

Problema

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

Solución

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