Tout ce que tu as besoin de savoir

Le domaine du référencement ne manque pas d’acronymes.

Du SEO au FID en passant par l'INP, voici quelques-uns des éléments les plus courants que vous rencontrerez en matière de vitesse de page.

Une nouvelle mesure fait son apparition : INP, qui signifie Interaction to Next Paint. Elle fait référence à la façon dont la page réagit à des interactions utilisateur spécifiques et est mesurée par les données de laboratoire et de terrain de Google Chrome.

Qu'est-ce que l'interaction avec la prochaine peinture exactement ?

L'interaction avec Next Paint, ou INP, est une nouvelle mesure Core Web Vitals conçue pour représenter le délai d'interaction global d'une page tout au long du parcours utilisateur.

Par exemple, lorsque vous cliquez sur le Ajouter au panier bouton sur une page produit, il mesure le temps nécessaire à la mise à jour de l'état visuel du bouton, comme le changement de couleur du bouton lors d'un clic.

Si vous avez des scripts lourds en cours d'exécution qui prennent beaucoup de temps à se terminer, ils peuvent provoquer le blocage temporaire de la page, ce qui a un impact négatif sur la métrique INP.

Voici l'exemple vidéo illustrant à quoi ça ressemble dans la vraie vie :

Remarquez comment le premier bouton répond visuellement instantanément, alors qu’il faut quelques secondes au deuxième bouton pour mettre à jour son état visuel.

En quoi l'INP est-il différent du FID ?

La principale différence entre INP et First Input Delay, ou FID, est que le FID ne prend en compte que la première interaction sur la page. Il mesure uniquement la métrique du délai d'entrée et ne prend pas en compte le temps nécessaire au navigateur pour répondre à l'interaction.

En revanche, l'INP prend en compte toutes les interactions entre les pages et mesure le temps nécessaire aux navigateurs pour les traiter. L'INP prend cependant en compte les types d'interactions suivants :

• Tout clic de souris sur un élément interactif.
• Tout appui sur un élément interactif sur n’importe quel appareil comprenant un écran tactile.
• La pression d'une touche sur un clavier physique ou à l'écran.

Quelle est une bonne valeur INP ?

Selon Google, une bonne valeur INP se situe autour de 200 millisecondes ou moins. Elle présente les seuils suivants :

Google note également que l'INP est encore expérimental et que les conseils qu'il recommande concernant cette mesure sont susceptibles de changer.

Comment l'INP est-il mesuré ?

Google mesure l'INP des navigateurs Chrome de manière anonyme à partir d'un échantillon des interactions les plus longues qui se produisent lorsqu'un utilisateur visite la page.

Chaque interaction comporte plusieurs phases : temps de présentation, temps de traitement et délai de saisie. Le rappel des événements associés contient le temps total nécessaire à l'exécution des trois phases.

Si une page a moins de 50 interactions au total, INP considère l'interaction avec le délai absolu le plus long ; si elle a plus de 50 interactions, il ignore les interactions les plus longues par 50 interactions.

Lorsque l'utilisateur quitte la page, ces mesures sont ensuite envoyées au rapport d'expérience utilisateur Chrome appelé CrUX, qui regroupe les données de performances pour fournir des informations sur les expériences utilisateur réelles, appelées données de terrain.

Quelles sont les raisons courantes à l’origine d’un INP élevé ?

Il est essentiel de comprendre les causes sous-jacentes des INP élevés pour optimiser les performances de votre site Web. Voici les causes les plus courantes :

• Tâches longues qui peuvent bloquer le thread principal, retardant ainsi les interactions des utilisateurs.
• Écouteurs d'événements synchrones sur les événements de clic, comme nous l'avons vu dans l'exemple vidéo ci-dessus.
• Les modifications apportées au DOM provoquent plusieurs reflows et repeintures, ce qui se produit généralement lorsque la taille du DOM est trop grande (> 1 500 éléments HTML).

Comment résoudre les problèmes INP ?

Tout d'abord, lisez notre guide sur la façon de mesurer les métriques CWV et essayez les techniques de dépannage qui y sont proposées. Mais si cela ne vous aide toujours pas à trouver les interactions qui provoquent un INP élevé, c'est là que le rapport « Performances » du navigateur Chrome (ou, mieux, Canary) peut vous aider.

• Accédez à la page Web que vous souhaitez analyser.
• Ouvrez les DevTools de votre navigateur Canary, qui ne possède pas d'extensions de navigateur (généralement en appuyant sur F12 ou Ctrl+Maj+I).
• Passer à la Performance languette.
• Désactiver le cache du Réseau languette.
• Choisissez un émulateur mobile.
• Clique le Enregistrer bouton et interagissez avec les éléments de la page comme vous le feriez normalement.
• Arrêtez l’enregistrement une fois que vous avez capturé l’interaction qui vous intéresse.

Réduisez la vitesse du processeur de 4x à l'aide du menu déroulant « ralentissement » pour simuler des appareils mobiles moyens et choisissez un réseau 4G, qui est utilisé dans 90 % des appareils mobiles lorsque les utilisateurs sont à l'extérieur. Si vous ne modifiez pas ce paramètre, vous exécuterez votre simulation en utilisant le puissant processeur de votre PC, ce qui n'est pas équivalent aux appareils mobiles.

Il s'agit d'une nuance très importante puisque Google utilise des données de terrain collectées à partir des appareils des utilisateurs réels. Vous ne rencontrerez peut-être pas de problèmes INP avec un appareil puissant – c'est un point délicat qui rend difficile le débogage de l'INP. En choisissant ces paramètres, vous rapprochez l'état de votre émulateur le plus possible de l'état de l'appareil réel.

Voici un guide vidéo qui montre l'ensemble du processus. Je vous recommande vivement de l'essayer pendant que vous lisez l'article pour acquérir de l'expérience.

Ce que nous avons repéré dans la vidéo, c'est que les tâches longues entraînent une interaction plus longue et une liste de fichiers JavaScript responsables de ces tâches.

Si vous développez le Interactions section, vous pouvez voir une répartition détaillée de la longue tâche associée à cette interaction, et en cliquant sur ces URL de script, vous ouvrirez les lignes de code JavaScript responsables du retard, que vous pouvez utiliser pour optimiser votre code.

Une interaction totale d'une durée de 321 ms se compose de :

• Délai d'entrée : 207 ms.
• Durée de traitement : 102 ms.
• Délai de présentation : 12 ms.

Ci-dessous, dans la chronologie du fil principal, vous verrez une longue barre rouge représentant la durée totale de la tâche longue.

Sous la longue barre des tâches rouge, vous pouvez voir une barre jaune intitulée « Évaluer le script », indiquant que la longue tâche a été principalement causée par l’exécution de JavaScript.

Dans la première capture d'écran, la distance temporelle entre (point 1) et (point 2) est un retard causé par une longue tâche rouge en raison de l'évaluation du script.

Qu’est-ce que l’évaluation de script ?

L'évaluation du script est une étape nécessaire à l'exécution de JavaScript. Au cours de cette étape cruciale, le navigateur exécute le code ligne par ligne, ce qui comprend l'attribution de valeurs aux variables, la définition de fonctions et l'enregistrement d'écouteurs d'événements.

Les utilisateurs peuvent interagir avec une page partiellement rendue alors que les fichiers JavaScript sont encore en cours de chargement, d’analyse, de compilation et d’évaluation.

Lorsqu'un utilisateur interagit avec un élément (clics, appuis, etc.) et que le navigateur est en phase d'évaluation d'un script contenant un écouteur d'événements attaché à l'interaction, il peut retarder l'interaction jusqu'à ce que l'évaluation du script soit terminée.

Cela garantit que l'écouteur d'événement est correctement enregistré et peut répondre à l'interaction.

Dans la capture d'écran (point 2), le délai de 207 ms s'est probablement produit parce que le navigateur était toujours en train d'évaluer le script contenant l'écouteur d'événement pour le clic.

C'est là qu'intervient le temps de blocage total (TBT), qui mesure la durée totale pendant laquelle les tâches longues (plus de 50 ms) bloquent le thread principal jusqu'à ce que la page devienne interactive.

Si ce temps est long et que les utilisateurs interagissent avec le site Web dès que la page s’affiche, le navigateur risque de ne pas être en mesure de répondre rapidement à l’interaction de l’utilisateur.

Cela ne fait pas partie des mesures CWV mais est souvent corrélé à des INP élevés. Ainsi, afin d'optimiser la mesure INP, vous devez viser à réduire votre TBT.

Quels sont les JavaScripts courants qui provoquent un TBT élevé ?

Les scripts d'analyse, tels que Google Analytics 4, les pixels de suivi, Google Re-Captcha ou les annonces AdSense, entraînent généralement un temps d'évaluation des scripts élevé, contribuant ainsi au TBT.

Une stratégie que vous pouvez mettre en œuvre pour réduire le TBT consiste à retarder le chargement des scripts non essentiels jusqu'à ce que le contenu initial de la page ait terminé de se charger.

Un autre point important est que lorsque vous retardez l'exécution des scripts, il est essentiel de les hiérarchiser en fonction de leur impact sur l'expérience utilisateur. Les scripts critiques (par exemple, ceux essentiels aux interactions clés) doivent être chargés plus tôt que les scripts moins critiques.

Améliorer votre INP n’est pas une solution miracle

Il est important de noter que l’amélioration de votre INP n’est pas une solution miracle garantissant un succès SEO instantané.

Il s’agit plutôt d’un élément parmi tant d’autres qui peut devoir être complété dans le cadre d’un ensemble de modifications de qualité qui peuvent contribuer à faire une différence dans vos performances globales en matière de référencement.

Il s’agit notamment d’optimiser votre contenu, de créer des backlinks de haute qualité, d’améliorer les balises méta et les descriptions, d’utiliser des données structurées, d’améliorer l’architecture du site, de corriger les erreurs d’exploration et bien d’autres.

Davantage de ressources:

---