Guias

O INP, abreviação de Interaction to Next Paint, é uma das Core Web Vitals do Google, as métricas que o Google usa para avaliar o quão boa é a sensação de usar uma página. O INP mede a capacidade de resposta: quando você clica, toca ou pressiona uma tecla, quanto tempo a página leva para responder de forma visível? Tornou-se uma Core Web Vital oficial em 12 March 2024, substituindo o antigo First Input Delay (FID).

O nome descreve exatamente o que ele mede. A partir do momento em que você interage, o INP cronometra quanto tempo leva até que o próximo quadro seja pintado, ou seja, até você realmente ver algo mudar na tela. Um INP baixo significa que a página reage quase instantaneamente; um INP alto significa que você toca em um botão e ele parece travado por um instante antes que algo aconteça.

Os limites do Google, medidos no 75th percentile das interações reais dos usuários, são simples. Um INP de 200 milliseconds ou menos é Good. Entre 200 e 500 milliseconds é Needs improvement. Acima de 500 milliseconds é Poor. A parte do 75th percentile importa: sua página tem que ser responsiva na maioria das interações, não apenas na média.

O FID, a métrica que o INP substituiu, media apenas o atraso antes de o navegador poder começar a processar sua primeira interação, o atraso de entrada, e somente para essa primeira. Isso tornava fácil aprová-la enquanto uma página ainda parecia lenta. O INP é mais rigoroso porque observa as interações ao longo de toda a visita e mede a duração completa: o atraso de entrada, o tempo em que seus manipuladores de eventos são executados e o tempo para apresentar o próximo quadro.

Em outras palavras, o FID perguntava com que rapidez a página poderia começar a responder, uma vez. O INP pergunta com que rapidez a página realmente responde, todas as vezes. Isso corresponde muito mais de perto a como a capacidade de resposta é realmente sentida por um usuário.

Quase todos os problemas de INP vêm de a main thread estar ocupada. O JavaScript é executado em uma única main thread, e enquanto uma tarefa longa está em execução, o navegador não consegue responder a um clique nem pintar um novo quadro. Os culpados habituais são as tarefas JavaScript de longa duração, os manipuladores de eventos pesados que fazem trabalho demais de uma só vez, as atualizações do DOM grandes ou complexas, e os frameworks que renderizam novamente mais do que o necessário.

Corrigir o INP consiste principalmente em não bloquear a main thread. Divida as tarefas longas em partes menores e devolva o controle ao navegador entre elas para que ele possa lidar com a entrada. Mova o trabalho pesado e não urgente para fora da interação, por exemplo com requestIdleCallback ou um web worker. Mantenha os manipuladores de eventos leves, aplique debounce a eventos ruidosos como input e scroll, e evite forçar trabalho de layout ou de re-renderização síncrono e volumoso em resposta direta a um toque.

O INP é melhor avaliado com dados de campo, usuários reais em dispositivos reais, que você pode ver no Chrome User Experience Report e no relatório de Core Web Vitals do Google Search Console. Para depuração em laboratório, a biblioteca JavaScript web-vitals, o painel Performance do Chrome DevTools e o Lighthouse ajudam você a encontrar as interações lentas. Neste site, o nosso verificador de web vitals permite que você insira seus valores medidos e veja na hora se eles passam nos limites do Google.

Vale a pena deixar claro o escopo. O INP é sobre capacidade de resposta apenas. É uma das três Core Web Vitals, ao lado de Largest Contentful Paint (carregamento) e Cumulative Layout Shift (estabilidade visual). Uma página pode carregar rápido e ainda assim ter um INP ruim se o seu JavaScript travar a main thread quando as pessoas começam a interagir.

Em resumo: o INP recompensa páginas que permanecem responsivas ao longo de toda a visita, não apenas no primeiro toque. Se o seu site entrega muito JavaScript, o INP é a Core Web Vital que mais provavelmente precisará de atenção, e a solução é quase sempre a mesma disciplina: fazer menos trabalho na main thread, e fazê-lo em partes menores.