INP (Interaction to Next Paint)

Jeremy Wagner

Navigateurs pris en charge

• 96
• 96
• x
• x

Source

Remarque : L'interaction jusqu'à la prochaine peinture (INP) est une métrique Core Web Vitals stable qui évalue la réactivité à l'aide des données de l'API Event Timing. L'INP observe la latence de toutes les interactions d'un utilisateur avec la page, et signale une valeur unique sous laquelle ont été toutes (ou presque toutes) les interactions. Un INP faible signifie que la page a été constamment capable de répondre rapidement à toutes, ou à la grande majorité, des interactions des utilisateurs.

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 d'achat 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 cadre suivant affiché par le navigateur est la première occasion 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.

Exemple de mauvaise réactivité par rapport à une bonne réactivité. Sur la gauche, les tâches longues empêchent l'ouverture de l'accordéon. Cela amène l'utilisateur à cliquer plusieurs fois, pensant que l'expérience est défectueuse. Lorsque le thread principal rattrape le retard, il traite les entrées différées, ce qui entraîne l'ouverture et la fermeture inattendue de l'accordéon. Sur la droite, une page plus réactive ouvre l'accordéon rapidement et sans incident.

Ce guide explique comment fonctionne INP, comment le mesurer et indique 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 liées aux clics, aux appuis et au clavier qui se produisent tout au long de la visite d'un utilisateur sur une page. La valeur INP finale correspond à l'interaction la plus longue observée, en ignorant les anomalies.

Détails sur le calcul de l'INP

L'INP est calculé en observant toutes les interactions effectuées avec une page. Pour la plupart des sites, l'interaction avec la latence la pire est signalée par l'INP.

Toutefois, pour les pages comportant un grand nombre d'interactions, des problèmes aléatoires peuvent entraîner une latence inhabituellement élevée sur une page autrement réactive. Plus les interactions sur une page donnée sont nombreuses, plus cela est probable.

Afin de mieux mesurer la réactivité réelle des pages enregistrant un nombre élevé d'interactions, nous ignorons l'interaction la plus élevée toutes les 50 interactions. Pour la grande majorité des expériences sur la page, celles-ci ne comptent pas plus de 50 interactions. Par conséquent, la pire interaction est le plus souvent signalé. Le 75e centile de toutes les pages vues est ensuite indiqué comme d'habitude, ce qui élimine davantage les valeurs aberrantes pour obtenir une valeur que la grande majorité des utilisateurs atteignent ou dépassent.

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 déterminée par du code JavaScript, CSS, des commandes intégrées au navigateur (comme 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.

Point important : 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 ?

Il est difficile d'épingler des libellés tels que "bon" ou "mauvais" sur une métrique de réactivité. D'une part, vous souhaitez encourager les pratiques de développement qui donnent la priorité à une bonne 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 des expériences utilisateur avec une bonne réactivité, le 75e centile de chargements de page enregistrés sur le terrain, segmenté en fonction des appareils mobiles et de bureau, constitue un bon seuil à mesurer:

• 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 qu'une page a une mauvaise réactivité.

Les valeurs d'INP acceptables sont de 200 millisecondes ou moins. Les valeurs médiocres sont supérieures à 500 millisecondes.

Qu'est-ce qu'une interaction ?

Cycle de vie d'une interaction. Un délai d'entrée se produit jusqu'à ce que les gestionnaires d'événements commencent à s'exécuter, ce qui peut être causé par des facteurs tels que des tâches longues sur le thread principal. Les rappels du gestionnaire d'événements de l'interaction s'exécutent ensuite, et un délai est appliqué avant que le frame suivant ne soit présenté.

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 :

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

Important : Les utilisateurs peuvent également interagir avec la page de différentes manières, comme en pointant dessus, en effectuant un zoom ou en faisant défiler la page. Ces interactions ne sont pas observées à des fins d'INP. Toutefois, certaines variantes de ces interactions peuvent inclure des gestes tels que des clics, des pressions sur l'écran ou des pressions sur les touches, que l'INP mesure.

Les interactions se produisent dans le document principal ou dans les iFrames intégrés au document (par exemple, un clic sur 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 de touche inclut les événements keydown, keypress et keyup. Les interactions tactiles contiennent des événements pointerup et pointerdown. C'est l'événement dont la durée est la plus longue dans l'interaction qui contribue à la latence totale de l'interaction.

Représentation d'une interaction avec plusieurs gestionnaires d'événements. La première partie de l'interaction reçoit une entrée lorsque l'utilisateur clique sur un bouton de la souris. Toutefois, avant qu'il ne relâche le bouton de la souris, un cadre s'affiche. Lorsque l'utilisateur relâche le bouton de la souris, une autre série de gestionnaires d'événements doit s'exécuter avant que le frame suivant ne soit présenté.

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 à l'entrée utilisateur.

En quoi INP est-il différent du First Input Delay (FID) ?

L'INP est la métrique qui succède au First Input Delay (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. 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 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 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. Par exemple :

• La page a été chargée, mais l'utilisateur n'a jamais cliqué, appuyé ou 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.

Point important : Le meilleur moyen de mesurer l'INP de votre site Web est de recueillir des métriques auprès d'utilisateurs réels sur le terrain. Si vous avez l'habitude d'utiliser des données de laboratoire pour évaluer les performances, prenez le temps de lire Pourquoi les données expérimentales et les données réelles peuvent être différentes (et comment y remédier).

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 de champ de Real User Monitoring (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 à l'origine 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 de touche ou appui) et d'autres moments importants qui peuvent vous aider à identifier quelle partie de l'interaction a affecté la réactivité.

Pour en savoir plus, consultez Trouver les interactions lentes sur le terrain.

Si votre site Web remplit les conditions requises pour figurer dans le rapport sur l'expérience utilisateur Chrome, vous pouvez obtenir rapidement des données de terrain pour INP via l'expérience utilisateur CrUX dans PageSpeed Insights (et d'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 devez 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 peut être mesuré dans certains outils de l'atelier, la valeur INP obtenue pour une page lors des tests en laboratoire dépendra des interactions effectuées au cours de 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 l'atelier ne signalent pas l'INP d'une page, car ils n'observent que le chargement de cette page sans aucune interaction. Dans de tels cas, le Temps de blocage total (TBT) peut être une métrique de proxy raisonnable pour INP, mais il ne le remplace pas 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 incluent le suivi des flux utilisateur courants et le test des interactions en cours de route, ainsi que les interactions avec la page lors de son chargement (lorsque le thread principal est souvent le plus actif) afin d'identifier les interactions lentes au cours de cette partie cruciale de l'expérience utilisateur.

Pour en savoir plus, consultez Diagnostiquer manuellement les interactions lentes dans le laboratoire.

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 comme des améliorations ou des 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

Quel est l'objectif principal de la métrique INP ?

Pour mesurer le temps nécessaire à l'affichage du premier contenu d'une page.

Incorrecte : cette valeur décrit First Contentful Paint

Pour quantifier la stabilité visuelle d'une page et réduire les changements de mise en page inattendus.

Mauvaise réponse. Il s'agit de la description de Cumulative Layout Shift.

Évaluer le temps nécessaire pour qu'une page devienne entièrement interactive.

Mauvaise réponse. C'est lié au délai avant interactivité, mais INP se concentre spécifiquement sur la réactivité à l'entrée utilisateur.

Pour réduire le temps écoulé entre le moment où un utilisateur lance une interaction et le moment où le frame suivant est peint, pour toutes ou la plupart des interactions qu'il lance.

Bonne réponse !

Quels types d'interactions sont observés pour calculer l'INP ? (Sélectionnez toutes les réponses applicables.)

Cliquer avec une souris

Bonne réponse !

Faire défiler la page à l'aide de la molette de la souris ou du pavé tactile

Faux : l'INP ne prend pas en compte le défilement.

Appuyer sur un écran tactile.

Bonne réponse !

Pointez le curseur de la souris sur des éléments.

Faux : l'INP ne prend pas en compte le survol.

Appuyer sur une touche d'un clavier

Bonne réponse !

Faire un zoom avant ou arrière sur la page

Mauvaise réponse. INP ne tient pas compte d'un zoom

Comment la « latence » d'une interaction est-elle définie pour INP ?

Temps nécessaire au navigateur pour traiter les gestionnaires d'événements d'une interaction.

Mauvaise réponse. Seules la durée du traitement est prise en compte, et non le délai d'entrée ni le temps nécessaire pour afficher l'image suivante.

Temps moyen nécessaire pour que toutes les interactions sur une page génèrent une réponse visuelle.

Faux : l'INP se concentre sur l'interaction la plus longue, et non sur la moyenne.

Temps nécessaire au navigateur pour commencer à traiter les gestionnaires d'événements associés à une interaction.

Mauvaise installation : ne tient compte que du délai d'entrée, et non du temps de traitement et d'affichage.

Durée écoulée entre le début de l'interaction et le moment où le frame suivant est entièrement présenté.

Bonne réponse !

Quelle est la différence entre l'INP et le FID ?

L'INP mesure le temps nécessaire pour que le premier contenu d'une page s'affiche, tandis que le FID mesure la réactivité aux entrées utilisateur.

Mauvaise réponse. Il s'agit d'une description de First Contentful Paint, et non de l'INP.

L'INP prend en compte la durée complète de toutes les interactions, tandis que le FID ne mesure que le délai d'entrée de la première interaction.

Bonne réponse !

L'INP et le FID mesurent différents codes temporels à partir desquels une page devient interactive.

Faux. L'INP et le FID mesurent la rapidité avec laquelle la page répond aux interactions, quel que soit le moment où elles se produisent.

Il n'y a aucune différence. L'INP et le FID ne sont que deux noms différents pour la même métrique.

Mauvaise réponse. Leurs définitions sont différentes.

Dans quelles circonstances les données INP peuvent-elles être indisponibles pour une page dans des outils tels que PageSpeed Insights ?

La page utilise une bibliothèque de mesure des performances personnalisée qui ne génère pas de données INP.

Faux. L'INP est mesuré automatiquement à l'aide des API de la plate-forme Web et ne repose pas sur les pages qui signalent elles-mêmes leurs performances via des bibliothèques personnalisées.

Il n'y a pas suffisamment de données d'interaction des utilisateurs de Chrome pour calculer une valeur INP significative dans le jeu de données CrUX.

Bonne réponse !

Les utilisateurs ont interagi avec la page uniquement en faisant défiler la page et en pointant dessus, ce qui n'est pas pris en compte pour l'INP.

Bonne réponse !

La page est créée à l'aide d'un framework qui s'optimise automatiquement pour INP. Il n'est donc pas nécessaire de la signaler.

Faux : les frameworks peuvent aider à résoudre les problèmes d'INP, mais la métrique reste pertinente et est signalée si des données sont disponibles.

Quelle est la stratégie la plus efficace pour reproduire des interactions lentes dans un environnement de laboratoire ?

Simuler un appareil haut de gamme avec une connexion réseau lente et peu fiable pour créer des conditions difficiles.

Faux : bien que le réseau puisse jouer un rôle, les fonctionnalités de l'appareil sont plus susceptibles de provoquer des interactions lentes.

Tester les interactions uniquement lorsque la page est entièrement chargée et inactive.

Faux : cela peut entraîner l'absence d'interactions lentes pendant le chargement.

Interagir avec la page pendant le chargement et suivre les flux utilisateur courants pour identifier d'éventuels goulots d'étranglement

Bonne réponse !

Se concentrer sur les interactions complexes et inhabituelles que la plupart des utilisateurs ne rencontreront probablement pas

Faux : les flux utilisateur courants sont plus pertinents pour identifier les problèmes d'INP courants.

✨ Ce quiz a été généré par Gemini 1.5 et examiné par des humains. Donnez-nous votre avis