Estamos felizes com a primeira rodada de suporte a ferramentas para a nova métrica de capacidade de resposta pendente, a Interaction to Next Paint (INP). Para saber mais sobre a métrica, confira o guia oficial de métricas de INP.
Medição sugerida
O objetivo da medição de INP é entender a rapidez com que sua página responde à entrada do usuário. A única maneira de conseguir dados realistas é medir a resposta da sua página aos usuários reais que o visitam usando dados de campo.
Medir a INP no laboratório ajuda a entender melhor os tempos dos eventos e onde as otimizações precisam acontecer. As ferramentas do laboratório não interagem automaticamente com a página. Portanto, elas precisam de entrada manual enquanto fazem a medição ou precisam passar pelo script de uma ferramenta de automação, como o Puppeteer. Quando as interações principais são identificadas em jornadas típicas do usuário, elas podem ser testadas para identificar problemas ou ser roteirizadas e colocadas em testes de CI para evitar regressões.
Descubra a experiência dos usuários reais (dados de campo)
Acesse o PageSpeed Insights
O PageSpeed Insights extrai dados de campo da API Chrome User Experience (CrUX) Report e fornece um resumo do desempenho da sua página e da origem nos últimos 28 dias. Agora, esses dados incluem o INP:
Faça um teste no PageSpeed Insights.
Colete seus próprios valores de INP no campo
Se você quiser coletar dados INP de um site, a maneira mais fácil de fazer isso é a biblioteca web-vitals, que agora tem compatibilidade total com INP na versão Beta.
import {onINP} from 'web-vitals';
onINP(({value}) => {
// Log the value to the console, or send it to your analytics provider.
console.log(value);
});
Leia mais sobre web-vitals e como medir no console do DevTools.
Extensão "Métricas da Web" do Chrome
Essa extensão oferece uma visão geral da experiência dos usuários na página (da API CrUX), os valores das Core Web Vitals em tempo real e as principais métricas da visita atual à página.
Instale a extensão Métricas da Web para o Chrome.
Diagnosticar problemas de desempenho (dados do laboratório)
Usar fluxos de usuários do Lighthouse
O novo modo de período no painel do Lighthouse no DevTools permite iniciar o Lighthouse, interagir com a página de teste como quiser e, em seguida, receber um relatório do que aconteceu durante esse período. Este relatório agora inclui o INP e uma auditoria para ajudar a diagnosticar problemas de capacidade de resposta.
A mesma série de interações pode ser automatizada usando os fluxos de usuários do Lighthouse. O INP está disponível em fluxos de usuários a partir do Lighthouse 9.6.
Detalhes sobre a disponibilidade da ferramenta
- Chrome User Experience Report (CrUX, na sigla em inglês)
- BigQuery: INP disponível como
interaction_to_next_paint - API CrUX: INP disponível como
interaction_to_next_paint - Painel do CrUX: inclui dados de INP.
- BigQuery: INP disponível como
- PageSpeed Insights
- pagespeed.web.dev: dados de campo INP no nível da página e da origem da API CrUX exibidos como "Interaction to Next Paint"
- API PSI: INP disponível como
INTERACTION_TO_NEXT_PAINT_MS
- Biblioteca JS
web-vitalsweb-vitalsinclui suporte a INP
- Extensão das Métricas da Web do Chrome
- Inclui dados de medição de INP e de campo de INP quando disponíveis na API CrUX
- Farol
- Painel do Lighthouse no DevTools: a medição de INP disponível no modo "Período" no Chrome Canary (104)
- Módulo npm do Lighthouse: medição de INP disponível em períodos (use o puppeteer para entrada sintética)
Trabalho futuro e pedido de feedback
No futuro, as equipes de ferramentas do Chrome vão continuar investindo em recursos de depuração e recomendações de otimização para INP.
Se você tiver comentários sobre a utilidade da métrica para facilitar a medição, envie o feedback para o Grupo do Google web-vitals-feedback.