Interaction to Next Paint (INP)

Jeremy Wagner

Les données d'utilisation de Chrome montrent que 90% du temps passé par un utilisateur sur une page est passé après son chargement. Il est donc important de mesurer attentivement la réactivité tout au long du cycle de vie de la page. C'est ce que la métrique INP évalue.

Une bonne réactivité signifie qu'une page répond rapidement aux interactions. Lorsqu'une page répond à une interaction, le navigateur présente un retour visuel dans le frame suivant qu'il peint. Les commentaires visuels vous indiquent, par exemple, si un article que vous ajoutez à un panier en ligne est bien ajouté, si un menu de navigation mobile s'est ouvert, si le contenu d'un formulaire de connexion est authentifié par le serveur, etc.

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 premier retour visuel pour indiquer à l'utilisateur qu'il se passe quelque chose. Le frame suivant que le navigateur va peindre est la première opportunité de le faire.

Par conséquent, l'objectif de l'INP n'est pas de mesurer tous les effets éventuels d'une interaction (telles que les récupérations réseau et les mises à jour de l'UI à partir d'autres opérations asynchrones), mais le moment où la peinture suivante est bloquée. En retardant les retours visuels, les utilisateurs peuvent avoir l'impression que la page ne répond pas assez rapidement. L'INP a été développé pour aider les développeurs à mesurer cette partie de l'expérience utilisateur.

Dans la vidéo suivante, l'exemple de droite fournit un retour visuel immédiat indiquant qu'un accordéon s'ouvre. L'exemple de gauche montre une mauvaise réactivité et comment elle peut nuire à l'expérience utilisateur.

Ce guide explique le fonctionnement de l'INP, comment le mesurer et vous fournit des ressources pour l'améliorer.

Qu'est-ce que l'INP ?

L'INP est une métrique qui évalue la réactivité globale d'une page aux interactions des utilisateurs en observant la latence de toutes les interactions (clic, appui et commandes au clavier) survenant au cours de la visite d'un utilisateur sur la page. La valeur INP finale correspond à l'interaction la plus longue observée, en ignorant les anomalies.

Une interaction est un groupe de gestionnaires d'événements qui se déclenchent pendant le même geste utilisateur logique. Par exemple, les interactions "appui" sur un appareil à écran tactile incluent plusieurs événements, tels que pointerup, pointerdown et click. Une interaction peut être gérée par JavaScript, CSS, des commandes du navigateur intégrées (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 pilotent l'interaction, du moment où l'utilisateur commence l'interaction jusqu'au moment où le navigateur peut à nouveau peindre un frame.

Qu'est-ce qu'un bon score INP ?

Il est difficile d'épingler des libellés tels que "bon" ou "mauvais" sur une métrique de réactivité. D'un côté, vous souhaitez encourager les pratiques de développement qui privilégient la réactivité. D'un autre côté, vous devez tenir compte du fait que les capacités des appareils utilisés par les utilisateurs varient considérablement. Vous devez donc définir des attentes de développement réalistes.

Pour vous assurer de proposer une expérience utilisateur réactive, nous vous recommandons de mesurer le 75e centile des chargements de pages enregistrés sur le terrain, segmentés par appareil mobile et ordinateur:

• Un INP inférieur ou égal à 200 millisecondes signifie qu'une page est réactive.
• Un INP supérieur à 200 millisecondes et inférieur ou égal à 500 millisecondes signifie que la réactivité d'une page doit être améliorée.
• Un INP supérieur à 500 millisecondes signifie que la page est peu réactive.

Qu'est-ce qu'une interaction ?

JavaScript est souvent le principal moteur de l'interactivité, mais les navigateurs fournissent également de l'interactivité via des commandes non compatibles avec JavaScript, telles que les cases à cocher, les boutons d'option et les commandes compatibles avec CSS.

Pour les besoins de l'INP, seuls les types d'interactions suivants sont observés:

• Cliquer avec une souris
• Appuyer sur un appareil à écran tactile
• Appuyer sur une touche d'un clavier physique ou à l'écran

Les interactions se produisent dans le document principal ou dans les iFrames intégrés au document (par exemple, lorsque vous cliquez sur le bouton de lecture d'une vidéo intégrée). Les utilisateurs finaux ne savent pas ce qui se trouve dans une iframe ou non. Par conséquent, les INP dans les iframes sont nécessaires pour mesurer l'expérience utilisateur de la page de niveau supérieur. Étant donné que les API Web JavaScript n'ont pas accès au contenu des iFrames, cela peut entraîner une différence entre CrUX et RUM.

Les interactions peuvent comporter plusieurs événements. Par exemple, une frappe inclut les événements keydown, keypress et keyup. Les interactions tactiles contiennent des événements pointerup et pointerdown. L'événement de la durée la plus longue au cours de l'interaction contribue à la latence totale de l'interaction.

L'INP de la page est calculé lorsque l'utilisateur quitte la page. Le résultat est une valeur unique 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 a répondu de manière fiable aux entrées utilisateur.

En quoi l'INP diffère-t-il du FID (First Input Delay) ?

L'INP est la métrique qui succède au First Input Delay (FID). Bien que les deux soient des métriques de réactivité, le FID ne mesure que le délai d'entrée de la première interaction sur une page. L'INP améliore le FID en observant toutes les interactions sur une page, du délai d'entrée 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 l'INP et le FID sont deux 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 où les interactions se produisent au cours de la durée de vie d'une page.

Que se passe-t-il si aucune valeur INP n'est signalée ?

Il est possible qu'une page ne renvoie aucune valeur INP. Plusieurs raisons peuvent expliquer cette situation:

• La page a été chargée, mais l'utilisateur n'a jamais cliqué, appuyé sur un bouton ni appuyé sur une touche de son clavier.
• 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.
• La page est consultée par un robot, tel qu'un robot d'exploration de recherche ou un navigateur headless, qui n'a pas été programmé pour interagir avec la page.

Mesurer l'INP

L'INP peut être mesuré à la fois sur le terrain et en laboratoire, dans la mesure où vous pouvez simuler des interactions utilisateur réalistes.

Sur le terrain

Idéalement, votre parcours d'optimisation de l'INP doit commencer par les données sur le terrain. Dans le meilleur des cas, les données sur le terrain de la surveillance réelle des utilisateurs (RUM) vous fourniront non seulement la valeur INP d'une page, mais aussi 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), ainsi que d'autres délais utiles qui peuvent vous aider à identifier la partie de l'interaction qui affectait la réactivité.

Si votre site Web peut être inclus dans le rapport d'expérience utilisateur Chrome (CrUX), vous pouvez obtenir rapidement des données sur le terrain pour l'INP via CrUX dans PageSpeed Insights (et pour les autres Core Web Vitals). Vous pouvez au moins obtenir une image au niveau de l'origine de l'INP de votre site Web, mais dans certains cas, vous pouvez également obtenir des données au niveau de l'URL.

Toutefois, même si CrUX peut vous indiquer s'il existe un problème, il ne peut pas vous dire ce qui l'a causé. Une solution RUM peut vous aider à obtenir plus d'informations sur les pages, les utilisateurs ou les interactions utilisateur qui rencontrent des problèmes de réactivité. Attribuer l'INP à des interactions individuelles permet d'éviter les conjectures et les efforts inutiles.

Au laboratoire

Idéalement, vous devriez commencer les tests dans le laboratoire une fois que vous disposez de données sur le terrain suggérant que les interactions d'une page sont lentes. Les données sur le terrain faciliteront la reproduction des interactions problématiques en laboratoire.

Il est toutefois tout à fait possible que vous ne disposiez pas de données sur le terrain. Bien que l'INP puisse être mesuré dans certains outils d'atelier, la valeur d'INP obtenue pour une page lors des tests en atelier dépend des interactions effectuées pendant la période de mesure. Les comportements des utilisateurs peuvent être imprévisibles et très variables. Par conséquent, vos tests en laboratoire ne permettent pas toujours de détecter les interactions problématiques de la même manière que les données sur le terrain. De plus, certains outils de laboratoire ne signalent pas l'INP d'une page, car ils n'observent que le chargement d'une page sans aucune interaction. Dans ce cas, le temps de blocage total (TBT) peut être une métrique proxy raisonnable pour l'INP, mais il ne remplace pas l'INP en soi.

Même si les outils de l'atelier présentent des limites pour évaluer l'INP d'une page, il existe des stratégies pour reproduire des interactions lentes dans l'atelier. Les stratégies consistent à suivre les parcours utilisateur courants et à tester les interactions tout au long du processus, ainsi qu'à interagir avec la page pendant son chargement (lorsque le thread principal est souvent le plus chargé) afin d'identifier les interactions lentes pendant cette partie cruciale de l'expérience utilisateur.

Améliorer l'INP

Une collection de guides sur l'optimisation de l'INP est disponible pour vous aider à identifier les interactions lentes sur le terrain et à utiliser les données de laboratoire pour identifier les causes et 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 apparaître sous la forme d'améliorations ou de régressions dans vos rapports et tableaux de bord internes.

Pour vous aider à gérer ce point, toutes les modifications apportées à l'implémentation ou à la définition de ces métriques seront indiquées dans ce journal des modifications.

Si vous avez des commentaires sur ces métriques, envoyez-les dans le groupe Google web-vitals-feedback.

Tester vos connaissances