Esta página foi traduzida pela API Cloud Translation.

Interação com Próxima Exibição (INP)

Jeremy Wagner

Compatibilidade com navegadores

Os dados de uso do Chrome mostram que 90% do tempo de um usuário em uma página é gasto após o carregamento. Portanto, é importante medir cuidadosamente a capacidade de resposta durante o ciclo de vida da página. É isso que a métrica INP avalia.

Uma boa capacidade de resposta significa que a página responde rapidamente às interações. Quando uma página responde a uma interação, o navegador apresenta um feedback visual no próximo frame que ele renderiza. O feedback visual informa, por exemplo, se um item adicionado a um carrinho de compras on-line está sendo adicionado, se um menu de navegação para dispositivos móveis foi aberto, se o conteúdo de um formulário de login está sendo autenticado pelo servidor e assim por diante.

Naturalmente, algumas interações demoram mais do que outras, mas, especialmente para interações complexas, é importante apresentar rapidamente um feedback visual inicial para informar ao usuário que algo está acontecendo. O próximo frame que o navegador vai pintar é a primeira oportunidade para fazer isso.

Portanto, a intenção da INP não é medir todos os efeitos de uma interação, como buscas de rede e atualizações da interface de outras operações assíncronas, mas o tempo em que a próxima pintura está sendo bloqueada. Ao atrasar o feedback visual, os usuários podem ter a impressão de que a página não está respondendo rápido o suficiente. O INP foi desenvolvido para ajudar os desenvolvedores a medir essa parte da experiência do usuário.

No vídeo a seguir, o exemplo à direita oferece um feedback visual imediato de que um acordeão está abrindo. A baixa capacidade de resposta é demonstrada no exemplo à esquerda e como ela pode criar experiências ruins para os usuários.

Exemplo de baixa e boa responsividade. À esquerda, tarefas longas impedem a abertura do acordeão. Isso faz com que o usuário clique várias vezes, pensando que a experiência foi corrompida. Quando a linha de execução principal chega, ela processa as entradas atrasadas, resultando na abertura e fechamento inesperado do acordeão. À direita, uma página mais responsiva abre o acordeão rapidamente e sem problemas.

Neste guia, explicamos como o INP funciona, como medi-lo e indicamos recursos para melhorá-lo.

O que é INP?

O INP é uma métrica que avalia a capacidade de resposta geral de uma página em relação às interações do usuário, observando a latência de todas as interações de clique, toque e teclado que ocorrem durante a vida útil da visita de um usuário a uma página. O valor final da INP é a interação mais longa observada, ignorando os valores atípicos.

Detalhes sobre como o INP é calculado

A INP é calculada observando todas as interações feitas com uma página. Na maioria dos sites, a interação com a pior latência é informada como INP.

No entanto, para páginas com um grande número de interações, soluços aleatórios podem resultar em uma interação de latência excepcionalmente alta em uma página responsiva. Quanto mais interações ocorrerem em uma determinada página, maior será a probabilidade de que isso aconteça.

Para medir melhor a capacidade de resposta real de páginas com um grande número de interações, ignoramos uma das maiores interações a cada 50 interações. Como a grande maioria das experiências na página não tem mais de 50 interações, a pior interação é relatada com mais frequência. O percentil 75 de todas as visualizações de página é informado normalmente, o que remove ainda mais valores discrepantes para fornecer um valor que a grande maioria dos usuários experimenta ou melhor.

Uma interação é um grupo de manipuladores de eventos acionados durante o mesmo gesto lógico do usuário. Por exemplo, as interações de "toque" em um dispositivo com tela touchscreen incluem vários eventos, como pointerup, pointerdown e click. Uma interação pode ser impulsionada por JavaScript, CSS, controles integrados do navegador (como elementos de formulário) ou uma combinação deles.

A latência de uma interação consiste na duração mais longa de um grupo de manipuladores de eventos que direcionam a interação, desde o momento em que o usuário inicia a interação até o momento em que o navegador pode pintar um frame.

O que é uma boa pontuação de INP?

É difícil fixar rótulos como "bom" ou "ruim" em uma métrica de capacidade de resposta. Por um lado, você quer incentivar práticas de desenvolvimento que priorizam a boa capacidade de resposta. Por outro lado, você precisa levar em conta o fato de que há uma variabilidade considerável nas capacidades dos dispositivos que as pessoas usam para definir expectativas de desenvolvimento alcançáveis.

Para garantir uma boa experiência do usuário, um bom limite é o 75º percentil de carregamentos de página registrados no campo, segmentado em dispositivos móveis e computadores:

Um INP abaixo ou de 200 milissegundos significa que a página tem boa capacidade de resposta.
Um INP acima de 200 milissegundos e abaixo ou em 500 milissegundos significa que a capacidade de resposta de uma página precisa de melhorias.
Um INP acima de 500 milissegundos significa que a página tem baixa capacidade de resposta.

Valores de INP bons são de 200 milissegundos ou menos, valores ruins são maiores que 500 milissegundos, e qualquer valor entre esses dois extremos precisa ser melhorado. — Valores de INP bons são de 200 milissegundos ou menos. Valores ruins são maiores que 500 milissegundos.

O que há em uma interação?

Um diagrama que representa uma interação na linha de execução principal. O usuário faz uma entrada enquanto as tarefas de bloqueio são executadas. A entrada é adiada até a conclusão dessas tarefas. Depois, os manipuladores de eventos de pointerup, mouseup e clique são executados. Em seguida, a renderização e a pintura são iniciadas até que o próximo frame seja apresentado. — O ciclo de vida de uma interação. Um atraso de entrada ocorre até que os manipuladores de eventos comecem a ser executados, possivelmente causado por fatores como tarefas longas na linha de execução principal. Os callbacks do gerenciador de eventos da interação são executados e um atraso ocorre antes que o próximo frame seja apresentado.

Geralmente, o JavaScript é o principal impulsionador da interatividade, embora os navegadores ofereçam interatividade por meio de controles não ativados por JavaScript, como caixas de seleção, botões de opção e controles fornecidos pelo CSS.

Para fins de INP, somente os seguintes tipos de interação são observados:

Clicar com um mouse.
Toque em um dispositivo com tela touchscreen.
Pressionar uma tecla em um teclado físico ou na tela.

As interações acontecem no documento principal ou em iframes incorporados no documento, por exemplo, ao clicar em "reproduzir" em um vídeo incorporado. Os usuários finais não sabem o que está em um iframe ou não. Portanto, é necessário usar o INP em iframes para medir a experiência do usuário na página de nível superior. Como as APIs da Web JavaScript não têm acesso ao conteúdo de iframes, isso pode aparecer como uma diferença entre o CrUX e o RUM

As interações podem consistir em vários eventos. Por exemplo, um pressionamento de tecla inclui os eventos keydown, keypress e keyup. As interações de toque contêm eventos pointerup e pointerdown. O evento com a maior duração na interação é o que contribui para a latência total dela.

Uma representação de uma interação mais complexa que contém duas interações. O primeiro é um evento mousedown, que produz um frame antes que o botão do mouse seja levantado, o que inicia mais trabalho até que outro frame seja apresentado como resultado. — Uma representação de uma interação com vários manipuladores de eventos. A primeira parte da interação recebe uma entrada quando o usuário clica em um botão do mouse. No entanto, antes de soltar o botão do mouse, um frame é apresentado. Quando o usuário solta o botão do mouse, outra série de manipuladores de eventos precisa ser executada antes que o próximo frame seja apresentado.

O INP da página é calculado quando o usuário sai dela. O resultado é um valor único que representa a capacidade de resposta geral da página em todo o ciclo de vida dela. Um INP baixo significa que a página respondeu de forma confiável à entrada do usuário.

Qual é a diferença entre INP e First Input Delay (FID)?

INP é a métrica sucessora de First Input Delay (FID). Embora ambas sejam métricas de capacidade de resposta, a FID mede apenas o atraso de entrada da primeira interação em uma página. A INP melhora a FID observando todas as interações em uma página, começando pelo atraso de entrada, pelo tempo que leva para executar os manipuladores de eventos e, finalmente, até o navegador pintar o próximo frame.

Essas diferenças significam que a INP e o FID são tipos diferentes de métricas de responsividade. Enquanto a FID era uma métrica de capacidade de resposta de carga projetada para avaliar a primeira impressão da página no usuário, a INP é um indicador mais confiável da capacidade de resposta geral, independentemente de quando as interações da página ocorrem.

E se nenhum valor de INP for informado?

É possível que uma página não retorne um valor de INP. Isso pode acontecer por vários motivos, incluindo:

A página foi carregada, mas o usuário nunca clicou, tocou nem pressionou uma tecla no teclado.
A página foi carregada, mas o usuário interagiu com ela usando gestos que não são medidos, como rolar ou passar o cursor sobre elementos.
A página está sendo acessada por um bot, como um rastreador de pesquisa ou um navegador headless, que não foi programado para interagir com a página.

Como medir o INP

O INP pode ser medido no campo e no laboratório, na medida em que é possível simular interações realistas do usuário.

No campo

Idealmente, sua jornada na otimização do INP começará com dados de campo. Na melhor das hipóteses, os dados de campo do monitoramento de usuários reais (RUM) vão fornecer não apenas o valor de INP de uma página, mas também dados contextuais que destacam qual interação específica foi responsável pelo valor de INP, se a interação ocorreu durante ou após o carregamento da página, o tipo de interação (clique, pressionamento de tecla ou toque) e outros tempos valiosos que podem ajudar a identificar qual parte da interação estava afetando a capacidade de resposta.

Se o seu site se qualificar para inclusão no Chrome User Experience Report (CrUX), você poderá receber rapidamente dados de campo para INP pelo CrUX no PageSpeed Insights (e outros Core Web Vitals). No mínimo, você pode ter uma imagem da origem da INP do seu site, mas, em alguns casos, também é possível ter dados no nível do URL.

No entanto, embora o CrUX possa informar se há um problema, ele não pode dizer o que causou o problema. Uma solução de RUM pode ajudar a descobrir mais detalhes sobre páginas, usuários ou interações do usuário que estão com problemas de capacidade de resposta. A capacidade de atribuir o INP a interações individuais evita suposições e esforços desnecessários.

No laboratório

O ideal é começar a testar no laboratório depois de ter dados de campo que sugerem que uma página tem interações lentas. Os dados de campo tornam o trabalho de reproduzir interações problemáticas no laboratório uma tarefa muito mais simples.

No entanto, é possível que você não tenha dados de campo. Embora o INP possa ser medido em algumas ferramentas de laboratório, o valor de INP resultante para uma página durante o teste depende das interações realizadas durante o período de medição. O comportamento do usuário pode ser imprevisível e altamente variável, o que significa que os testes no laboratório podem não mostrar interações problemáticas da mesma forma que os dados de campo. Além disso, algumas ferramentas de laboratório não informam o INP de uma página porque observam apenas o carregamento de uma página sem interações. Nesses casos, o Tempo de bloqueio total (TBT, na sigla em inglês) pode ser uma métrica de proxy razoável para o INP, mas não substitui o INP.

Embora as ferramentas de laboratório tenham limitações para avaliar o INP de uma página, há algumas estratégias para reproduzir interações lentas. As estratégias incluem seguir fluxos de usuários comuns e testar interações ao longo do caminho, além de interagir com a página enquanto ela é carregada, quando a linha de execução principal geralmente está mais ocupada, para identificar interações lentas durante essa parte crucial da experiência do usuário.

Como melhorar a INP

Uma coleção de guias sobre como otimizar a INP está disponível para ajudar você a identificar interações lentas no campo e usar dados de laboratório para identificar as causas e otimizar.

Registro de alterações

Às vezes, são descobertos bugs nas APIs usadas para medir métricas e, às vezes, nas definições das métricas. Como resultado, é preciso fazer alterações algumas vezes e elas podem aparecer como melhorias ou regressões nos seus relatórios e painéis internos.

Para ajudar você a gerenciar isso, todas as mudanças na implementação ou definição dessas métricas serão exibidas no Registro de alterações.

Se você tiver feedback sobre essas métricas, envie para o grupo de feedback do Web Vitals no Google.

Teste seus conhecimentos

Qual é o objetivo principal da métrica INP?

Para medir o tempo que leva para o primeiro conteúdo de uma página ser exibido.

Incorreto: isso descreve a First Contentful Paint.

Para quantificar a estabilidade visual de uma página e minimizar mudanças inesperadas de layout.

Incorreto: isso descreve a Cumulative Layout Shift

Avaliar o tempo que uma página leva para ficar totalmente interativa.

Incorreto: isso está relacionado ao tempo de interação, mas o INP se concentra especificamente na capacidade de resposta à entrada do usuário.

Para minimizar o tempo entre o início de uma interação do usuário e a pintura do próximo frame, para todas ou a maioria das interações iniciadas pelo usuário.

Correto!

Quais dos tipos de interação a seguir são observados para calcular o INP? (Selecione todas as opções relevantes.)

clicar com o mouse;

Correto!

Rolar a página com a roda do mouse ou um trackpad.

Incorreto. O INP não considera rolagem.

Tocar em uma tela touchscreen.

Correto!

Passar o cursor do mouse sobre os elementos.

Incorreto: o INP não considera o posicionamento do cursor

Pressionando uma tecla no teclado.

Correto!

Aumentar ou diminuir o zoom da página.

Incorreto. A INP não considera o zoom

Como a "latência" de uma interação é definida para a INP?

O tempo que o navegador leva para processar os manipuladores de eventos de uma interação.

Incorreto: isso considera apenas a duração do processamento, não o atraso de entrada ou o tempo para apresentar o próximo frame.

O tempo médio que leva para todas as interações em uma página produzirem uma resposta visual.

Incorreto: a INP se concentra na interação mais longa, não na média

O tempo que o navegador leva para começar a processar os manipuladores de eventos associados a uma interação.

Incorreto: isso só considera o atraso de entrada, não o tempo de processamento e renderização

O tempo entre o início da interação e o momento em que o próximo frame é totalmente apresentado.

Correto!

Qual é a diferença entre INP e FID?

A INP mede o tempo que o primeiro conteúdo de uma página leva para ser exibido, enquanto o FID mede a capacidade de resposta à entrada do usuário.

Incorreto: isso descreve a First Contentful Paint, não a INP.

A INP considera a duração total de todas as interações, enquanto a FID mede apenas o atraso de entrada da primeira interação.

Correto!

A INP e a FID medem carimbos de data/hora diferentes em que uma página se torna interativa.

Incorreto: INP e FID são medidas de quão rápido a página responde às interações, independentemente de quando elas ocorrem.

Não há diferença. INP e FID são apenas dois nomes diferentes para a mesma métrica.

Incorreto: elas têm definições distintas.

Em quais circunstâncias os dados de INP podem ficar indisponíveis para uma página em ferramentas como o PageSpeed Insights?

A página está usando uma biblioteca de medição de desempenho personalizada que não informa dados de INP.

Incorreto: a INP é medida automaticamente usando APIs da plataforma da Web e não depende de páginas que informam a própria performance usando bibliotecas personalizadas.

Não há dados de interação suficientes dos usuários do Chrome para calcular um valor de INP significativo no conjunto de dados do CrUX.

Correto!

Os usuários interagiram com a página apenas rolando e passando o cursor, que não são considerados para INP.

Correto!

A página é criada usando um framework que otimiza automaticamente para INP. Por isso, não é necessário informar o problema.

Incorreto: os frameworks podem ajudar com o INP, mas a métrica ainda é relevante e informada se os dados estiverem disponíveis

Qual é a estratégia mais eficaz para reproduzir interações lentas em um ambiente de laboratório?

Simular um dispositivo de última geração com uma conexão de rede lenta e não confiável para criar condições desafiadoras.

Incorreto: embora a rede possa ter um papel, os recursos do dispositivo têm mais probabilidade de expor interações lentas.

Testar interações somente depois que a página estiver totalmente carregada e inativa.

Incorreto: pode perder interações lentas durante o carregamento.

Interagir com a página durante o carregamento e seguir fluxos de usuários comuns para identificar possíveis gargalos.

Correto!

Foco em interações complexas e extremas que provavelmente não serão encontradas pela maioria dos usuários.

Incorreto: os fluxos de usuários comuns são mais relevantes para identificar problemas típicos de INP

✨ Este teste foi gerado pelo Gemini 1.5 e revisado por humanos. Envie seu feedback