Interaction to Next Paint (INP) est une métrique Core Web Vitals stable qui évalue la réactivité des pages à l'aide des données de l'API Event Timing. INP observe la latence de toutes les interactions de clic, d'appui et de clavier avec une page tout au long de sa durée de vie et indique la durée la plus longue, en ignorant les anomalies. Un INP faible signifie que la page est systématiquement capable de répondre rapidement à la grande majorité des interactions utilisateur.
Une bonne réactivité signifie que la page réagit rapidement aux interactions. Lorsqu'une page répond à une interaction, le navigateur affiche un retour visuel dans l'image suivante affichée pour indiquer que l'interaction a réussi. Par exemple, il peut fournir des commentaires sur les éléments suivants:
- Indique si un article que vous ajoutez à un panier en ligne est réellement ajouté.
- Indique si un menu de navigation mobile est ouvert.
- Indique si le contenu d'une connexion est authentifié par le serveur.
Certaines interactions prennent naturellement plus de temps que d'autres, mais pour les interactions particulièrement complexes, il est important de présenter rapidement un retour visuel initial pour informer l'utilisateur que quelque chose se passe. Le temps nécessaire pour effectuer l'opération est le plus tôt possible. Par conséquent, l'objectif d'INP n'est pas de mesurer tous les effets éventuels de l'interaction (tels que les récupérations réseau et les mises à jour de l'interface utilisateur à partir d'autres opérations asynchrones), mais le temps pendant lequel le rendu prochain est bloqué. En retardant le retour visuel, vous faites croire aux utilisateurs que la page ne répond pas à leurs actions.
L'objectif de INP est de réduire le délai entre le moment où un utilisateur lance une interaction et le moment où le frame suivant est peint, pour toutes les interactions lancées par l'utilisateur ou la plupart d'entre elles.
L'INP est calculé en observant toutes les interactions effectuées avec une page. Pour la plupart des sites, l'interaction avec la plus faible latence est signalée par le terme INP. Toutefois, pour les pages comportant un grand nombre d'interactions, des problèmes aléatoires peuvent entraîner une interaction à latence anormalement élevée sur un site par ailleurs responsif. Plus il y a d'interactions, plus ce scénario est susceptible de se produire. Pour résoudre ce problème et mieux mesurer la réactivité réelle de ces types de pages, nous ignorons une interaction la plus élevée toutes les 50 interactions. Étant donné que la grande majorité des expériences sur la page ne comptabilisent pas plus de 50 interactions, le navigateur signale presque toujours la pire des interactions. Le 75e centile de toutes les pages vues est ensuite enregistré comme d'habitude, ce qui supprime davantage les anomalies afin d'obtenir une valeur plus représentative de l'expérience utilisateur générale.
Une interaction est un groupe de gestionnaires d'événements qui se déclenchent lors du même geste logique de l'utilisateur. Par exemple, les interactions de type "appui" sur un appareil à écran tactile incluent plusieurs événements, tels que pointerup, pointerdown et click. Une interaction peut être générée par JavaScript, CSS, des commandes intégrées du navigateur telles que des éléments de formulaire, ou une combinaison de ces éléments.
La latence d'une interaction correspond à la durée la plus longue d'un groupe de gestionnaires d'événements qui entraîne l'interaction, du moment où l'utilisateur commence l'interaction jusqu'au moment où l'image suivante présente un retour visuel.
Point clé: Pour en savoir plus sur la mesure de l'INP, consultez la section Qu'est-ce qu'une interaction ?.
Qu'est-ce qu'un bon score INP ?
Pour vous assurer de proposer des expériences utilisateur avec une bonne réactivité, un bon seuil à mesurer est le 75e centile des chargements de page enregistrés dans le champ, segmenté entre les appareils mobiles et les ordinateurs:
- Un INP égal ou inférieur à 200 millisecondes signifie que votre page présente une bonne réactivité.
- Un INP compris entre 200 millisecondes et 500 millisecondes signifie que la réactivité de votre page doit être améliorée.
- Un INP supérieur à 500 millisecondes signifie que votre page présente une faible réactivité.
Que contient une interaction ?
Le principal moteur d'interactivité est souvent JavaScript, bien que les navigateurs fournissent de l'interactivité par le biais de commandes non basées sur JavaScript, telles que les cases à cocher, les cases d'option et les commandes CSS.
Pour les besoins d'INP, seuls les types d'interaction suivants sont observés :
- en cliquant avec la souris ;
- Appui sur un appareil doté d'un écran tactile.
- Appuyer sur une touche d'un clavier physique ou à l'écran.
Important: Le survol et le défilement ne sont pas pris en compte dans l'INP. Toutefois, le défilement avec le clavier (barre d'espace, Page précédente, Page suivante, etc.) implique une frappe de touches qui peut déclencher d'autres événements que INP mesure. Le défilement en conséquence n'est pas pris en compte dans le calcul de l'INP.
Les interactions se produisent dans le document principal ou dans des iFrames intégrés au document (par exemple, un clic sur le bouton de lecture d'une vidéo intégrée). Étant donné que les utilisateurs finaux ne savent pas quelles parties de la page se trouvent dans des iFrames, vous devez mesurer l'INP dans les iFrames afin de le mesurer avec précision pour l'ensemble de la page. Toutefois, les API Web JavaScript n'ont pas accès au contenu de l'iFrame et ne pourront peut-être pas mesurer l'INP dans un iFrame. Cela se traduit par une différence entre CrUX et RUM.
Les interactions peuvent comporter plusieurs événements. Par exemple, une frappe de l'utilisateur inclut les événements keydown, keypress et keyup, tandis que les interactions tactiles incluent les événements pointerup et pointerdown. L'événement dont la durée d'interaction est la plus longue est choisi comme latence de l'interaction.
L'INP est calculé lorsque l'utilisateur quitte la page. Il s'agit alors d'une valeur représentative de la réactivité globale de la page tout au long de son cycle de vie. Un INP faible signifie qu'une page répond de manière fiable aux entrées utilisateur.
En quoi INP est-il différent du First Input Delay (FID) ?
INP est la métrique qui succède au premier délai d'entrée (FID). Bien que ces deux métriques soient des métriques de réactivité, FID n'a mesuré que le délai d'entrée de la première interaction sur une page. INP améliore le FID en prenant en compte toutes les interactions avec la page, du délai d'entrée jusqu'au temps nécessaire pour exécuter les gestionnaires d'événements, et enfin jusqu'à ce que le navigateur ait peint le frame suivant.
Ces différences signifient que INP et FID sont des types de métriques de réactivité différents. Alors que le FID était une métrique de réactivité au chargement conçue pour évaluer la première impression de la page sur l'utilisateur, l'INP est un indicateur plus fiable de la réactivité globale, quel que soit le moment du cycle de vie des interactions avec la page.
Que se passe-t-il si aucune valeur INP n'est indiquée ?
Il est possible qu'une page ne renvoie aucune valeur INP. Cela peut se produire pour plusieurs raisons, y compris les suivantes:
- La page s'est chargée, mais l'utilisateur n'a jamais interagi avec elle.
- La page s'est chargée, mais l'utilisateur a interagi avec elle à l'aide de gestes qui ne sont pas mesurés, comme le défilement ou le survol d'éléments.
- Un robot, tel qu'un robot d'exploration de la recherche ou un navigateur sans interface graphique, qui n'a pas été configuré de script pour interagir avec la page, accède à la page.
Mesurer l'INP
L'INP peut être mesurée à la fois sur le terrain et en laboratoire à l'aide de divers outils.
Point clé: Le meilleur moyen de mesurer l'INP de votre site Web est de collecter des métriques auprès d'utilisateurs réels sur le terrain. Si vous avez l'habitude d'utiliser des données de test pour évaluer les performances, nous vous recommandons de lire l'article Pourquoi les données de test et de terrain peuvent être différentes (et comment y remédier).
Sur le terrain
Dans l'idéal, votre parcours d'optimisation de l'INP commence par les données de terrain. Dans le meilleur des cas, les données de terrain de Real User Monitoring (RUM) vous fournissent non seulement la valeur INP d'une page, mais également des données contextuelles qui mettent en évidence l'interaction spécifique responsable de la valeur INP elle-même, si l'interaction s'est produite pendant ou après le chargement de la page, le type d'interaction (clic, pression sur une touche ou appui) et d'autres informations précieuses.
Si votre site Web remplit les conditions pour être inclus dans le rapport d'expérience utilisateur Chrome, vous pouvez rapidement obtenir des données de champs INP via CrUX dans PageSpeed Insights, ainsi que des données sur d'autres Core Web Vitals. Vous pouvez au minimum obtenir une image de l'INP de votre site Web au niveau de l'origine, mais dans certains cas, vous pouvez également obtenir des données au niveau de la page.
Cependant, bien que CrUX puisse vous indiquer qu'il existe un problème à un niveau élevé, il ne fournit souvent pas assez de détails pour aider à comprendre le problème. Une solution RUM peut vous aider à découvrir plus de détails sur les pages, les utilisateurs ou les interactions utilisateur dont les interactions sont lentes. Pouvoir attribuer l'INP à des interactions individuelles permet d'éviter les approximations et les efforts inutiles.
Au laboratoire
Dans l'idéal, vous devrez commencer les tests dans l'atelier après avoir obtenu des données de terrain suggérant que vos interactions sont lentes. Toutefois, en l'absence de données de champ, il existe des stratégies pour reproduire les interactions lentes dans l'atelier. Les stratégies incluent le suivi des flux utilisateur courants et le test des interactions tout au long du processus, ainsi que l'interaction avec la page pendant le chargement, lorsque le thread principal est souvent le plus chargé, afin d'exposer les interactions lentes au cours de cette partie cruciale de l'expérience utilisateur.
Améliorer l'INP
Consultez notre ensemble de guides sur l'optimisation de l'INP pour savoir comment identifier les interactions lentes sur le terrain et utiliser les données de test pour les optimiser.
Journal des modifications
Il arrive que des bugs soient détectés dans les API utilisées pour mesurer les métriques, et parfois dans les définitions des métriques elles-mêmes. Par conséquent, des modifications doivent parfois être apportées, et ces modifications peuvent se présenter comme des améliorations ou des régressions dans vos rapports et tableaux de bord internes.
Pour vous aider à gérer cette situation, toutes les modifications apportées à l'implémentation ou à la définition de ces métriques sont présentées dans ce journal des modifications.
Si vous avez des commentaires sur ces métriques, envoyez-les dans le groupe Google web-vitals-feedback.