Dans une publication récente, Brian Harnish fait le point sur Interaction to Next Paint (INP), nouvelle métrique des Core Web Vitals qui permet d’évaluer le délai d’interaction global tout au long du parcours de l’utilisateur. De quoi s’agit-il ? Comment la mesurer et l’améliorer ?
Interaction to Next Paint (INP) : quelques rappels
Pour rappel, INP a été introduit par Google pour remplacer FID (First Input Delay). Contrairement à FID qui ne prenait en compte que la première interaction sur la page, INP prend en compte toutes les interactions et mesure le temps dont les navigateurs ont besoin pour les traiter.
De quelles interactions parle-t-on ?
- D'un clic de souris sur un élément interactif
- De la pression sur un élément interactif sur un appareil doté d’un écran tactile
- De la pression d’une touche de clavier physique ou sur un écran
Métrique INP : valeurs et mesure
Pour aider les administrateurs de sites et les SEO, Google a fixé des seuils de valeur ;
- Une bonne valeur INP se situe aux alentours de 200 millisecondes ou moins.
- Une valeur située entre 200 et 500 millisecondes peut faire l’objet d’une amélioration.
- Au-dessus de 500 millisecondes, Google considère la réactivité comme étant mauvaise.
La méthode de calcul de la métrique INP
La métrique INP est mesurée par Chrome de façon anonyme à partir d’un échantillon des interactions les plus longues qui se produisent lorsqu’un internaute visite une page.
Chaque interaction comporte plusieurs phases :
- Temps de présentation
- Temps de traitement
- Délai de saisie
Google prend en considération le temps d’exécution des trois phases. Si une page à moins de 50 interaction au total, la métrique prend en compte l’interaction avec le pire délai absolu. En revanche, s’il y a plus de 50 interactions, elle ignore les plus longues interactions par tranche de 50 interactions.
Quand un internaute quitte la page, ces mesures sont envoyées au rapport au Chrome User Experience Report (CrUX), qui regroupe les données de performances pour fournir un aperçu des expériences utilisateur réelles ou « données de terrain ».
Que faire en cas de valeur INP élevée ?
Brian Harnish liste quelques raisons qui peuvent expliquer une valeur INP trop élevée :
- Des tâches trop longues qui retardent les interactions
- Des écouteurs d’événements synchrones sur les événements de clics
- Des modifications apportées au DOM qui provoquent plusieurs reflows et repaints
L’une des pistes évoquées pour résoudre les problèmes rencontrés est de s’appuyer sur le rapport « Performance » du navigateur Chrome ou, mieux, de sa version Canary destinée aux développeurs.
Après avoir accédé à la page à analyser :
- Ouvrez DevTools sur Canary et accédez à l’onglet Performance
- Désactivez le cache via l’onglet Network
- Choisissez l’émulateur mobile en réduisant le processeur par 4 pour stimuler un réseau 4G (utilisé par 90 % des appareils à l’extérieur)
- Cliquez sur le bouton enregistrer et interagissez avec les éléments de la page comme un utilisateur normal
- Stoppez enfin l’enregistrement après avoir capturé l’interaction à analyser
Comme le note Brian Harnish, il est important de simuler une utilisation réelle de la page, car il n’est pas forcément possible de se rendre compte des problèmes en navigant sur un ordinateur puissant.
Voici le processus en vidéo :
Une fois l’enregistrement stoppé, le navigateur fournit un rapport où vous pouvez notamment identifier les tâches entraînant les interactions les plus longues, accompagnées des fichiers JavaScript en lien avec ces tâches. En-dessous de la chronologie des tâches se trouvent d’autres informations intéressantes, dont des informations relatives aux scripts.
Évaluation du script et temps total de blocage
Étape cruciale pour l’exécution de JavaScript, l’évaluation de script correspond au moment où le navigateur exécute le code ligne par ligne, avec attribution de valeurs aux variables, définition de fonctions et enregistrement des écouteurs d’événements.
Les internautes peuvent interagir avec une page partiellement rendue alors que les fichiers JavaScript sont en encore en phase de chargement, d’analyse, de compilation ou d’évaluation.
Lorsqu’ils interagissent avec un élément pendant que le navigateur est en train d’évaluer un script contenant un écouteur d’événement attaché à l’interaction en question, ce dernier peut retarder l’interaction jusqu’à ce que l’évaluation du script soit terminée.
Le temps total de blocage (TBT) mesure la durée totale pendant laquelle les tâches longue (de plus de 50 ms) bloquent le thread principal jusqu’à ce que la page devienne interactive. Si ce délai est long et que les internautes cherchent à interagir rapidement au moment de l’affichage de la page, le navigateur risque de ne pas être en mesure de répondre rapidement à l’interaction. Même si le TBT ne fait pas partie des Core Web Vitals, il est souvent associé à un INP élevé. Il est donc judicieux de le réduire.
Les JavaScripts courants qui provoquent un TBT élevé
Brian Harnish dresse la liste des JavaScripts courants qui ont tendance à provoquer un TBT élevé :
- Scripts d’analyse (par exemple. Google Analytics 4)
- Pixels de suivi
- Recaptcha Google
- Publicités AdSense
Pour réduire le TBT, la stratégie à adopter est donc de retarder les scripts non essentiels jusqu’à ce que le chargement du contenu principal de la page soit terminé. Il est par ailleurs important de prioriser les scripts qui ont un impact sur l’expérience utilisateur.
Pour conclure, l’auteur nous rappelle que l’amélioration de métrique INP n’est pas une solution miracle pour un référencement réussi. Aussi important soit-il, il s’agit d’un élément parmi d’autres qui doit s’inscrire dans une stratégie globale incluant notamment une optimisation des contenus, des backlinks de haute qualité, l'utilisation de données structurées, une structure de site soignée ou encore la correction des erreurs d’exploration.
- Interaction To Next Paint (INP): Everything You Need To Know (SEJ), 19/07/2024
Articles complémentaires :
La métrique INP arrive enfin dans les Core Web Vitals
Google dévoile un tutoriel pour identifier et résoudre les problèmes d’INP
Le critère INP entre dans les Core Web Vitals de Google
