Nous sommes ravis que les outils soient compatibles avec la nouvelle métrique de réactivité en attente, Interaction to Next Paint (INP). Pour en savoir plus sur la métrique elle-même, consultez le guide officiel des métriques INP.
Mesure suggérée
L'objectif de la mesure de l'INP est de comprendre la vitesse à laquelle votre page répond aux entrées utilisateur. Le seul moyen d'obtenir des données réalistes est de mesurer la réaction de votre page pour les utilisateurs réels qui le consultent, à l'aide des données du champ.
Mesurer l'INP au cours de l'atelier permet ensuite de mieux comprendre la durée des événements et les domaines dans lesquels les optimisations doivent être effectuées. Les outils de l'atelier n'interagissent pas automatiquement avec la page. Ils doivent donc soit saisir manuellement les données pendant la mesure, soit rédiger un script avec un outil d'automatisation comme Puppeteer. Lorsque des interactions clés sont identifiées à partir de parcours utilisateur classiques, elles peuvent être essayées pour identifier des problèmes ou créer un script, puis les soumettre à des tests CI pour éviter les régressions.
Découvrir ce que vivent vos utilisateurs réels (données réelles)
Accéder à PageSpeed Insights
PageSpeed Insights extrait les données réelles de l'API de création de rapports sur l'expérience utilisateur Chrome (CrUX), et fournit un instantané des performances de votre page et de votre origine au cours des 28 derniers jours. Ces données incluent désormais l'INP:
Essayez avec PageSpeed Insights.
Collecter vos propres valeurs INP à partir du champ
Si vous souhaitez collecter vous-même des données INP pour un site, le moyen le plus simple est d'utiliser la bibliothèque web-vitals, qui est désormais entièrement compatible avec INP dans sa version bêta.
import {onINP} from 'web-vitals';
onINP(({value}) => {
// Log the value to the console, or send it to your analytics provider.
console.log(value);
});
En savoir plus sur web-vitals et les mesures dans la console DevTools
Extension Chrome Web Vitals
L'extension Web Vitals offre un aperçu de l'expérience sur la page de vos utilisateurs (à partir de l'API CrUX), ainsi que les valeurs en temps réel des signaux Web essentiels et les métriques clés de la visite actuelle sur la page.
Installez l'extension Web Vitals pour Chrome.
Diagnostiquer les problèmes de performances (données de test)
Utiliser les flux utilisateur Lighthouse
Le nouveau mode période dans le panneau Lighthouse des outils de développement vous permet de démarrer Lighthouse, d'interagir avec votre page de test comme vous le souhaitez, puis d'obtenir un rapport sur ce qui s'est passé pendant cette période. Ce rapport inclut désormais l'INP et un audit pour aider à diagnostiquer les problèmes de réactivité.
La même série d'interactions peut être automatisée à l'aide des parcours utilisateur Lighthouse. INP est disponible dans les parcours utilisateur à partir de Lighthouse 9.6.
Informations sur la disponibilité de l'outil
- Rapport d'expérience utilisateur Chrome
- BigQuery: INP disponible en tant que
interaction_to_next_paint - API CrUX: INP disponible en tant que
interaction_to_next_paint - Tableau de bord CrUX: inclut les données INP.
- BigQuery: INP disponible en tant que
- PageSpeed Insights
- pagespeed.web.dev: données de champs INP au niveau de la page et de l'origine provenant de l'API CrUX affichées sous la forme "Interaction to Next Paint"
- API PSI: INP disponible en tant que
INTERACTION_TO_NEXT_PAINT_MS
- Bibliothèque JS
web-vitalsweb-vitalsinclut une assistance INP
- Extension Chrome Web Vitals
- Inclut les données INP et les mesures locales de l'INP lorsqu'elles sont disponibles depuis l'API CrUX
- Phare
- Panneau Lighthouse dans les outils de développement: mesure INP disponible en mode "période" dans Chrome Canary (104)
- Module npm Lighthouse: mesure INP disponible sur des périodes (utilisez Puppeteer pour une entrée synthétique).
Travaux futurs et demande de commentaires
À l'avenir, les équipes chargées des outils Chrome continueront d'investir dans des fonctionnalités de débogage et des recommandations d'optimisation pour INP.
Si vous avez des commentaires sur l'utilité de la métrique ou la facilité de mesure, veuillez les intégrer au groupe Google web-vitals-feedback.