INP : un nouvel indicateur des Core Web Vitals pour mesurer la réactivité des pages

Un nouvel indicateur de performance est apparu parmi les signaux Web Essentiels de Google (Core Web Vitals). Google a souhaité se rapprocher du ressenti utilisateur sur le temps de chargement d’une page Web. Ainsi, là où le LCP (Larget Contentful Paint) mesure le temps de chargement de l’élément principal d’une page au-dessus de la ligne de flottaison, et le CLS (Cumulative Layout Shift) les différents mouvements des éléments au sein d’une page pendant son chargement, le FID (First Input Delay) ne semble pas avoir été à la hauteur des attentes des équipes du moteur pour suivre la réactivité d’une page. C’est dans ce contexte qu’intervient le nouvel indicateur INP visant à être au plus proche de la réalité, quant aux différentes interactions que peut avoir un utilisateur sur une page Web.

Qu’est-ce que l’Interaction to Next Paint (INP)?

A la suite d’un article sur le site web.dev de Google, l’INP a été annoncée lors du Google I/O 2022 comme une mesure plus performante pour mesurer l’interactivité avec une page. En effet, là où le FID ne tient compte que de la première action d’un utilisateur, et le temps de réponse du navigateur pour que l’interaction ait lieu pendant le chargement d’une page, l’INP lui se concentre pur sa part sur l’ensemble des interactions qui peuvent se produire pendant toutes les interactions d’un utilisateur sur une page.

Avant l’arrivée du FID, l’indicateur de TBT (Total Blocking Time - qui cumulait la somme des temps de blocage du navigateur, et le TTI (Time To Interact - qui était calculé en fonction du LCP et de la fin de la dernière longue tâche effectuée par le navigateur) étaient les premiers KPI liés à la webperf qui visaient à interpréter la latence des interactions d’une page Web , mais ne s’avérait pas suffisamment représentatif de toutes les interactions que pouvaient avoir les utilisateurs sur la durée de visite d’une page.

Total Blocking Time qui cumulait le temps supplémentaire des longues tâches, au-delà de 50ms

Avec ces différents indicateurs, il semble évident que Google se cherche encore sur cette mesure de réactivité d’une page, et n’arrive pas à avoir une donnée suffisamment représentative du ressenti utilisateur sur le temps de réponse d’une page pour donner suite à une interaction, et ce sur son cycle de vie. Cette donnée est pourtant cruciale, puisque les données relatives à l’utilisation de Chrome montrent qu’environ 90% du temps passé par un utilisateur sur une page l’est après son chargement.

Principe de l’INP

Quand une page réagit aux interactions, les changements qui en résultent dans l'interface utilisateur constituent un retour visuel. Dans son article sur l’INP, Google explique utiliser ce retour visuel pour savoir si, par exemple, un produit qui a été ajouté à un panier en ligne est effectivement bien ajouté, si le contenu d'un formulaire de connexion est authentifié par le serveur, si un menu mobile s'est ouvert, etc.

Dans l’exemple ci-dessous, la réactivité de l’image de droite donne un retour visuel immédiat qu'une image est en train d'être récupérée sur le serveur. Ce retour visuel montre que l’interface a réagi à la suite d’une action utilisateur, et souligne l'importance de communiquer le résultat d'une interaction. À l’inverse, l’image de gauche ne donne pas de réponse ou d’information visuelle immédiate après l’interaction, ce qui provoque un temps de réponse plus long pour l’utilisateur et peut être compris comme une mauvaise prise en compte de son action.

Comme le fait le CLS qui mesure les mouvements des éléments tout au long du cycle de vie d’une page, l’INP évalue quant à lui la réactivité d’une page en enregistrant l’ensemble des latences après chaque interaction, également tout au long du cycle de vie de la page (en non uniquement pendant son chargement).

Comment est mesurée l’INP ?

L’Interaction to Next Paint est une mesure qui vise donc à représenter la latence globale des interactions sur une page, en sélectionnant l'une des interactions les plus longues qui se produisent lorsqu'un utilisateur visite une page.

Pour les pages pour lesquelles moins de 50 interactions sont détectées au total au total, INP représentera l’interaction avec la moins bonne réactivité. Pour les pages ayants plus d’interactions, INP sera représenté par le 98e percentile de la latence des interactions.

Ça n’est donc la tâche la plus longue qui est mesurée. Cela vient en partie du fait que le plus long délai de réactivité peut être adapté « pour les pages ayant un nombre relativement faible d'interactions » ; mais toutes les pages web ne sont pas égales et « certaines requièrent plus d'interaction que d'autres. Par exemple une application de jeu vidéo requiert plus d'interaction qu'un blog éditorial ou un site d'information » comme le précise le spécialiste de chez Google, Jeremy Wagner.

Pour les pages qui présentent un nombre très élevé d'interactions, l'échantillonnage de la plus mauvaise réactivité ne serait pas approprié. En se concentrant sur un percentile, il est possible d'évaluer de façon équitable si la grande majorité des interactions d'une page sont traitées en temps voulu. Voici la façon dont le nombre d'interactions affecte le percentile de latence d'interaction choisi :

Précision sur les interactions

Afin de mieux comprendre comment est calculé un temps de réponse à la suite d’une interaction, il est nécessaire de préciser ce qui est considéré comme étant une interaction. C’est en réalité un ensemble d'événements qui interviennent au cours du même geste logique de l'utilisateur. Par exemple, les interactions de type « touch » sur un écran tactile comprennent plusieurs événements, tels que le pointeur vers le haut, le pointeur vers le bas et le clic, qui peuvent tous contribuer à la latence globale de l'interaction.

La latence d'une interaction unique est constituée par la durée la plus longue de tout événement faisant partie de l'interaction. La durée étant mesurée à partir du moment où l'utilisateur a interagi avec la page jusqu'à la présentation de l'image suivante (peinture de la page avec des différences visuelles) après l'exécution de tous les gestionnaires d'événements associés.

La durée de l’INP est la somme des intervalles de temps suivants :

Le délai d'entrée, qui est le temps entre le moment où l'utilisateur interagit avec la page, et celui où les gestionnaires d'événements s'exécutent.
Le délai de traitement, qui est le temps total nécessaire à l'exécution du code dans les gestionnaires d'événements associés.
Le délai de présentation, qui est le temps entre la fin de l'exécution des gestionnaires d'événements et la présentation de l'image suivante par le navigateur.

Description d'une interaction simple

Lorsqu'une interaction est effectuée avec une page, le moteur de cette interactivité est bien souvent JavaScript (sans oublier le fait que les navigateurs fournissent une interactivité par le biais d’éléments non alimentés par le JS, comme les cases à cocher, les boutons radio, etc.) Pour ce qui est de l'INP, une interaction consiste en l'un des éléments suivants :

Cliquer sur un élément interactif avec une souris.
Taper sur un élément interactif sur un appareil avec un écran tactile.
Appuyer sur une touche d'un clavier physique ou d'un clavier à l'écran.

Ce qu’il faut bien prendre en compte pour ce nouvel indicateur de réactivité est qu’une interaction peut être constituée de plusieurs événements. Par exemple, la frappe d'une touche se compose des événements keydown et keyup. Les interactions de « touchscreen » sur un mobile (ou écran tactile) contiennent les événements pointeur haut et pointeur bas. Tous les événements d'une interaction font partie de ce que l'on appelle une interaction utilisateur logique.

Il faut garder à l’esprit ce qui a été mentionné précédemment, à savoir que chaque interaction se compose de trois phases : le délai d'entrée, le temps de traitement et le délai de présentation. La durée des rappels d'événements associés à une interaction est la somme des temps impliqués dans les trois phases.

Plusieurs interactions sur une page dont la deuxième est plus longue que la première

Dans cet exemple, nous constatons qu’une interaction a été plus longue que l’autre. L’INP est calculé lorsque l’utilisateur quitte la page, ce qui donne une valeur pour la réactivité globale de la page sur l’ensemble de son cycle de vie. Si une page répond rapidement aux interactions du percentile élevé, nous pouvons en conclure que les interactions de tous les percentiles inférieurs sont également rapides.

Qu’est-ce qu’une bonne valeur d’INP ?

Il est relativement complexe de décider ce qu’est une bonne valeur d’INP versus une mauvaise valeur, tant les typologies de pages peuvent être variées. Sur un site onepage avec de nombreuses interactions via JS sur la même page, l’INP risque d’être bien plus élevé que la moyenne.

D’une part il est important de fournir une expériences utilisateur qui offre une bonne réactivité. D'autre part, il faut tenir compte du fait que les capacités des appareils utilisés varient considérablement, et donc fixer des attentes réalisables (en choisissant un objectif qui n'est pas impossible à atteindre sur les appareils bas de gamme).

Il est donc nécessaire qu'une mesure de réactivité soit appropriée pour de nombreux cas d'utilisation ! Pour s’assurer d’atteindre ces objectifs, un bon seuil à mesurer est le 75e percentile des chargements de pages enregistrés sur le terrain (Real User Monitoring), segmenté entre les appareils mobiles et de bureau :

Mesure du score INP dans les Core Web Vitals

Un INP inférieur ou égal à 200 millisecondes signifie que votre page a une bonne réactivité.
Un INP supérieur à 200 millisecondes et inférieur ou égal à 500 millisecondes signifie que la réactivité de votre page doit être améliorée.
Un INP supérieur à 500 millisecondes signifie que la réactivité de votre page est faible.

En cas d’absence d’interaction ?

Dans certains cas, il se peut que la page se charge, mais qu’aucune interaction avec l’utilisateur n’ait lieu. Cela peut se produire pour plusieurs raisons :

L’utilisateur a chargé la page, mais s’est laissé distraire et n’a pas interagit avec.
L’utilisateur a chargé la page, l’a fait défiler (interaction non prise en compte par l’INP), mais n’a jamais cliqué, touché l’écran ou appuyé sur une touche du clavier.
La page a été visitée par un robot (par exemple, un robot de recherche ou un navigateur headless) qui n’était pas programmé pour interagir avec la page.

Dans ces trois cas de figure, aucune valeur INP ne sera donc rapportée.

Principales différences avec le FID

Là où INP prend en compte toutes les interactions de la page, First Input Delay (FID) ne tient compte que de la première interaction. Il ne mesure également que le délai de saisie, et non le temps de traitement des gestionnaires d'événements ou le délai de présentation de la trame suivante.

L'INP va plus loin que la première impression qui peut être bonne avec un faible score de FID. Cet indicateur couvre l'ensemble des interactions qui peuvent se produire, entre le moment où la page commence à se charger et le moment où l'utilisateur quitte la page. En échantillonnant toutes les interactions, la réactivité peut être évaluée de manière exhaustive. C’est ce qui fait de l'INP un indicateur de réactivité beaucoup plus fiable que le FID, sur toute la durée d’utilisation d’une page, et pas uniquement sur la première interaction.

Voici un tableau qui compare ces deux KPI et permet de mettre en avant les différences fondamentales entre ces indicateurs de la réactivité d’une page :

Différences entre FID et INP

Comment améliorer son INP en cas de mauvais score ?

Des valeurs INP élevées sont généralement le signe d'une forte utilisation du JavaScript, ou d'autres tâches non JS du thread principal qui peuvent être exécutées en même temps que les interactions avec l'utilisateur.

Améliorer l'INP pendant le démarrage de la page

L'INP peut être un facteur pendant le chargement de la page, quand les utilisateurs peuvent tenter d'interagir avec une page pendant qu'elle récupère le JavaScript (qui permettra la mise en place des gestionnaires d'événements qui fournissent l'interactivité nécessaire au fonctionnement de la page).

Pour améliorer la réactivité lors du chargement des pages, voici plusieurs pistes :

Supprimer le code inutilisé à l'aide de l'outil de couverture dans DevTools de Chrome (Ctrl +P -> Show coverage).
Trouver des possibilités de fractionnement du code JS, (bundle JS / code splitting)pour ne charger que le JavaScript utile pendant le chargement de la page (et passer en defer le reste).
Identifier le JavaScript tiers trop lent qui se chargerait au démarrage.
Utiliser l’onglet « Performance » de DevTools dans Chrome pour trouver les tâches longues que vous pouvez optimiser.
Etc.

Améliorer l'INP après le démarrage de la page

L'INP étant calculé à partir d'entrées échantillonnées pendant tout le cycle de vie d’une page, il est possible qu’il soit influencé par ce qui se passe après le démarrage de la page :

Utiliser l'API postTask pour hiérarchiser les tâches de manière appropriée.
Utiliser l’onglet Performance de Chrome pour évaluer les interactions qui interviennent en tâche de fond (par exemple, l’ouverture/fermeture d'un menu de navigation mobile) et trouver les tâches longues qu’il sera nécessaire d’optimiser.
Vérifier le JavaScript tiers dans votre site Web pour voir s'il affecte la réactivité de la page.
Etc.

Outils à disposition pour mesurer l’INP

Voici la liste des outils qui vous permettront de mesurer et de suivre dans le temps les performances INP de vos pages :

Outils Rum (RealUser Monitoring)

PageSpeed Insights.
Chrome User Experience Report (CrUX).
CrUX API via la Valeur experimental_interaction_to_next_paint.
CrUX Dashboard (dans Data Studio)
web-vitalsJavaScript library

Outils de Synthetic Monitoring

Onglet Lighthouse dans Chrome DevTools, disponible via le "Timespan Mode"
Lighthouse npm module
Lighthouse User Flows
Web Vitals extension for Chrome

Quid de l’INP pour la suite ?

L’INP reste pour le moment une valeur expérimentale, et il est fort probable que dans le temps, les seuils de calcul soient réadaptés en fonction de toutes les données que Google aura récupérées, afin de proposer une valeur la plus juste vis-à-vis de la globalité des pages testées. Restez donc connectés sur Abondance et Réacteur pour la suite des opérations...