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. Lorsqu'une page répond à une interaction, le navigateur affiche des commentaires visuels 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 dire à l'utilisateur que quelque chose se passe. Le prochain frame que le navigateur affichera est la première occasion de le faire.
Par conséquent, l'objectif d'INP n'est pas de mesurer tous les effets éventuels d'une 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 de blocage du next paint. En retardant le retour visuel, les utilisateurs peuvent avoir l'impression que la page ne répond pas assez rapidement. 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 donne un retour visuel immédiat de l'ouverture d'un accordéon. Dans l'exemple de gauche, une mauvaise réactivité est illustrée dans la façon dont elle peut nuire à l'expérience utilisateur.
Ce guide 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.
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 à latence anormalement élevée sur une page responsive. Plus il y a d'interactions sur une page donnée, plus ce problème a de chances de se produire.
Pour mieux évaluer la réactivité réelle des pages enregistrant un nombre élevé d'interactions, nous ignorons une interaction la plus élevée toutes les 50 interactions. La grande majorité des expériences sur la page ne comptabilisent pas plus de 50 interactions. La pire des interactions est donc le plus souvent 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 pilotent l'interaction, du moment où l'utilisateur commence l'interaction jusqu'au moment où le navigateur affiche l'image suivante.
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 qu'une page présente une bonne réactivité.
- Un INP supérieur à 200 millisecondes et inférieur à 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 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.
Dans le cadre de l'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 savent pas ce qui se trouve ou non dans un iFrame. Par conséquent, l'INP dans les iFrames est nécessaire pour mesurer l'expérience utilisateur sur la page de premier niveau. Étant donné que les API Web JavaScript n'ont pas accès au contenu des iFrames, cela peut présenter 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. Les interactions tactiles contiennent des événements pointerup et pointerdown. L'événement dont la durée d'interaction est la plus longue est ce qui contribue à la latence totale de l'interaction.
L'INP de la page est calculé lorsque l'utilisateur la quitte. Il en résulte 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éagi 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 à First Input Delay (FID). Bien que ces deux métriques correspondent à 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 observant toutes les interactions sur une page, depuis le 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 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ù des interactions se produisent sur 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. 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.
- 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 é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 les touches ou appui) et d'autres codes temporels importants qui peuvent vous aider à identifier quelle partie de l'interaction a affecté la réactivité.
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 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.
Cependant, si l'outil CrUX peut vous indiquer s'il y a un problème, il ne peut pas vous en indiquer la cause. Une solution RUM peut vous aider à obtenir plus de détails sur les pages, les utilisateurs ou les interactions utilisateur qui rencontrent des problèmes de réactivité. 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 qui suggèrent qu'une page présente des interactions lentes. Toutefois, si vous ne disposez pas de données réelles, il existe des stratégies qui vous permettront de 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 parcours, ainsi que l'interaction avec la page lors de son chargement (lorsque le fil de discussion principal est souvent le plus chargé) afin d'identifier les interactions lentes au cours de 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. Vous pouvez également utiliser les données de test pour identifier les causes et les optimiser.
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, envoyez-les dans le groupe Google web-vitals-feedback.
Tester vos connaissances
Quel est l'objectif principal de la métrique INP ?
Parmi les types d'interaction suivants, lesquels sont observés pour calculer l'INP ? (Plusieurs réponses possibles)
Comment la "latence" d'une interaction est-elle définie pour INP ?
Quelle est la différence entre INP et FID ?
Dans quelles circonstances les données INP peuvent-elles être indisponibles pour une page dans des outils tels que PageSpeed Insights ?
Quelle est la stratégie la plus efficace pour reproduire des interactions lentes dans un environnement de laboratoire ?
✨ Ce quiz a été généré par Gemini 1.5 et examiné par des réviseurs humains. Donner votre avis