CDN intelligent OptiPic — Plus qu'une compression. Optimisation d'image complexe à la volée avec conversion en WebP [Plus]
Previous Next

Interaction to Next Paint (INP)

Les données d'utilisation de Chrome montrent que 90% du temps qu'un utilisateur passe sur une page est passé après son chargement. Ainsi, une mesure précise de la réactivité tout au long du cycle de vie de la page est importante. C'est ce que mesure la métrique INP.

Une bonne réactivité signifie qu'une page répond rapidement aux interactions effectuées avec elle. Lorsqu'une page réagit à une interaction, le résultat est un retour visuel, qui est présenté par le navigateur dans la prochaine image qu'il présente. Le retour visuel vous indique, par exemple, si un article que vous ajoutez à un panier en ligne est effectivement ajouté, si un menu de navigation mobile s'est ouvert, si les contenus d'un formulaire de connexion sont authentifiés par le serveur, et ainsi de suite.

Certaines interactions prendront naturellement plus de temps que d'autres, mais pour des interactions particulièrement complexes, il est important de présenter rapidement un premier retour visuel comme indice pour l'utilisateur qu'il se passe quelque chose. Le temps jusqu'à la prochaine peinture est la première occasion de le faire. Par conséquent, le but de l'INP n'est pas de mesurer tous les effets ultérieurs de l'interaction (comme les requêtes réseau et les mises à jour de l'interface utilisateur à partir d'autres opérations asynchrones), mais le temps pendant lequel le prochain retour visuel est bloqué. En retardant le retour visuel, vous pouvez donner aux utilisateurs l'impression que la page ne répond pas à leurs actions.

L'objectif de l'INP est de garantir que le temps entre le moment où un utilisateur lance une interaction et le moment où la prochaine image est affichée soit aussi court que possible, pour toutes ou la plupart des interactions effectuées par l'utilisateur.

Dans la vidéo suivante, l'exemple à droite fournit un retour visuel immédiat indiquant qu'un accordéon est en cours d'ouverture. Il illustre également comment une mauvaise réactivité peut entraîner de nombreuses réponses non voulues à l'entrée utilisateur car l'utilisateur pense que l'expérience est défectueuse.

An example of poor versus good responsiveness. At left, long tasks block the accordion from opening. This causes the user to click multiple times, thinking the experience is broken. When the main thread catches up, it processes the delayed inputs, resulting in the accordion opening and closing unexpectedly.

Cet article explique comment le INP fonctionne, comment le mesurer et indique des ressources pour l'améliorer.

INP est une métrique qui évalue la réactivité globale d'une page aux interactions utilisateur en observant la latence de toutes les interactions de clic, de tap et de clavier qui se produisent tout au long de la visite d'un utilisateur sur une page. La valeur finale de INP est l'interaction la plus longue observée, en ignorant les valeurs aberrantes.

Comme indiqué ci-dessus, INP est calculé en observant toutes les interactions effectuées sur une page. Pour la plupart des sites, l'interaction avec la pire latence est rapportée comme INP. Cependant, pour les pages avec un grand nombre d'interactions, des hoquets aléatoires peuvent entraîner une interaction exceptionnellement élevée sur un site par ailleurs réactif. Plus il y a d'interactions, plus cela est susceptible de se produire. Pour contrer cela et obtenir une meilleure mesure de la réactivité réelle pour ce type de pages, nous ignorons la plus haute interaction pour chaque tranche de 50 interactions. La grande majorité des expériences de navigation n'ont pas plus de 50 interactions, elles signaleront donc l'interaction la plus mauvaise. Le 75e centile de toutes les vues de page est ensuite rapporté comme d'habitude, ce qui élimine davantage les valeurs aberrantes pour donner une valeur que la grande majorité des utilisateurs expérimentent ou dépassent.

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 "tap" sur un appareil à écran tactile comprennent plusieurs événements, tels que pointerup, pointerdown, et click. Une interaction peut être pilotée par JavaScript, CSS, des contrôles intégrés du navigateur (tels que des éléments de formulaire) ou une combinaison de ceux-ci.

La latence d'une interaction se compose de la plus longue durée de durée d'un groupe de gestionnaires d'événements qui pilote l'interaction, depuis le moment où l'utilisateur commence l'interaction jusqu'au moment où le prochain frame est présenté avec un retour visuel.

Attribuer des étiquettes telles que "bon" ou "médiocre" à une métrique de réactivité est difficile. D'une part, vous voulez encourager les pratiques de développement qui privilégient une bonne réactivité. D'autre part, vous devez tenir compte du fait qu'il existe une variabilité considérable dans les capacités des appareils utilisés par les personnes pour fixer des attentes de développement réalisables.

Pour vous assurer de fournir des expériences utilisateur avec une bonne réactivité, un bon seuil à mesurer est le 75e percentile des chargements de pages enregistrés sur le terrain, segmentés par appareils mobiles et de bureau:

  • An INP below or at 200 milliseconds means that your page has good responsiveness.
  • An INP above 200 milliseconds and below or at 500 milliseconds means that your page's responsiveness needs improvement.
  • An INP above 500 milliseconds means that your page has poor responsiveness.


A diagram depicting an interaction on the main thread. The user makes an input while blocking tasks run. The input is delayed until those tasks complete, after which the pointerup, mouseup, and click event handlers run, then rendering and painting work is kicked off until the next frame is presented.
The life of an interaction. An input delay occurs until event handlers begin running, which may be caused by factors such as long tasks on the main thread. The interaction's event handlers then run, and a delay occurs before the next frame is presented.

Le principal moteur d'interactivité est souvent JavaScript, bien que les navigateurs offrent également de l'interactivité grâce à des contrôles non alimentés par JavaScript, tels que les cases à cocher, les boutons radio et les contrôles alimentés par CSS.

En ce qui concerne l'INP, seuls les types d'interaction suivants sont observés:

  • Clicking with a mouse.
  • Tapping on a device with a touchscreen.
  • Pressing a key on either a physical or onscreen keyboard.

Les interactions se produisent dans le document principal ou dans des iframes intégrés au document, par exemple en cliquant sur lecture sur une vidéo intégrée. Les utilisateurs finaux ne sauront pas ce qui se trouve dans un 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. Notez que les API JavaScript Web n'auront pas accès au contenu de l'iframe, il se peut donc qu'elles ne puissent pas mesurer les INP dans un iframe, ce qui se traduira par une différence entre CrUX et RUM.

Les interactions peuvent se composer de deux parties, chacune avec plusieurs événements. Par exemple, une frappe de touche se compose des événements keydown, keypress et keyup. Les interactions de tapotement contiennent les événements pointerup et pointerdown. L'événement ayant la durée la plus longue au sein de l'interaction est choisi comme la latence de l'interaction.

A depiction of more complex interaction containing two interactions. The first is a mousedown event, which produces a frame before the mouse button is let up, which kicks off more work until yet another frame is presented as the result.
A depiction of an interaction with multiple event handlers. The first part of the interaction receives an input when the user clicks down on a mouse button. However, before they release the mouse button, a frame is presented. When the user releases the mouse button, another series of event handlers must run before the next frame is presented.

INP est calculé lorsque l'utilisateur quitte la page, ce qui donne une seule valeur représentative de la réactivité globale de la page tout au long de son cycle de vie. Un faible INP signifie qu'une page répond de manière fiable aux entrées de l'utilisateur.

Lorsque INP prend en compte toutes les interactions de page, le premier délai d'entrée (FID) ne tient compte que de la première interaction. Il mesure également uniquement le délai d'entrée de la première interaction, et non le temps nécessaire pour exécuter les gestionnaires d'événements ou le retard dans la présentation de la trame suivante.

Étant donné que le FID est également une mesure de réactivité du chargement, sa raison d'être est que si la première interaction effectuée avec une page lors de la phase de chargement ne présente pas ou peu de délai d'entrée perceptible, la page a fait une bonne première impression.

L'INP ne se limite pas aux premières impressions. En analysant toutes les interactions, la réactivité peut être évaluée de manière globale, ce qui fait de l'INP un indicateur plus fiable de la réactivité générale que le FID.

Il est possible qu'une page ne renvoie aucune valeur INP. Cela peut se produire pour plusieurs raisons :

  • The page was loaded, but the user never clicked, tapped, or pressed a key on their keyboard.
  • The page was loaded, but the user interacted with the page using gestures that did not involve clicking, tapping, or using the keyboard. For example, scrolling or hovering over elements does not factor into how INP is calculated.
  • The page is being accessed by a bot such as a search crawler or headless browser that has not been scripted to interact with the page.

INP peut être mesuré à la fois sur le terrain et en laboratoire à l'aide de divers outils.

Idéalement, votre parcours d'optimisation du INP commencera par des données de terrain. Dans le meilleur des cas, les données de terrain provenant de la surveillance des véritables utilisateurs (RUM) vous donneront non seulement une valeur de INP pour une page, mais aussi des données contextuelles mettant en évidence quelle interaction spécifique était responsable de la valeur de INP elle-même, si l'interaction s'est produite pendant ou après le chargement de la page, le type d'interaction (clic, frappe de touche ou tapotement) et d'autres informations précieuses.

Si votre site Web est éligible à l'inclusion dans le Chrome User Experience Report (CrUX), vous pouvez rapidement obtenir des données sur le terrain pour INP via CrUX dans PageSpeed Insights (et d'autres indicateurs essentiels du Web). Au minimum, vous pouvez obtenir une vue d'ensemble au niveau de l'origine de votre site Web, mais dans certains cas, vous pouvez également obtenir des données au niveau de la page.

Cependant, bien que CrUX soit utile pour vous indiquer qu'il y a un problème à un niveau élevé, il ne fournit souvent pas suffisamment de détails pour aider à comprendre pleinement quel est le problème. Une solution RUM peut vous aider à approfondir les détails concernant les pages, les utilisateurs ou les interactions utilisateur qui subissent des ralentissements. Pouvoir attribuer l'INP à des interactions individuelles évite les conjectures et les efforts gaspillés.

Idéalement, vous voudrez commencer les tests en laboratoire une fois que vous avez des données terrain qui suggèrent que vous avez des interactions lentes. En l'absence de données terrain, cependant, il existe des stratégies pour reproduire des interactions lentes en laboratoire. Ces stratégies comprennent le suivi des flux utilisateur courants et des tests d'interactions en cours de route, ainsi que l'interaction avec la page pendant le chargement - lorsque le thread principal est souvent le plus occupé - afin de détecter les interactions lentes lors de cette partie cruciale de l'expérience utilisateur.

Une collection de guides sur l'optimisation de l'INP est disponible pour vous guider dans le processus d'identification des interactions lentes sur le terrain et d'utilisation des données en laboratoire pour les optimiser de différentes manières.

?