Core Web Vitals : Interaction to Next Paint (INP) explications en détails
La mesure Interaction to Next Paint (INP) est une mesure expérimentale de terrain qui évalue la réactivité.

Publié le : 27 mai 2022 - Mis à jour le : 27 mai 2022 - Lu 541 fois - Temps de lecture : 9 minutes


La mesure Interaction to Next Paint (INP) est une mesure expérimentale de terrain qui évalue la réactivité. Cet article explique le fonctionnement de l'INP, comment le mesurer, et propose des suggestions pour l'améliorer, car une bonne réactivité est impérative pour une bonne expérience utilisateur.

Core Web Vitals : explications en détails de l'Interaction to Next Paint (INP)

Les Core Web Vitals

Les Core Web Vitals sont le sous-ensemble des Web Vitals qui s'appliquent à toutes les pages Web, qui doivent être mesurées par tous les propriétaires de sites et qui seront affichées dans tous les outils Google. Chacune des Core Web Vitals représente une facette distincte de l'expérience utilisateur, est mesurable sur le terrain et reflète l'expérience réelle d'un résultat essentiel centré sur l'utilisateur.

Les indicateurs qui composent les Core Web Vitals évolueront au fil du temps. L'ensemble actuel depuis 2020 se concentre sur trois aspects de l'expérience utilisateur - le chargement (LCP - Largest Contentful Paint), l'interactivité (FID - First Input Delay) et la stabilité visuelle (CLS - Cumulative Layout Shift) - et comprend les mesures suivantes (et leurs seuils respectifs)

La réactivité, c'est-à-dire la vitesse à laquelle une page répond aux entrées de l'utilisateur, est cruciale pour l'expérience utilisateur. 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. C'est ce que mesure l'INP, et cela englobe l'ensemble du cycle de vie d'une page.

Lorsque la réactivité est bonne, les pages répondent rapidement aux interactions qu'elles suscitent. Lorsqu'une application réagit aux interactions, les changements qui en résultent dans l'interface utilisateur constituent un retour visuel. Le retour visuel est ce qui nous indique si, par exemple, un produit que nous avons ajouté au panier d'un site e-commerce est effectivement ajouté, si le contenu d'un formulaire de connexion est authentifié par le serveur, si un menu mobile s'est ouvert, etc.

Dans la vidéo suivante, l'exemple de droite donne un retour visuel immédiat qu'une image est en train d'être récupérée sur le réseau. Ce retour visuel souligne l'importance de communiquer le résultat d'une interaction.

Représentation visuelle d'une réactivité bonne ou mauvaise lorsqu'une image en taille réelle est chargée à partir d'une galerie de vignettes. À gauche, la réactivité est faible car l'image doit être téléchargée avant d'être affichée, ce qui implique un délai considérable. À droite, la réactivité est bonne car un indicateur de chargement apparaît immédiatement après la demande de l'image, et l'image demandée finit par la remplacer.

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

INP est une métrique qui vise à représenter la latence d'interaction globale d'une page en sélectionnant l'une des interactions les plus longues qui se produisent lorsqu'un utilisateur visite une page. Pour les pages comportant moins de 50 interactions au total, INP est l'interaction présentant la plus mauvaise latence. Pour les pages comportant de nombreuses interactions, INP correspond le plus souvent au 98e percentile de la latence d'interaction.

Pour plus d'informations sur la raison pour laquelle l'interaction la plus longue n'est pas sélectionnée pour chaque page, lisez le chapitre "Pourquoi pas la pire latence d'interaction ?" expliqué en détails dans la suite de ce document.

Une interaction est un ensemble d'événements d'entrée connexes qui se déclenchent au cours du même geste logique de l'utilisateur. Par exemple, les interactions de type "tapotement" sur un dispositif à é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 de 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 après l'exécution de tous les gestionnaires d'événements associés. La durée 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.

Pour plus d'informations sur la manière exacte dont l'INP est mesuré, lisez le chapitre "Qu'est-ce qu'une interaction ?" expliqué en détails dans la suite de ce document.

Quel est le bon score pour INP ?

Il est difficile d'attribuer des étiquettes telles que "bon" ou "mauvais" à une mesure de réactivité. D'une part, vous voulez encourager le développement d'expériences utilisateur qui offrent une bonne réactivité. D'autre part, vous devez tenir compte du fait que les capacités des appareils utilisés varient considérablement, et fixer des attentes réalisables en choisissant un objectif qui n'est pas impossible à atteindre sur les appareils bas de gamme.

En gardant cela à l'esprit, il est important qu'une métrique de réactivité soit appropriée pour de larges cas d'utilisation. Pour s'assurer que vous atteignez cet objectif, un bon seuil à mesurer au 75e percentile des chargements de pages enregistrés sur le terrain, segmenté entre les appareils mobiles et de bureau :

  • 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.

 Un diagramme des seuils de l'INP. Un INP égal ou inférieur à 200 millisecondes est considéré comme bon. Entre 200 et 500 millisecondes, la réactivité de la page doit être améliorée. Tout ce qui est supérieur à 500 millisecondes signifie que la réactivité de la page est mauvaise.Un diagramme des seuils de l'INP. Un INP égal ou inférieur à 200 millisecondes est considéré comme bon. Entre 200 et 500 millisecondes, la réactivité de la page doit être améliorée. Tout ce qui est supérieur à 500 millisecondes signifie que la réactivité de la page est mauvaise.

Qu'y a-t-il dans une interaction ?

 Les phases d'une seule interaction. Le délai d'entrée se produit à partir du moment où une entrée est reçue, et peut être causé par des facteurs tels que le blocage de tâches sur le thread principal. Le délai de traitement est le temps nécessaire à l'exécution des gestionnaires d'événements de l'interaction. Lorsque l'exécution est terminée, nous entrons alors dans le délai de présentation, qui est le temps nécessaire au rendu et à la peinture du cadre suivante.Les phases d'une seule interaction. Le délai d'entrée se produit à partir du moment où une entrée est reçue, et peut être causé par des facteurs tels que le blocage de tâches sur le thread principal. Le délai de traitement est le temps nécessaire à l'exécution des gestionnaires d'événements de l'interaction. Lorsque l'exécution est terminée, nous entrons alors dans le délai de présentation, qui est le temps nécessaire au rendu et à la peinture du cadre suivante.

Lorsqu'une interaction est réalisée avec une page, le moteur de cette interactivité est souvent le JavaScript - bien que les navigateurs fournissent une interactivité par le biais de contrôles non alimentés par JavaScript, tels que les cases à cocher, les boutons radio, l'élément HTML <details>, etc. En ce qui concerne 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.

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 tapotement contiennent les événements pointerup et pointerdown. Tous les événements d'une interaction font partie de ce que l'on appelle une interaction utilisateur logique.

Vous vous souviendrez 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. L'événement dont la durée est la plus longue dans l'interaction logique de l'utilisateur est enregistré.

Représentation d'une interaction plus complexe. La première partie de l'interaction reçoit une entrée lorsque l'utilisateur clique sur un bouton de la souris. Cependant, avant qu'il ne relâche le bouton de la souris, une image est rendue et présentée. Lorsque l'utilisateur relâche le bouton de la souris, une autre série de phases de délai d'entrée, de temps de traitement et de délai de présentation doit se produire avant que le cadre suivant ne soit peint. La plus longue des deux est ce qui est enregistré comme la latence de l'interaction.Représentation d'une interaction plus complexe. La première partie de l'interaction reçoit une entrée lorsque l'utilisateur clique sur un bouton de la souris. Cependant, avant qu'il ne relâche le bouton de la souris, une image est rendue et présentée. Lorsque l'utilisateur relâche le bouton de la souris, une autre série de phases de délai d'entrée, de temps de traitement et de délai de présentation doit se produire avant que le cadre suivant ne soit peint. La plus longue des deux est ce qui est enregistré comme la latence de l'interaction.

Comme pour CLS, INP est calculé lorsque l'utilisateur quitte la page, ce qui donne une valeur unique représentative de la réactivité globale de la page tout au long de son cycle de vie. Si les interactions des pages de percentile élevé sont traitées rapidement, cela signifie que les interactions de tous les percentiles inférieurs sont également rapides.

Pourquoi pas la pire latence d'interaction ? 

Pour les pages avec relativement peu d'interactions, la pire interaction peut être utilisée. Cependant, toutes les pages Web ne sont pas identiques. Certaines requièrent plus d'interactivité que d'autres - par exemple, un éditeur de texte ou une application de jeu vidéo par rapport à un blog ou un site d'information.

Pour les pages comportant un nombre très élevé d'interactions, l'échantillonnage de la pire interaction peut être trompeur. Des hoquets occasionnels se produisent même sur les sites Web qui privilégient la réactivité, et ces interactions doivent être négligées.

En se concentrant sur un percentile élevé - mais pas le plus élevé dans tous les cas - il est possible d'évaluer équitablement si la grande majorité des interactions d'une page sont traitées en temps voulu. Si vous souhaitez voir comment le nombre d'interactions affecte le percentile de latence d'interaction choisi, vous pouvez regarder ci-dessous comment cela fonctionne.

  • 1-49

    La plus grande interaction

  • 50-99

    2ème plus grande interaction

  • 100-149

    3ème plus grande interaction

  • 150-199

    4ème plus grande interaction

  • 200-249

    5ème plus grande interaction

  • 250-299

    6ème plus grande interaction

  • 300-349

    7ème plus grande interaction

  • 350-399

    8ème plus grande interaction

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

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

Étant donné que le FID est également une mesure de la réactivité au chargement, le raisonnement qui sous-tend cette mesure est que si la première interaction avec une page pendant la phase de chargement ne présente que 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. Elle 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. Cela fait de l'INP un indicateur de réactivité plus fiable que le FID.

Il est préférable de considérer l'INP comme similaire au Cumulative Layout Shift (CLS) dans la mesure où il s'agit d'une mesure qui change et s'actualise continuellement tout au long du cycle de vie de la page. Comme avec CLS, vous ne voulez pas enregistrer une valeur INP avant que l'utilisateur ne quitte la page.

Et si un utilisateur n'interagit jamais avec la page ?

Il arrive qu'une page soit chargée, mais qu'elle ne soit pas utilisée. Cela peut se produire pour un certain nombre de raisons :

  • Il est possible que quelqu'un ait chargé une page, mais qu'il ait été distrait et ne l'ait jamais utilisée.
  • Quelqu'un a chargé la page, l'a fait défiler (ce qui n'est pas une interaction prise en compte par l'INP), mais n'a jamais cliqué, tapé ou appuyé sur une touche de son clavier. La partie utile de la page que l'utilisateur recherchait n'a peut-être nécessité aucune interaction pour être atteinte.
  • La page est accessible par un robot (par exemple, un robot de recherche ou un navigateur sans entête) qui n'a pas été programmé pour interagir avec la page.

Dans de tels cas, aucune valeur INP ne sera rapportée.

Comment mesurer l'INP ?

L'INP peut être mesuré à la fois sur le terrain et en laboratoire (avec un certain effort) à l'aide de divers outils.

Outils de terrain

Outils de Laboratoire

Comment améliorer les valeurs INP

Si votre site Web affiche des valeurs INP qui se situent en dehors du seuil "bon", vous voudrez naturellement déterminer ce que vous pouvez faire pour améliorer ces valeurs. Des valeurs INP élevées sont généralement le signe d'une forte dépendance à JavaScript, ou à d'autres tâches non JavaScript du fil principal qui peuvent s'exécuter en même temps que les interactions de 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, car les utilisateurs peuvent tenter d'interagir avec une page pendant qu'elle récupère le JavaScript pour mettre en place les gestionnaires d'événements qui fournissent l'interactivité nécessaire au fonctionnement de la page.

Selon HTTP Archive, le temps de blocage total (TBT) est deux fois plus corrélé avec l'INP qu'avec le FID. Le TBT est une mesure de laboratoire, mais si vous observez des valeurs TBT élevées dans les outils de laboratoire, cela peut être un signal que des valeurs INP plus élevées seront observées sur le terrain.

Pour améliorer la réactivité lors du chargement des pages, envisagez les solutions suivantes :

  • Supprimez le code inutilisé à l'aide de l'outil de couverture dans les outils de développement de Chrome.
  • Trouvez des possibilités de fractionnement du code afin de charger en décalé le JavaScript non nécessaire pendant le chargement de la page (Lazy Load). L'outil de couverture peut vous y aider.
  • Identifiez le JavaScript tiers lent que vous chargez peut-être au démarrage.
  • Utilisez le profileur de performance pour trouver les tâches longues que vous pouvez optimiser.
  • Veillez à ne pas trop solliciter le rendu du navigateur une fois que votre JavaScript est terminé, c'est-à-dire le re-rendu d'un grand arbre de composants, le décodage de grandes images, trop d'effets css lourds, 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 de la page, il est possible que l'INP de votre site soit influencé par ce qui se passe après le démarrage de la page. Si tel est le cas pour votre site Web, voici quelques pistes de solution :

  • Utilisez l'API postTask pour hiérarchiser les tâches de manière appropriée.
  • Planifiez les tâches non essentielles lorsque le navigateur est inactif avec requestIdleCallback.
  • Utilisez le profileur de performances pour évaluer les interactions discrètes (par exemple, le basculement d'un menu de navigation mobile) et trouver des tâches longues à optimiser.
  • Vérifiez le JavaScript tiers dans votre site Web pour voir s'il affecte la réactivité de la page.

Les CHANGELOG

Aucune modification n'a été apportée à cette métrique depuis sa livraison. Si des changements surviennent, ils seront notés dans ce CHANGELOG.

core web vitals guide seo complet pour des temps de chargement plus courts de vos pages

L'optimisation de la qualité de l'expérience utilisateur est la clé du succès à long terme. Nous le savons et vous le savez également si vous êtes arrivés jusqu'ici. Heureusement pour nous, Web Vitals va nous aider à quantifier l'UX et à identifier les améliorations.

Les impacts Web Vitals sont tellement importants pour nos actions de référencement que toute l'équipe Agerix s'est penché sérieusement sur la question et a rédigé un ensemble d'articles détaillées sur Web Vitals et Core Web Vitals à partir de sources de référence et de recherches internes.

L'INP étant une métrique expérimentale, les conseils relatifs aux seuils peuvent changer au fil du temps, à mesure que la métrique est affinée. L'article que vous venez de lire est parti d'une traduction libre de l'article "Interaction to Next Paint (INP)" de Jeremy Wagner. Nous avons ensuite ajouté des éléments de notre propre veille et continuerons à mettre à jour cet article ainsi que l'ensemble des articles du dossier "Web Vitals de Google"

Article mis à jour le 27 mai 2022

Vous souhaitez créer
votre site web ?

L'agence Agerix étudie votre besoin et vous établi sous 48 heures un devis personnalisé et adapté.
 

Découvrez
notre dossier complet
sur les Core Web Vitals

Découvrez le dossier complet de notre agence sur les Core Web Vitals

Eric Lamy
Bio rapide : Après avoir passé plus de 20 ans dans le marketing et l'optimisation de Système d'Information, j'ai créé l'agence Agerix en 2009 afin d'avoir une approche des projets tout aussi commerciale que technique. Fouiller, creuser, réfléchir et amener le projet au plus haut niveau qualité, c'est le Leitmotiv de notre bureau d'études et l'ADN que nous insufflons chaque jour dans nos projets. Que ce soit pour nos développements, nos projets d'intégration, ou même l'article que vous venez de lire, notre but est de livrer le meilleur.

Vous souhaitez créer
votre site web ?

L'agence Agerix étudie votre besoin et vous établi sous 48 heures un devis personnalisé et adapté.
 

Suivez les lives sur agerix.fr

Nous vous donnons rendez-vous avec les directs de l'agence Agerix.
Pour ne pas rater d'infos et participer aux débats d'idées, inscrivez-vous maintenant sur notre liste de diffusion.

Genre


Agerix : Agence digitale Gauloise
4 rue Jean Moulin 33310 Lormont, France , Tel:+33 5 35 54 92 03 , Fax:+33 9 72 14 74 74 , E-mail: contact(at)agerix.fr
Confidentiel Agence Agerix ©2021 S.A.R.L au capital de 8500 euros. RCS Bordeaux 812 619 062.
A.P.E 6202A N° identification T.V.A FR42812619062