Les données d'utilisation de Chrome montrent que 90% du temps d'un utilisateur sur une page est consacré après son chargement. Il est donc important de mesurer minutieusement 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éagit rapidement aux interactions effectuées avec elle. Lorsqu'une page répond à une interaction, le résultat génère un retour visuel, qui est présenté par le navigateur dans l'image suivante. Le retour visuel vous indique, par exemple, si un article que vous ajoutez à un panier d'achat en ligne est en train d'être ajouté, si un menu de navigation sur mobile 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 avertir l'utilisateur que quelque chose se passe. Le temps avant le prochain peinture est la première occasion de le faire. Par conséquent, l'objectif de INP n'est pas de mesurer tous les effets éventuels de l'interaction (tels que les récupérations de réseau et les mises à jour de l'interface utilisateur à partir d'autres opérations asynchrones), mais le temps pendant lequel le rendu next peint est bloqué. En retardant le retour visuel, vous risquez de donner aux utilisateurs l'impression que la page ne répond pas à leurs actions.
L'objectif d'INP est de s'assurer que le délai entre le moment où un utilisateur commence une interaction et le moment où l'image suivante est peinte est aussi court que possible, pour toutes les interactions de l'utilisateur ou la plupart des interactions.
Dans la vidéo suivante, l'exemple de droite donne un retour visuel immédiat de l'ouverture d'un accordéon. Il montre également comment une mauvaise réactivité peut entraîner l'entrée de plusieurs réponses involontaires parce que l'utilisateur pense que l'expérience ne fonctionne pas.
Cet article explique le fonctionnement de l'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 (clic, appui et clavier) qui se produisent tout au long de la durée de vie de la visite d'un utilisateur sur une page. La valeur INP finale correspond à la plus longue interaction observée, sans tenir compte des anomalies.
Comme indiqué ci-dessus, l'INP est calculé en observant toutes les interactions effectuées avec une page. Pour la plupart des sites, l'interaction présentant la latence la plus faible 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 interaction anormalement élevée sur un site autrement réactif. Plus il y a d'interactions, plus ce phénomène 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 la valeur d'interaction la plus élevée toutes les 50 interactions. La grande majorité des expériences sur la page n'enregistrent pas plus de 50 interactions. Par conséquent, la pire des interactions sera signalée. Le 75e centile de toutes les pages vues est ensuite enregistré comme d'habitude, ce qui élimine les anomalies afin d'obtenir une valeur que la grande majorité des utilisateurs consultent ou mieux.
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 pilotée par JavaScript, CSS, par des commandes de navigateur intégrées (telles que des éléments de formulaire), ou par 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 déclenche l'interaction, du moment où l'utilisateur commence l'interaction jusqu'au moment où l'image suivante est présentée avec un retour visuel.
Qu'est-ce qu'un bon score INP ?
Il est difficile d'épingler des libellés tels que "bon" ou "médiocre" à une métrique de réactivité. D'une part, vous devez encourager les pratiques de développement qui privilégient la bonne réactivité. D'autre part, vous devez tenir compte du fait que les capacités des appareils utilisés par les utilisateurs varient considérablement pour définir des attentes de développement réalisables.
Pour vous assurer que vous proposez des expériences utilisateur avec une bonne réactivité, le 75e centile des chargements de page enregistrés sur le terrain est un bon seuil à mesurer, segmenté entre les appareils mobiles et les ordinateurs:
- Un INP inférieur ou égal à 200 millisecondes signifie que votre page présente une bonne réactivité.
- Un INP supérieur à 200 millisecondes et inférieur à 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 une interactivité par le biais de commandes non basées sur JavaScript, telles que les cases à cocher, les cases d'option et les commandes CSS.
En ce qui concerne 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.
Les interactions se produisent dans le document principal ou dans les iFrames qui y sont intégrés (par exemple, lorsque l'utilisateur clique sur le bouton de lecture d'une vidéo intégrée). Les utilisateurs finaux ne sauront pas ce qui se trouve dans un iFrame ou non. Par conséquent, l'INP au sein des cadres iFrame est nécessaire pour mesurer l'expérience utilisateur sur la page de premier niveau. Notez que les API Web JavaScript n'auront pas accès au contenu de l'iFrame. Il est donc possible qu'ils ne puissent pas mesurer l'INP dans un iFrame. La différence entre CrUX et RUM apparaîtra.
Les interactions peuvent se composer de deux parties, chacune comportant plusieurs événements. Par exemple, une frappe est constituée des événements keydown, keypress et keyup. Les interactions tactiles contiennent des événements pointerup et pointerdown. L'événement dont la durée de l'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 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 répond de manière fiable aux entrées utilisateur.
En quoi INP est-il différent du First Input Delay (FID) ?
Lorsque INP prend en compte toutes les interactions avec la page, le FID (First Input Delay) ne prend en compte que la première interaction. De plus, il ne mesure que 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 ni le délai avant l'affichage de l'image suivante.
Le FID étant également une métrique de réactivité au chargement, cela s'explique par le fait que si la première interaction effectuée avec une page lors de la phase de chargement a peu ou pas de retard d'entrée perceptible, la page a fait une bonne première impression.
L'INP ne se limite pas aux premières impressions. L'échantillonnage de toutes les interactions permet d'évaluer de manière exhaustive la réactivité, ce qui fait de l'INP un indicateur plus fiable que le FID.
Que se passe-t-il si aucune valeur INP n'est indiquée ?
Il est possible qu'une page ne renvoie aucune valeur INP. Ce problème peut avoir plusieurs causes :
- La page a été chargée, mais l'utilisateur n'a jamais cliqué, appuyé ou appuyé sur une touche de son clavier.
- La page a été chargée, mais l'utilisateur a interagi avec elle à l'aide de gestes qui n'impliquent pas de cliquer, d'appuyer ni d'utiliser le clavier. Par exemple, le défilement ou le survol sur des éléments ne sont pas pris en compte dans le calcul de l'INP.
- Un robot, tel qu'un robot d'exploration de la recherche ou un navigateur sans interface graphique qui n'a pas été conçu pour interagir avec la page, accède à la page.
Mesurer l'INP
Vous pouvez mesurer l'INP sur le terrain et en laboratoire grâce à divers outils.
Sur le terrain
Idéalement, votre parcours d'optimisation de l'INP commencera avec les données de terrain. Dans le meilleur des cas, les données réelles de Real User Monitoring (RUM) vous fournissent 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) 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 obtenir rapidement des données réelles pour INP via CrUX dans PageSpeed Insights (et d'autres métriques 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 des pages.
Cependant, bien que l'expérience CrUX vous indique qu'il existe un problème de haut niveau, il ne fournit souvent pas assez de détails pour permettre de bien comprendre le problème. Une solution RUM peut vous aider à explorer plus en détail 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 commencerez les tests dans l'atelier une fois que vous disposerez de données réelles suggérant que vos interactions sont lentes. Toutefois, en l'absence de données réelles, il existe des stratégies pour reproduire les interactions lentes dans l'atelier. Ces stratégies incluent le suivi des parcours utilisateur courants et le test des interactions tout au long du processus, ainsi que l'interaction avec la page lors du chargement (lorsque le fil de discussion principal est souvent le plus chargé) afin de détecter les interactions lentes pendant cette partie cruciale de l'expérience utilisateur.
Améliorer l'INP
Une série de guides sur l'optimisation de l'INP est disponible pour vous guider tout au long du processus d'identification des interactions lentes sur le terrain et d'utilisation des données de test pour les détailler et les optimiser de différentes manières.
Journal des modifications
Des bugs sont parfois découverts dans les API utilisées pour mesurer les métriques, et parfois dans les définitions des métriques elles-mêmes. Des modifications doivent donc 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, toutes les modifications apportées à l'implémentation ou à la définition de ces métriques seront affichées dans ce journal des modifications.
Si vous avez des commentaires sur ces métriques, vous pouvez les faire dans le groupe Google web-vitals-feedback.