Temos o prazer de anunciar 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, consulte o guia oficial da INP.
Medição sugerida
O objetivo de medir a INP é entender a rapidez com que a página responde à entrada do usuário. A única maneira de receber dados realistas é medir a resposta da página para usuários reais que acessam seu site usando dados de campo.
A medição da INP no laboratório ajuda a entender melhor os tempos de 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 principais interações são identificadas em jornadas típicas do usuário, elas podem ser testadas para identificar problemas ou programadas e colocadas em testes de CI para evitar regressões.
Descubra o que seus usuários reais estão vivenciando (dados de campo)
Acesse o PageSpeed Insights
O PageSpeed Insights extrai dados de campo da API Chrome User Experience (CrUX) Report e oferece um instantâneo do desempenho da página e da origem nos últimos 28 dias. Esses dados agora incluem a INP:
Teste no PageSpeed Insights.
Colete seus próprios valores de INP do campo
Se você quiser coletar dados de INP para um site, a maneira mais fácil de fazer isso é a web-vitals biblioteca, que agora tem suporte completo à 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);
});
Saiba mais sobre web-vitals e como medir no console do DevTools.
Extensão "Métricas da Web" do Chrome
A extensão Web Vitals oferece uma visão geral da experiência na página dos seus usuários (da API CrUX) e os valores em tempo real das CWV e das principais métricas da visita atual à página.
Instale a extensão Web Vitals para Chrome.
Diagnosticar problemas de desempenho (dados de laboratório)
Usar fluxos do usuário 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 da maneira que quiser e receber um relatório do que aconteceu durante esse período. Esse relatório agora inclui a INP e uma auditoria para ajudar a diagnosticar problemas de capacidade de resposta.
A mesma série de interações pode ser automatizada usando fluxos do usuário do Lighthouse. A INP está disponível em fluxos do usuário a partir do Lighthouse 9.6.
Detalhes da disponibilidade da ferramenta
- Chrome User Experience Report (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 da INP
- BigQuery: INP disponível como
- PageSpeed Insights
- pagespeed.web.dev: dados de campo da 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
web-vitalsBiblioteca JSweb-vitalsinclui suporte à INP
- Extensão "Métricas da Web" do Chrome
- Inclui medição local da INP e dados de campo da INP quando disponíveis na API CrUX
- Lighthouse
- Painel do Lighthouse no DevTools: medição da INP disponível no modo 'período' no Chrome Canary (104)
- Módulo npm do Lighthouse: medição da 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 a INP.
Se você tiver feedback sobre qualquer coisa, desde a utilidade da métrica até a facilidade de medição, envie para o grupo do Google web-vitals-feedback.