Estamos muito felizes em receber a primeira rodada de suporte a ferramentas para a nova métrica de capacidade de resposta pendente, Interaction to Next Paint (INP). Para saber mais sobre a métrica em si, confira o guia oficial de métricas do INP.
Medição sugerida
O objetivo de medir o INP é entender a rapidez com que sua página responde à entrada do usuário. A única maneira de ter dados realistas é medir como sua página está respondendo para os usuários reais que visitam seu site usando dados de campo.
A medição do INP no laboratório ajuda a entender melhor os horários dos eventos e onde as otimizações precisam acontecer. As ferramentas de laboratório não interagem automaticamente com a página. Portanto, elas precisam de entrada manual durante a medição ou precisam ser programadas com uma ferramenta de automação, como o Puppeteer. Quando as interações principais são identificadas em jornadas de usuário típicas, elas podem ser testadas para identificar problemas ou serem programadas e colocadas em testes de CI para evitar regressões.
Descubra o que seus usuários reais estão enfrentando (dados de campo)
Acesse o PageSpeed Insights
O PageSpeed Insights extrai dados de campo da API de relatórios da experiência do usuário do Chrome (CrUX, na sigla em inglês) e mostra um resumo do desempenho da página e da origem nos últimos 28 dias. Esses dados agora incluem INP:
Teste no PageSpeed Insights.
Coletar seus próprios valores de INP no campo
Se você quiser coletar dados de INP de um site, a maneira mais fácil de fazer isso é usar a biblioteca web-vitals, que agora tem suporte total ao 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
A extensão das Principais métricas da Web oferece uma visão geral da experiência da página dos usuários (da API CrUX), os valores em tempo real das Principais métricas da Web 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 de laboratório)
Usar os 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 receber um relatório do que aconteceu durante esse período. Agora, esse relatório inclui 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. A INP está disponível nos fluxos de usuários a partir do Lighthouse 9.6.
Detalhes da disponibilidade da ferramenta
- Relatório de experiência do usuário do Chrome (CrUX)
- 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 de INP no nível da página e da origem da API CrUX exibidos como "Interação com a próxima pintura"
- API PSI: INP disponível como
INTERACTION_TO_NEXT_PAINT_MS
- Biblioteca JS
web-vitalsweb-vitalsinclui suporte para INP
- Extensão "Métricas da Web" do Chrome
- Inclui medição local de INP e dados de campo de INP quando disponíveis na API CrUX
- Farol
- Painel do Lighthouse no DevTools: 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 de tempo (use o Puppeteer para entrada sintética)
Trabalho futuro e solicitação de feedback
As equipes de ferramentas do Chrome vão continuar investindo em recursos de depuração e recomendações de otimização para o INP.
Se você tiver feedback sobre qualquer coisa, desde a utilidade da métrica até a facilidade de medição, envie para o grupo de feedback sobre web vitals do Google.