Os dados de uso do Chrome mostram que 90% do tempo do usuário em uma página é gasto após o carregamento. Assim, é importante fazer uma medição cuidadosa da capacidade de resposta durante o ciclo de vida da página. Isso é o que a métrica INP avalia.
Uma boa capacidade de resposta significa que uma 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 pintado. 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 etc.
Naturalmente, algumas interações demoram mais do que outras, mas, para interações especialmente complexas, é importante apresentar rapidamente um 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 da 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, os usuários podem ter a impressão de que a página não está respondendo rápido o suficiente, e a INP foi desenvolvida para ajudar os desenvolvedores a avaliar 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. À esquerda, há uma demonstração de baixa capacidade de resposta e como isso pode criar experiências de usuário ruins.
Este guia explica como a INP funciona, como medi-la e aponta para recursos para melhorá-la.
O que é INP?
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 toda a vida útil da visita do usuário a uma página. O valor final da INP é a interação mais longa observada, ignorando os valores atípicos.
O INP é calculado observando-se 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 fornecer uma medição melhor da capacidade real de resposta em páginas com um alto número de interações, ignoramos uma interação com o valor mais alto para 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 75o percentil de todas as visualizações de página é informado normalmente, o que remove os pontos fora da curva para fornecer um valor melhor ou melhor para a maioria dos usuários.
Uma interação é um grupo de manipuladores de eventos que são acionados durante o mesmo gesto lógico do usuário. Por exemplo, "tocar" As interações em um dispositivo com tela touchscreen 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 duração mais longa de um grupo de manipuladores de eventos que impulsiona a interação, a partir 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 INP?
Fixar rótulos como "bom". ou "ruim" em uma métrica de capacidade de resposta é difícil. Por um lado, você quer incentivar práticas de desenvolvimento que priorizam uma 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 que você ofereça 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, segmentados em dispositivos móveis e computadores:
- Um INP abaixo ou em 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.
O que compõe uma interação?
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 do INP, apenas os seguintes tipos de interação são observados:
- clicar com o mouse;
- Tocar em um dispositivo com uma tela touchscreen.
- Pressionar uma tecla em um teclado físico ou na tela.
As interações ocorrem no documento principal ou em iframes incorporados nele, por exemplo, clicando em "Reproduzir" em um vídeo incorporado. Os usuários finais não saberão o que está em um iframe ou não. Portanto, a INP nos iframes é necessária para avaliar a experiência do usuário na página de nível superior. Como as APIs JavaScript da Web não têm acesso ao conteúdo dos 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 da interação.
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 mediu apenas 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, desde o 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 INP e FID são tipos diferentes de métricas de capacidade de resposta. 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 nenhum 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, permitindo simular interações realistas do usuário.
Em 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 Real User Monitoring (RUM) fornecerão 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 próprio 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 estava 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 dados de campo para a INP usando o CrUX no PageSpeed Insights (e em outras Core Web Vitals). No mínimo, você pode ter uma imagem da origem do INP do seu site, mas, em alguns casos, também é possível ver dados no nível do URL.
No entanto, embora o CrUX possa informar se há um problema, ele não pode dizer o que o causou. Uma solução RUM pode ajudar você a descobrir mais detalhes sobre páginas, usuários ou interações de usuários com problemas de capacidade de resposta. Ser capaz de atribuir INP a interações individuais evita suposições e esforços desperdiçados.
No laboratório
O ideal é começar os testes no laboratório quando você tiver dados de campo que sugiram 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 de uma página durante o teste depende das interações realizadas durante o período de medição. Os comportamentos dos usuários podem ser imprevisíveis e altamente variáveis, o que significa que os testes no laboratório podem não revelar interações com o problema da mesma maneira 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 total de bloqueio (TBT, na sigla em inglês) pode ser uma métrica razoável para a INP, mas não substitui a INP por si só.
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 carrega (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 a INP
Há uma coleção de guias sobre como otimizar o INP (link em inglês) disponível para guiar você pelo 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, eles são descobertos nas APIs usadas para medir as métricas e, às vezes, nas definições das próprias 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 alterações na implementação ou na definição dessas métricas serão exibidas neste registro de alterações.
Se você tiver feedback sobre essas métricas, envie no Grupo do Google web-vitals-feedback.
Teste seus conhecimentos
Qual é a meta principal da métrica INP?
Quais dos seguintes tipos de interação são observados para fins de cálculo do INP? (Selecione todas as opções relevantes.)
Como é a "latência" de uma interação definida para a INP?
Qual é a diferença entre INP e FID?
Em que circunstâncias os dados de INP podem ficar indisponíveis para uma página em ferramentas como o PageSpeed Insights?
Qual é a estratégia mais eficaz para reproduzir interações lentas em um ambiente de laboratório?
✨ Este teste foi gerado pelo Gemini 1.5 e revisado por humanos. Deixe seu feedback