Como Otimizar o INP: O Core Web Vital Que 43% dos Sites Reprovam em 2026

Entenda o INP e a Nova Era das Core Web Vitals

A experiência do usuário em seu site depende de muitos fatores, mas a velocidade e a responsividade são cruciais. Em 2026, as Core Web Vitals – métricas do Google para avaliar a experiência de página – ganham novos contornos com o protagonismo do INP (Interaction to Next Paint). Para desenvolvedores front-end e gestores de performance, compreender e otimizar o INP não é mais uma opção, mas uma necessidade. Se o seu site trava ao ser tocado, é provável que o INP seja o vilão.

Este guia prático vai desmistificar o INP, explicar por que ele se tornou o Core Web Vital mais crítico em 2026 e apresentar um passo a passo com técnicas objetivas para otimizar seu site. Preparado para garantir que seus usuários tenham a melhor interação possível? Vamos lá!

Principais pontos

• O que é INP: A métrica que mede a responsividade de todas as interações do usuário.
• Por que o INP é crucial: Substituiu o FID e é o Core Web Vital com a maior taxa de reprovação em 2026.
• Causas comuns de INP ruim: Scripts de terceiros, hydration de frameworks e long tasks.
• Técnicas de otimização: Quebra de long tasks, otimização de atualizações visuais e gerenciamento de estado.
• Ferramentas essenciais: PageSpeed Insights, Chrome DevTools e outras para diagnóstico e monitoramento.

As Core Web Vitals de 2026: Um Novo Cenário

As Core Web Vitals são um conjunto de métricas definidas pelo Google para medir a experiência do usuário em uma página da web em termos de carregamento, interatividade e estabilidade visual. Para 2026, as três métricas principais são:

• LCP (Largest Contentful Paint): Mede o tempo de carregamento do maior elemento de conteúdo visível na viewport. Um LCP bom é de até 2,5 segundos.
• CLS (Cumulative Layout Shift): Mede a estabilidade visual, ou seja, o quanto os elementos da página se movem inesperadamente durante o carregamento. Um CLS bom é de até 0,1.
• INP (Interaction to Next Paint): Mede a latência de todas as interações do usuário com a página. Um INP bom é de até 200 milissegundos.

O INP se tornou o grande desafio. Ao contrário do antigo FID (First Input Delay), que focava apenas no tempo de resposta da primeira interação, o INP avalia o desempenho de TODAS as interações (cliques, toques, pressionamento de teclas) no percentil 75. Isso significa que o tempo de resposta da 75ª interação mais lenta é o que define a sua pontuação de INP. Com um limite de aprovação de 200 ms, 43% dos sites falham em atender a esse critério, tornando o INP o Core Web Vital mais problemático em 2026, com uma taxa de aprovação de apenas 57%.

Desvendando o INP: A Anatomia de uma Interação

Para otimizar o INP, é fundamental entender as três fases que compõem o tempo de resposta de qualquer interação do usuário:

1. Input Delay: O tempo entre o momento em que o usuário inicia uma interação (por exemplo, clica em um botão) e o momento em que o navegador começa a processar o evento.
2. Tempo de Processamento: O tempo que o navegador leva para executar o código JavaScript associado ao evento.
3. Presentation Delay: O tempo entre o término do processamento do evento e o momento em que o navegador consegue renderizar as atualizações visuais na tela.

O INP é a soma dessas três fases. Um atraso significativo em qualquer uma delas pode levar a uma experiência lenta e frustrante para o usuário. Imagine clicar em um link e a página demorar a responder ou o conteúdo não se atualizar: isso é um INP ruim em ação.

As Causas Mais Comuns de INP Ruim

Identificar a raiz do problema é o primeiro passo para a solução. Em sites modernos, especialmente os desenvolvidos com frameworks como React e Next.js, alguns culpados são recorrentes:

• Scripts de Terceiros Pesados: Anúncios, trackers, widgets de redes sociais e outros scripts de terceiros podem consumir recursos valiosos da CPU, bloqueando a thread principal e atrasando o processamento de interações.
• Hydration de Frameworks: Em frameworks como React, a hydration é o processo de tornar o HTML renderizado no servidor interativo no cliente. Se esse processo for muito longo ou mal otimizado, ele pode criar long tasks que bloqueiam a thread principal após o carregamento inicial.
• Long Tasks: São tarefas JavaScript que levam mais de 50 milissegundos para serem concluídas na thread principal. Qualquer tarefa que bloqueie a thread principal por um período prolongado pode atrasar a resposta a interações do usuário, impactando diretamente o INP.

Técnicas Práticas para Otimizar o INP

A boa notícia é que existem diversas estratégias que você pode aplicar para melhorar o INP do seu site. Vamos detalhar algumas das mais eficazes, com foco em desenvolvedores front-end de aplicações Next.js e React:

1. Quebre Long Tasks com scheduler.yield()

O navegador tem uma thread principal onde executa a maioria das tarefas importantes, incluindo a renderização e o processamento de eventos. Se uma tarefa demora demais (uma long task), ela impede que outras tarefas, como responder a um clique, sejam processadas. A API scheduler.postTask() (ou scheduler.yield() em contextos mais antigos/específicos) permite que você agende tarefas para serem executadas em momentos oportunos, cedendo o controle para o navegador quando possível. Isso garante que a thread principal não fique bloqueada por muito tempo.

// Exemplo conceitual de como quebrar uma tarefa longa
function processLargeData(dataChunk) {
  // ... processamento do chunk ...
  if (moreDataToProcess) {
    return scheduler.yield().then(() => processLargeData(nextDataChunk));
  }
}

// Uso: processLargeData(initialData);

2. Otimize Atualizações Visuais com requestAnimationFrame

Para atualizações de UI que precisam ser animadas ou que dependem do estado visual da tela, requestAnimationFrame é a API ideal. Ela agenda a atualização da animação para o próximo ciclo de repintura do navegador, garantindo que as animações sejam fluidas e eficientes, evitando problemas de layout e repinturas desnecessárias que podem impactar o INP.

// Exemplo de uso para animação suave
let box = document.getElementById('myBox');
let position = 0;

function animate() {
  position += 1;
  box.style.transform = `translateX(${position}px)`;
  
  if (position < 500) {
    requestAnimationFrame(animate);
  }
}

// Inicia a animação
animate();

3. Adie Scripts Não Críticos

Scripts que não são essenciais para a renderização inicial ou para a interatividade imediata da página devem ser adiados. Use os atributos defer ou async nas tags <script>. defer garante que o script seja executado após o parseamento do HTML, na ordem em que aparecem no documento, e async executa o script assim que ele é baixado, sem ordem garantida. Adiar scripts de terceiros, como análises e anúncios, pode liberar a thread principal para interações mais importantes.

4. Minimize Mutacões no DOM em Event Handlers

Alterar o DOM (Document Object Model) é uma operação custosa. Dentro de um manipulador de eventos (event handler), evite fazer múltiplas pequenas alterações no DOM. Agrupe as alterações sempre que possível. Em frameworks como React, isso é gerenciado de forma mais eficiente pelo próprio ciclo de renderização e reconciliação, mas é bom ter em mente que um grande número de mutações diretas no DOM pode impactar a performance.

5. Agrupe Mudanças de Estado

Em aplicações React, múltiplas chamadas de setState consecutivas podem levar a múltiplas re-renderizações. O React otimiza isso automaticamente em muitas situações, mas em casos complexos ou quando se manipula o DOM diretamente, é mais eficiente agrupar várias atualizações de estado em uma única chamada ou usar a forma funcional do setState (setState(prevState => newState)) para garantir que as atualizações ocorram de maneira coalescida, evitando renderizações desnecessárias.

6. Use content-visibility: auto para Conteúdo Fora da Tela

A propriedade CSS content-visibility: auto é uma ferramenta poderosa para otimizar o carregamento e a renderização de páginas longas. Ela permite que o navegador pule o trabalho de renderização (layout, paint) para elementos que estão fora da tela. Quando o usuário rola a página, o navegador renderiza o conteúdo conforme ele entra na viewport. Isso pode reduzir drasticamente o tempo de carregamento inicial e melhorar a performance percebida.

.offscreen-content {
  content-visibility: auto;
}

Ferramentas Essenciais para Diagnóstico e Monitoramento

Para identificar e corrigir problemas de INP, você precisará das ferramentas certas:

• PageSpeed Insights: Oferece uma análise detalhada da performance do seu site, incluindo as Core Web Vitals. Ele combina dados de laboratório (simulação) e de campo (dados reais de usuários).
• Chrome DevTools: A aba