Nous sommes ravis de proposer la première série d'outils pour 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 de la métrique INP.
Mesure suggérée
L'objectif de mesurer l'INP est de comprendre la rapidité avec laquelle votre page répond aux entrées utilisateur. Le seul moyen d'obtenir des données réalistes est de mesurer la réponse de votre page aux utilisateurs réels qui visitent votre site à l'aide de données sur le terrain.
Mesurer l'INP en laboratoire permet ensuite de mieux comprendre les délais des événements et les points à optimiser. Les outils de laboratoire n'interagissent pas automatiquement avec la page. Ils nécessitent donc une saisie manuelle pendant les mesures ou un script avec un outil d'automatisation tel que Puppeteer. Lorsque les interactions clés sont identifiées dans des parcours utilisateur classiques, elles peuvent être testées pour identifier des problèmes ou des scripts, puis 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 des données sur le terrain de l'API du rapport d'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-le sur PageSpeed Insights.
Collecter vos propres valeurs INP sur le terrain
Si vous souhaitez collecter vous-même les données INP pour un site, le moyen le plus simple consiste à 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 sur la mesure dans la console DevTools
Extension Chrome Signaux Web
L'extension Web Vitals fournit à la fois un aperçu de l'expérience utilisateur sur la page (à partir de l'API CrUX), ainsi que les valeurs en temps réel des CWV et les métriques clés de la visite actuelle de la page.
Installez l'extension Web Vitals pour Chrome.
Diagnostiquer les problèmes de performances (données de laboratoire)
Utiliser les flux utilisateur Lighthouse
Le nouveau mode "Période" du panneau Lighthouse dans les 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 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 flux utilisateur Lighthouse. L'INP est disponible dans les parcours utilisateur à partir de Lighthouse 9.6.
Informations sur la disponibilité de l'outil
- Rapport sur l'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: les données de champ INP au niveau de la page et de l'origine de l'API CrUX sont affichées sous la forme "Interaction to Next Paint" (Interaction jusqu'à la prochaine peinture).
- API PSI: INP disponible en tant que
INTERACTION_TO_NEXT_PAINT_MS
- Bibliothèque JavaScript
web-vitalsweb-vitalsinclut la prise en charge de l'INP
- Extension Web Vitals pour Chrome
- Inclut la mesure locale de l'INP et les données de champ de l'INP, le cas échéant, provenant de l'API CrUX
- Phare
- Panneau Lighthouse dans les outils pour les développeurs: mesure de l'INP disponible en mode "durée" dans Chrome Canary (104)
- Module npm Lighthouse: mesure de l'INP disponible pour plusieurs périodes (utilisez Puppeteer pour l'entrée synthétique)
Travaux futurs et demande de commentaires
À l'avenir, les équipes d'outils Chrome continueront d'investir dans les fonctionnalités de débogage et les recommandations d'optimisation pour l'INP.
Si vous avez des commentaires sur l'utilité de la métrique ou sur sa facilité de mesure, veuillez les envoyer au groupe Google web-vitals-feedback.