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

Os dados de uso do Chrome mostram que 90% do tempo de um usuário em uma página é gasto depois que ela é carregada. Assim, é importante ter uma medição cuidadosa da capacidade de resposta ao longo do 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 feedback visual no frame seguinte que pinta. O feedback visual informa se, por exemplo, um item adicionado a um carrinho de compras on-line está realmente sendo adicionado, se um menu de navegação móvel foi aberto, se o conteúdo de um formulário de login está sendo autenticado pelo servidor e assim por diante.

Algumas interações naturalmente levam mais tempo do que outras, mas, para interações especialmente complexas, é importante apresentar rapidamente algum feedback visual inicial para informar ao usuário que algo está acontecendo. O próximo frame que o navegador pintará é a primeira oportunidade de fazer isso.

Portanto, a intenção do INP não é medir todos os efeitos finais de uma interação, como buscas de rede e atualizações de interface de outras operações assíncronas, mas o momento em que a próxima exibição 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, e 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 mostra um feedback visual imediato de que um acordeão está abrindo. Um exemplo disso é a baixa capacidade de resposta à esquerda, que mostra como isso pode criar experiências insatisfatórias para os usuários.

Este guia explica como o INP funciona, como medi-lo e aponta os recursos para melhorá-lo.

O que é INP?

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

Uma interação é um grupo de manipuladores de eventos que são acionados durante o mesmo gesto lógico do usuário. Por exemplo, interações de "toque" em um dispositivo com tela touch incluem vários eventos, como pointerup, pointerdown e click. Uma interação pode ser conduzida por JavaScript, CSS, controles de navegador integrados (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 conduzem a interação, do momento em que o usuário inicia a interação até o momento em que o navegador exibe o próximo 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, é preciso considerar o fato de que há uma variabilidade considerável nos recursos dos dispositivos que as pessoas usam para definir expectativas de desenvolvimento alcançáveis.

Para garantir que você esteja oferecendo experiências do usuário com boa capacidade de resposta, um bom limite a ser medido é o 75o percentil de carregamentos de página registrados em campo, segmentados em dispositivos móveis e computadores:

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

O que há em uma interação?

Geralmente, o principal motivador da interatividade é o JavaScript. No entanto, os navegadores oferecem interatividade por meio de controles que não têm tecnologia JavaScript, como caixas de seleção, botões de opção e controles com CSS.

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

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

As interações acontecem no documento principal ou em iframes incorporados ao documento, por exemplo, clicando para reproduzir um vídeo incorporado. Os usuários finais não sabem o que há em um iframe ou não. Portanto, o INP dentro de iframes é necessário para avaliar a experiência do usuário na página de nível superior. Como as APIs JavaScript Web não têm acesso ao conteúdo de iframes, isso pode ser exibido como uma diferença entre CrUX e 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.

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

Qual é a diferença entre o INP e a latência na primeira entrada (FID)?

O INP é a métrica sucessora da latência na primeira entrada (FID, na sigla em inglês). Embora ambas sejam métricas de capacidade de resposta, a FID só mediu o atraso de entrada da primeira interação em uma página. O INP melhora a FID observando todas as interações em uma página, começando pelo atraso de entrada, até o tempo necessário para executar manipuladores de eventos e, finalmente, até que o navegador pinte o próximo frame.

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

E se nenhum valor de INP for informado?

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

• A página foi carregada, mas o usuário nunca clicou, tocou ou 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 os elementos.
• A página está sendo acessada por um bot, como um rastreador de pesquisa ou um navegador headless, que não tem um script para interagir com a página.

Como medir o INP

O INP pode ser medido tanto em campo quanto no laboratório com várias ferramentas.

Em campo

O ideal é que sua jornada de otimização do INP vai começar com os dados de campo. Na melhor das hipóteses, os dados de campo do Real User Monitoring (RUM) fornecem 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 você a identificar qual parte da interação está afetando a capacidade de resposta.

Caso seu site esteja qualificado para inclusão no Chrome User Experience Report (CrUX, na sigla em inglês), você poderá acessar rapidamente os dados de campo do INP via CrUX no PageSpeed Insights (e outras Core Web Vitals). É possível ter, no mínimo, uma imagem no nível da origem do 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 sabe a causa. Uma solução RUM pode ajudá-lo a descobrir mais detalhes sobre páginas, usuários ou interações de usuários que estão enfrentando problemas de capacidade de resposta. Atribuir o INP a interações individuais evita adivinhações e desperdício de esforço.

No laboratório

O ideal é que você inicie o teste no laboratório assim que tiver dados de campo que sugerem que uma página tem interações lentas. No entanto, se você não tiver dados de campo, existem algumas estratégias para reproduzir interações lentas no laboratório. 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 costuma ser mais movimentada) para identificar interações lentas durante essa parte crucial da experiência do usuário.

Como melhorar o INP

Uma coleção de guias sobre otimização de INP está disponível para orientar você no processo de identificação de interações lentas no campo e usar dados de laboratório para identificar as causas e otimizá-las.

Registro de alterações

Às vezes, são encontrados bugs nas APIs usadas para medir as métricas e, às vezes, nas próprias definições de métricas. Por isso, às vezes é preciso fazer alterações, que 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 neste registro de alterações.

Se você tiver feedback sobre essas métricas, envie seu feedback no Grupo do Google web-vitals-feedback.

testar seus conhecimentos