Nous sommes ravis de proposer la première série d'outils 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 sur la métrique INP.
Mesure suggérée
L'objectif de la mesure de l'INP est de comprendre la rapidité avec laquelle votre page répond à l'entrée utilisateur. La seule façon d'obtenir des données réalistes consiste à mesurer la façon dont votre page répond aux utilisateurs réels qui visitent votre site à l'aide de données réelles.
La mesure de 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 entrée manuelle pendant la mesure ou doivent être programmés avec un outil d'automatisation tel que Puppeteer. Lorsque des interactions clés sont identifiées à partir des parcours utilisateur types, elles peuvent être testées pour identifier les problèmes ou être programmées et intégrées à des tests d'intégration continue pour éviter les régressions.
Découvrez l'expérience de vos utilisateurs réels (données réelles)
Accéder à PageSpeed Insights
PageSpeed Insights extrait les données réelles de l'API du rapport d'expérience utilisateur Chrome et fournit un aperçu 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 à partir de données réelles
Si vous souhaitez collecter vous-même des 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 l'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 des outils de développement.
Extension Chrome Web Vitals
L'extension Signaux Web fournit à la fois un aperçu de l'expérience sur la page de vos utilisateurs (à partir de l'API CrUX) et les valeurs en temps réel des signaux Web essentiels et des métriques clés de la visite actuelle de la page.
Installer 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 l'INP et un audit pour vous 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 flux utilisateur à partir de Lighthouse 9.6.
Disponibilité des outils
- Rapport sur l'expérience utilisateur de Chrome (CrUX)
- 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 réelles INP au niveau de la page et de l'origine issues de l'API CrUX, affichées sous le nom "Interaction to Next Paint"
- API PSI : INP disponible en tant que
INTERACTION_TO_NEXT_PAINT_MS
web-vitalsBibliothèque JSweb-vitalsinclut la compatibilité avec l'INP
- Extension Chrome Web Vitals
- Inclut la mesure INP locale et les données réelles INP lorsqu'elles sont disponibles à partir de l'API CrUX
- Lighthouse
- 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 dans les 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 la facilité de mesure, veuillez les envoyer au groupe Google web-vitals-feedback.