INP Input Delay: Causas, Diagnóstico e Correções

Problemas de Interaction to Next Paint (INP) causados por input delay

Esta página faz parte da nossa série sobre Interaction to Next Paint (INP). O INP mede o tempo total desde uma interação do utilizador até à próxima atualização visual. O input delay é a primeira de três fases que compõem o INP, seguida pelo tempo de processamento e pelo atraso de apresentação. Se é novo no INP, leia primeiro o nosso guia sobre como identificar e corrigir problemas de INP.

DICA INP: na maioria das vezes, o input delay ocorre durante as fases iniciais de carregamento da página web. É quando o navegador está mais ocupado a analisar e executar scripts.

O que é o input delay?

O input delay refere-se ao tempo que o navegador demora a começar a processar um callback de evento após o utilizador interagir com uma página web (por exemplo, clicar num botão ou pressionar uma tecla). Embora exista sempre algum input delay (até os navegadores precisam de tempo para agendar os callbacks), o input delay excessivo ocorre quando o navegador está ocupado a executar outras tarefas agendadas e não consegue agendar imediatamente os callbacks solicitados pela interação.

Durante o input delay, o utilizador já realizou a sua ação (clique, toque ou pressão de tecla), mas o navegador ainda não começou a executar o manipulador de eventos associado. O utilizador não vê qualquer resposta. Isto é diferente do tempo de processamento, onde o manipulador de eventos está ativamente em execução, e do atraso de apresentação, onde o navegador está a renderizar a atualização visual. O input delay é puro tempo de espera causado por um thread principal congestionado.

Input delay e o INP

O Interaction to Next Paint (INP) pode ser dividido em 3 sub-partes: "Input Delay", "Processing Time" e "Presentation Delay".

Poderá notar que existem semelhanças de nomenclatura entre o Input Delay e o antigo Core Web Vital "First Input Delay" (FID). O Interaction to Next Paint substituiu o FID como Core Web Vital em março de 2024. O First Input Delay media apenas o tempo entre a primeira interação e o callback do evento. Embora o FID tenha sido descontinuado, o input delay continua a ser importante porque está na base de cada medição do Interaction to Next Paint.

A importância do input delay

Como muitos programadores pensam em melhorar o INP em termos de otimização de funções de callback (otimização do tempo de processamento), o input delay é frequentemente negligenciado. É verdade que o input delay não é normalmente a maior parte do INP, mas se otimizarmos o input delay, frequentemente otimizamos todas as interações INP de uma vez. Reduzir o input delay melhora todas as interações na página, não apenas a pior.

No CoreDash recolhemos milhões de dados de Core Web Vitals por hora. Com base nesses dados, o input delay representa aproximadamente 18% do Interaction to Next Paint. Isso é menos do que o tempo de processamento ou o atraso de apresentação, mas o input delay é frequentemente a fase mais fácil de reduzir porque a causa raiz é quase sempre "demasiado JavaScript a executar no momento errado."

Causas do input delay

O input delay ocorre quando o thread principal está ocupado a executar outras tarefas. Estas tarefas podem ter origem em:

1. Tarefas iniciais. Scripts normais, diferidos e assíncronos que são enfileirados no início criam tarefas iniciais. Estas são a fonte mais comum de input delay porque são executadas durante a janela crítica de arranque, quando os utilizadores têm maior probabilidade de interagir com a página.
2. Tarefas agendadas. Algumas tarefas não são executadas no início do carregamento da página, mas podem ser agendadas para depois do carregamento. Estas tarefas também podem interferir com o INP e causar input delay. Por exemplo, scripts que são executados após o evento window.onload ou scripts que são atrasados por plugins de otimização. Saiba mais sobre quando usar async vs defer para JavaScript.
3. Tarefas repetidas. Tarefas recorrentes via setInterval() que demoram relativamente muito tempo a executar e coincidem com o INP.
4. Callbacks sobrepostos. Callbacks sobrepostos são uma causa comum de input delay. Múltiplos callbacks agendados próximos uns dos outros podem criar uma fila, atrasando o processamento da próxima interação. Por exemplo, um manipulador mouseover que dispara imediatamente antes de um manipulador click pode empurrar o processamento do clique pelo tempo de duração da tarefa mouseover.

Minimizar o input delay

1. Dividir tarefas longas iniciais em múltiplas tarefas mais pequenas. Durante tarefas longas, o navegador não consegue responder à entrada do utilizador, enquanto que após cada tarefa curta, o navegador pode responder à entrada do utilizador. Divida tarefas longas com scheduler.yield() ou envolvendo cada função num timeout de 0 com setTimeout(callback, 0).
2. Gerir elementos interativos. Considere não apresentar elementos interativos (como uma barra de pesquisa) antes de o código JavaScript que os controla estar totalmente carregado. Isto evitará cliques prematuros em elementos que ainda não estão prontos para receber cliques. Para otimizar a UX deste padrão, pode priorizar o carregamento do JavaScript necessário ou ocultar/desativar temporariamente o elemento até que esteja funcional.
3. Execução de scripts em tempo inativo. Agende scripts não críticos para serem executados durante períodos de inatividade do navegador com requestIdleCallback(). Esta função é executada quando o navegador está inativo e não precisa de processar entrada do utilizador.
4. Usar web workers para executar JavaScript fora do thread principal do navegador. Os web workers permitem que scripts sejam executados fora do thread principal. Isto evita que o thread principal bloqueie e cause problemas de input delay no INP.
5. Verificar entrada pendente durante tarefas repetidas. Antes de executar um conjunto de tarefas agendadas, verifique se existe entrada pendente antes de iniciar as tarefas. Se houver alguma entrada pendente, ceda o controlo ao thread principal primeiro.
6. Remover código desnecessário. Audite regularmente os seus scripts e remova qualquer código desnecessário ou mesmo scripts inteiros, porque cada linha de código pode potencialmente causar um input delay que afeta o Interaction to Next Paint. Consulte o nosso guia sobre 14 métodos para diferir JavaScript para técnicas práticas.

Dividir tarefas com scheduler.yield()

A API scheduler.yield() é a forma recomendada de dividir tarefas longas. Ao contrário de setTimeout(callback, 0), que coloca a continuação no final da fila de tarefas, scheduler.yield() preserva a prioridade da tarefa. Isto significa que o navegador retomará o seu código assim que possível após tratar qualquer entrada pendente do utilizador. Aqui está uma função auxiliar reutilizável:

async function yieldToMain() {
  if ('scheduler' in window && 'yield' in window.scheduler) {
    return await window.scheduler.yield();
  }
  // Fallback for browsers without scheduler.yield()
  return new Promise((resolve) => {
    setTimeout(resolve, 0);
  });
}

// Example: break up a long initialization sequence
async function initializeApp() {
  loadCriticalFeatures();
  await yieldToMain();  // Let the browser handle any pending input

  loadSecondaryFeatures();
  await yieldToMain();

  loadAnalytics();
  await yieldToMain();

  loadNonEssentialWidgets();
}

Para mais informações sobre como scheduler.yield() funciona internamente, consulte o blog dos Chrome Developers.

Priorizar tarefas com scheduler.postTask()

Enquanto scheduler.yield() divide tarefas, scheduler.postTask() oferece controlo granular sobre a prioridade das tarefas. A API aceita três níveis de prioridade: "user-blocking" para tarefas críticas que requerem a prioridade mais alta, "user-visible" para tarefas de prioridade média, e "background" para tarefas de prioridade mais baixa que devem ser executadas em tempo inativo.

Usando postTask(), pode garantir que trabalho não essencial não bloqueia as interações do utilizador. Aqui está um exemplo prático que agenda trabalho de analytics com prioridade background enquanto mantém as atualizações de UI com a prioridade mais alta:

// High priority: UI feedback runs first
scheduler.postTask(() => {
  showLoadingSpinner();
}, { priority: 'user-blocking' });

// Medium priority: fetch data
scheduler.postTask(async () => {
  const data = await fetchSearchResults(query);
  renderResults(data);
}, { priority: 'user-visible' });

// Low priority: analytics can wait
scheduler.postTask(() => {
  trackSearchEvent(query);
  sendToAnalytics('search', { query });
}, { priority: 'background' });

Verifique a tabela de suporte de navegadores para scheduler.postTask() antes de o usar em produção. Para navegadores que não suportam a API, use requestIdleCallback() para tarefas em background e queueMicrotask() para tarefas de alta prioridade como fallback.

Implicações práticas

O que isto significa para o seu site? Aqui estão recomendações específicas para WordPress e React/Next.js.

WordPress

O WordPress, devido à sua arquitetura baseada em plugins, frequentemente vem com um tema e um grande número de plugins. Tanto os plugins como os temas dependem frequentemente de JavaScript para funcionalidade. Como estes plugins e temas são mantidos por programadores terceiros, não tem controlo sobre o conteúdo. Isto significa que não pode alterar os ficheiros e otimizar "código mau." Mesmo que os scripts se comportem bem hoje, não há garantia de que o farão após a próxima atualização.

Para minimizar o input delay e otimizar o Interaction to Next Paint (INP) no WordPress, siga os seguintes passos:

• Evite usar plugins sempre que possível. Embora os plugins sejam uma forma fácil de adicionar funcionalidade, frequentemente adicionam scripts à página. Esses scripts causarão um input delay que impacta o INP. Para cada plugin, pergunte-se: consigo alcançar a mesma funcionalidade com código personalizado ou uma solução do lado do servidor?
• Escolha temas leves. Muitos temas WordPress "oferecem tudo." Embora pareça uma ótima ideia, significa que provavelmente estão cheios de funcionalidades não utilizadas que ocupam tempo precioso de CPU.
• Evite construtores de páginas. Construtores de páginas como Elementor ou WPBakery oferecem uma interface visual e amigável para construir layouts. Infelizmente, frequentemente dependem de scripts pesados para apresentar esse layout aos visitantes.
• Carregue scripts apenas quando são necessários. O WordPress tem tendência para carregar todos os scripts em todas as páginas. Para corrigir isto, crie um tema filho e cancele o registo de scripts desnecessários por tipo de página:

function my_deregister_scripts() {
  if ( ! is_page( 'contact' ) ) {
    // Deregister contact form script on non-contact pages
    wp_dequeue_script( 'contact-form-script' );
  }
}
add_action( 'wp_enqueue_scripts', 'my_deregister_scripts' );

• Audite o seu Tag Manager. Os contentores do Google Tag Manager frequentemente acumulam tags ao longo do tempo. Cada tag que dispara durante o carregamento da página adiciona uma tarefa ao thread principal. Remova tags não utilizadas, defina triggers apropriados (por exemplo, dispare tags de marketing apenas em páginas de conversão) e use os relatórios de temporização integrados do Tag Manager para identificar tags lentas.
• Atrase scripts de terceiros não essenciais. Widgets de chat, ferramentas de feedback e embeds de redes sociais não precisam de carregar imediatamente. Use requestIdleCallback() ou um trigger baseado em scroll para os carregar apenas quando o utilizador provavelmente precisará deles. Para estratégias detalhadas, leia o nosso guia sobre 14 métodos para diferir JavaScript.

React / Next.js

Os sites React e Next.js são principalmente alimentados por JavaScript. Executar scripts de arranque, hidratar componentes e processar o DOM virtual consomem tempo e podem causar input delay para o Interaction to Next Paint (INP). A boa notícia é que tanto o React como o Next.js fornecem ferramentas para gerir isto de forma eficaz.

• Use componentes de servidor (React Server Components no Next.js App Router). Os componentes de servidor são renderizados no servidor e enviam zero JavaScript para o cliente, o que reduz diretamente a quantidade de código a competir pelo tempo do thread principal.
• Carregue scripts de terceiros com a estratégia correta. No Next.js, use o componente next/script com strategy="afterInteractive" para scripts necessários após a hidratação, ou strategy="lazyOnload" para scripts que podem carregar durante o tempo inativo do navegador. Consulte o nosso guia async vs defer JavaScript para os princípios subjacentes.
• Implemente um padrão idle-until-urgent. Este padrão prioriza as interações do utilizador sobre tarefas em background usando requestIdleCallback() para inicialização não crítica, mantendo um fallback síncrono que se ativa quando o componente é realmente necessário.
• Faça lazy load de componentes. Faça lazy load de componentes que não são imediatamente necessários usando React.lazy() ou dynamic() do Next.js com { ssr: false } para componentes apenas do lado do cliente.
• Use Suspense para componentes interativos. Envolva componentes interativos em fronteiras <Suspense> para que o resto da página possa renderizar e tornar-se interativa enquanto componentes pesados carregam em segundo plano. Isto evita que um único componente lento bloqueie o processamento de entrada em toda a página.
• Use transições React para atualizações não urgentes. Envolva atualizações de estado não críticas em startTransition() para que o React possa interrompê-las se o utilizador realizar uma nova interação. Isto mantém a UI responsiva mesmo quando re-renderizações grandes estão em progresso.

Explorar as outras fases do INP

Para ter o seu INP sob controlo, aborde também as outras duas fases:

• Processing Time: Otimize o código do manipulador de eventos que é executado durante a interação. Na maioria das páginas, é aqui que a maior parte do esforço de otimização compensa.
• Presentation Delay: Reduza o trabalho de renderização e pintura que se segue ao processamento do evento. Em páginas complexas com DOMs grandes, esta é frequentemente a fase mais longa.

Para um fluxo de trabalho de diagnóstico completo, consulte o nosso guia sobre como encontrar e corrigir problemas de INP, e regresse à página principal do INP para a visão geral completa.