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 a interações feitas com ela. Quando uma página responde a uma interação, o resultado é um feedback visual, que é apresentado pelo navegador no próximo frame que ele apresenta. 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 levam mais tempo naturalmente do que outras. Porém, em interações especialmente complexas, é importante apresentar rapidamente algum feedback visual inicial como uma indicação ao usuário de que algo está acontecendo. O tempo até a próxima exibição é a primeira oportunidade para fazer isso. Portanto, a intenção do INP não é medir 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 está sendo bloqueada. Ao atrasar o feedback visual, você pode passar a impressão de que a página não está respondendo às ações deles.
O objetivo do INP é garantir que o tempo entre o início da interação de um usuário e a exibição do próximo frame seja o mais curto possível para todas ou a maioria das interações feitas pelo usuário.
No vídeo a seguir, o exemplo à direita mostra um feedback visual imediato de que um acordeão está abrindo. Ele também demonstra como a baixa capacidade de resposta pode causar a entrada de várias respostas não intencionais porque o usuário acha que a experiência é corrompida.
Neste artigo, explicamos como o INP funciona, como medi-lo e citamos 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.
Como mencionado acima, 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 é relatada como INP. No entanto, em páginas com um grande número de interações, falhas aleatórias podem resultar em uma interação excepcionalmente alta em um site responsivo. Quanto mais interações, maior a probabilidade de isso acontecer. Para lidar com isso e oferecer uma avaliação melhor da capacidade de resposta real para esses tipos de página, ignoramos uma interação mais alta para cada 50 interações. A grande maioria das experiências na página não tem mais de 50 interações, portanto, a pior interação será registrada. O 75o percentil de todas as visualizações de página é então informado como de costume, o que remove ainda mais os pontos fora da curva para fornecer um valor que a grande maioria dos usuários experimenta ou melhor.
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 impulsiona a interação, do momento em que o usuário começa a interação até o momento em que o próximo frame recebe um feedback visual.
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 em 200 milissegundos significa que sua 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 da sua 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.
No que diz respeito ao 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. Portanto, o INP dentro dos iframes é necessário para medir a experiência do usuário na página de nível superior. As APIs JavaScript Web não terão acesso ao conteúdo do iframe. Por isso, talvez não seja possível medir o INP em um iframe, e isso vai mostrar uma diferença entre CrUX e RUM.
As interações podem consistir em duas partes, cada uma com vários eventos. Por exemplo, um pressionamento de tecla consiste nos 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 é escolhido como a latência da interação.
O INP é calculado quando o usuário sai da página, resultando em um único valor que representa a 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)?
Quando o INP considera todas as interações de página, a latência na primeira entrada (FID, na sigla em inglês) considera apenas a primeira interação. Ele também só mede o atraso de entrada da primeira interação, não o tempo necessário para executar manipuladores de eventos ou o atraso na apresentação do próximo frame.
Como a FID também é uma métrica de capacidade de resposta de carregamento, a lógica por trás é que, se a primeira interação feita com uma página na fase de carregamento tiver pouco ou nenhum atraso perceptível na entrada, a página terá causado uma boa primeira impressão.
O INP vai além das primeiras impressões. Com a amostragem de todas as interações, a capacidade de resposta pode ser avaliada de forma abrangente, tornando o INP um indicador mais confiável de capacidade de resposta geral do que a FID.
E se nenhum valor de INP for informado?
É possível que uma página não retorne nenhum valor INP. Isso pode acontecer por uma série de motivos:
- 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 envolveram clicar, tocar nem usar o teclado. Por exemplo, rolar ou passar o cursor sobre os elementos não afeta o cálculo do INP.
- 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 (clicar, pressionar a tecla 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 via CrUX no PageSpeed Insights (e outras Core Web Vitals). É possível ter, no mínimo, uma imagem do INP do seu site da origem, mas, em alguns casos, também é possível ter dados no nível da página.
No entanto, embora o CrUX seja útil para informar que há um problema em alto nível, ele geralmente não fornece detalhes suficientes para ajudar a entender totalmente qual é. Uma solução RUM pode ajudar você a detalhar páginas, usuários ou interações com usuários que apresentam interações lentas. Atribuir o INP a interações individuais evita adivinhações e desperdício de esforço.
No laboratório
O ideal é iniciar os testes no laboratório quando você tiver dados de campo que sugerem interações lentas. No entanto, na ausência de dados de campo, há algumas estratégias para reproduzir interações lentas no laboratório. Essas 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 durante o carregamento (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 identificar interações lentas no campo e usar dados de laboratório para detalhar e otimizá-las de várias maneiras.
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.