Thread principal bloqueada: input delay alto antes mesmo de o manipulador rodar

O que acontece

O input delay é o tempo entre o clique do usuário e o momento em que seu manipulador de eventos começa. O manipulador pode ser perfeitamente rápido — mas se a thread principal está no meio de uma tarefa longa (hidratação, init de analytics, um timer parseando dados), o evento espera na fila até essa tarefa terminar.

É a única fase do INP que seu manipulador não consegue corrigir, porque o culpado é algum outro código que estava rodando.

Como reconhecer

• O input delay domina o detalhamento do INP; o processing time é curto.
• O problema é intermitente: o mesmo botão é rápido ou lento dependendo de quando você clica.
• É pior logo após o carregamento da página, quando código de init, hidratação e scripts de terceiros competem pela thread principal.

Como corrigir

• Encontre as tarefas longas no DevTools Performance (blocos marcados em vermelho acima de 50 ms) — a correção é nelas, não no manipulador.
• Divida o trabalho de init em partes com scheduler.yield(), ou adie as partes não críticas com requestIdleCallback.
• Inicialize recursos de forma preguiçosa no primeiro uso em vez de no carregamento; carregue scripts de terceiros com async/defer.

Problema

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

Correção

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