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

Compatibilidade com navegadores

  • 96
  • 96
  • x
  • x

Origem

A interação com a próxima exibição (INP, na sigla em inglês) é uma métrica das Core Web Vitals estável que avalia a capacidade de resposta da página usando dados da API Event Timing. A INP observa a latência de todas as interações de clique, toque e teclado com uma página durante toda a vida útil e informa a duração mais longa, ignorando as exceções. Um INP baixo significa que a página é capaz de responder rapidamente à grande maioria das interações do usuário de maneira consistente.

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 renderizado para mostrar que a interação foi bem-sucedida. Por exemplo, ela pode fornecer feedback sobre o seguinte:

  • Se um item que você adiciona a um carrinho de compras on-line está sendo realmente adicionado.
  • Se um menu de navegação para dispositivos móveis foi aberto.
  • Se o conteúdo de um login está sendo autenticado pelo servidor.

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 tempo até a próxima exibição é a oportunidade mais próxima de fazer isso. Portanto, a intenção do INP é medir não todos os efeitos finais da interação, como buscas de rede e atualizações de interface de outras operações assíncronas, mas o tempo em que a próxima exibição é bloqueada. Ao atrasar o feedback visual, você faz os usuários pensarem que a página não está respondendo às ações deles.

O objetivo do INP é minimizar o tempo entre o momento em que um usuário inicia uma interação até que o próximo frame seja pintado, para todas ou a maioria das interações iniciadas pelo usuário.

Um exemplo de capacidade de resposta ruim versus boa. À esquerda, tarefas longas impedem que o acordeão seja aberto. Isso faz com que o usuário clique várias vezes, acreditando que a experiência não está funcionando. Quando a linha de execução principal é acessada, ela processa as entradas atrasadas, resultando no acordeão abrindo e fechando inesperadamente. À direita, uma página mais responsiva abre o acordeão rapidamente e sem incidentes.
Observação sobre como o INP é calculado

O INP é calculado pela observação de todas as interações feitas com uma página. Para a maioria dos sites, a interação com a pior latência é informada como INP. No entanto, em páginas com um grande número de interações, falhas aleatórias podem resultar em uma interação de latência excepcionalmente alta em um site responsivo. Quanto mais interações, maior a probabilidade de isso acontecer. Para evitar isso e oferecer uma medida melhor da capacidade de resposta real para esses tipos de página, ignoramos uma interação mais alta para cada 50 interações. Como a grande maioria das experiências na página não tem mais de 50 interações, o navegador quase sempre ainda informa a pior interação. O 75o percentil de todas as visualizações de página é informado como de costume, o que remove ainda mais os outliers para fornecer um valor mais representativo da experiência geral do usuário.

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 integrados do navegador, como elementos de formulário, ou uma combinação desses elementos.

A latência de uma interação consiste na única duração mais longa de um grupo de manipuladores de eventos que impulsiona a interação, do momento em que o usuário inicia a interação até o momento em que o próximo frame recebe feedback visual.

Ponto-chave: para mais detalhes sobre como o INP é medido, consulte "O que há em uma interação?".

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

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 no campo, segmentado em dispositivos móveis e computadores:

  • Um INP igual ou menor que 200 milissegundos significa que sua página tem boa capacidade de resposta.
  • Um INP entre 200 milissegundos e 500 milissegundos significa que a capacidade de resposta da sua página precisa de melhorias.
  • Um INP maior que 500 milissegundos significa que a página tem baixa capacidade de resposta.
Os valores de INP bons têm 200 milissegundos ou menos, os valores ruins são maiores do que 500 milissegundos e qualquer coisa intermediária precisa ser melhorada.
Valores INP bons são de 200 ms ou menos. Valores ruins são maiores que 500 ms.

O que há em uma interação?

Um diagrama representando uma interação na linha de execução principal. O usuário faz uma entrada e bloqueia a execução de tarefas. A entrada é adiada até que essas tarefas sejam concluídas. Depois disso, são executados os manipuladores de eventos de ponteiro, mouseup e clique. Em seguida, o trabalho de renderização e pintura é iniciado até que o próximo frame seja apresentado.
O ciclo de vida de uma interação. Um atraso de entrada dura até que os manipuladores de eventos comecem a ser executados, possivelmente causado por fatores como tarefas longas na linha de execução principal. Os manipuladores de eventos da interação são executados, e ocorre outro atraso antes da apresentação do próximo frame.

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

Para fins de INP, somente 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.

Importante: passar o cursor e rolar a tela não afeta o INP. No entanto, rolar com o teclado (barra de espaço, page up, page down etc.) envolve um pressionamento de tecla, que pode acionar outros eventos que o INP faz mede. A rolagem resultante não é considerada no cálculo de INP.

As interações acontecem no documento principal ou em iframes incorporados no documento. Por exemplo, clicando para reproduzir um vídeo incorporado. Como os usuários finais não sabem quais partes da página estão em iframes, você precisa medir o INP dentro de iframes para medir com precisão em toda a página. No entanto, as APIs JavaScript Web não têm acesso ao conteúdo do iframe e podem não conseguir medir o INP em um iframe. Isso é mostrado 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, e as interações de toque incluem eventos pointerup e pointerdown. O evento com a maior duração na interação é escolhido como a latência da interação.

Representação de uma interação mais complexa contendo duas interações. O primeiro é o evento mousedown, que produz um frame antes que o botão do mouse seja solto, o que inicia mais trabalho até que outro frame seja apresentado como resultado.
Quando o usuário pressiona o botão do mouse para clicar, o navegador processa a interação e apresenta um frame de feedback visual. Quando o usuário libera o botão do mouse, outra série de manipuladores de eventos é executada antes que o navegador possa apresentar outro frame.

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

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 considerando todas as interações de 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 projetada para avaliar a primeira impressão da página no usuário, o INP é um indicador mais confiável de capacidade de resposta geral, independente do momento da interação da 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 interagiu com ela.
  • 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 sem comando, que não tem um script para interagir com a página.

Como medir o INP

O INP pode ser medido no campo e no laboratório usando uma variedade de ferramentas.

Importante: a melhor maneira de medir o INP do seu site é coletar métricas de usuários reais no campo. Se você costuma confiar nos dados de laboratórios para avaliar o desempenho, leia o artigo Por que os dados de laboratório e de campo podem ser diferentes (e o que fazer a respeito).

Em campo

O ideal é que sua jornada de otimização do INP comece 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 (clicar, pressionar ou tocar) e outras informações valiosas.

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 usando o CrUX no PageSpeed Insights, além dos dados de outras Core Web Vitals. É possível ter no mínimo uma imagem do INP do seu site na origem, mas, em alguns casos, também é possível acessar dados no nível da página.

No entanto, embora o CrUX possa informar que um problema em alto nível, ele muitas vezes não fornece detalhes suficientes para ajudar a entender totalmente qual é o problema. Uma solução RUM pode ajudar você a descobrir mais detalhes sobre páginas, usuários ou interações com interações lentas. A capacidade de atribuir o INP a interações individuais ajuda a evitar suposições e desperdício de esforço.

No laboratório

O ideal é que você inicie os testes no laboratório depois de ter dados de campo que sugerem que você tem interações lentas. No entanto, na ausência de dados de campo, existem algumas estratégias para reproduzir interações lentas no laboratório. As estratégias incluem seguir fluxos comuns do usuário e testar interações ao longo do caminho, além de interagir com a página durante o carregamento, quando a linha de execução principal costuma ser mais movimentada, para expor interações lentas durante essa parte crucial da experiência do usuário.

Como melhorar o INP

Consulte nossa coleção de guias sobre como otimizar o INP para orientações sobre como identificar interações lentas no campo e usar dados de laboratório para otimizá-las.

Registro de alterações

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

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