Les Core Web Vitals de Google subissent actuellement des changements majeurs. Cet ensemble de métriques, initialement introduit en 2021 pour évaluer l’expérience utilisateur, fait l’objet de la mise à jour la plus significative depuis son lancement.
Plus précisément, Google remplace le First Input Delay (FID) par l’Interaction to Next Paint (INP) en mars 2024.
Alors, qu’est-ce que l’Interaction to Next Paint, comment se compare-t-elle au FID, et comment pouvez-vous l’améliorer ? Dans ce billet, je vais tout vous expliquer.
Si vous souhaitez améliorer l’expérience utilisateur de votre site, commençons.
Qu’est-ce que l’Interaction to Next Paint (INP) ?
Si vous vous demandez ce que signifie « INP », vous n’êtes probablement pas le seul. Commençons par définir précisément ce que représente cette nouvelle métrique et comment elle fonctionne.
L’Interaction to Next Paint (INP) est une mesure de la réactivité de Google qui évalue la rapidité avec laquelle votre page répond aux interactions humaines. Concrètement, elle mesure le temps écoulé entre l’interaction d’un utilisateur (comme un clic sur un bouton, par exemple) et le rafraîchissement du contenu de la page.
Ou, pour utiliser la définition de Google :
« INP évalue la réactivité en utilisant les données de l’Event Timing API. Lorsqu’une interaction rend une page non réactive, cela se traduit par une mauvaise expérience utilisateur. INP analyse la latence de toutes les interactions effectuées par l’utilisateur sur la page, et rapporte une seule valeur à laquelle la plupart, voire toutes, des interactions étaient inférieures. Un faible score INP signifie que la page a été en mesure de répondre rapidement à la quasi-totalité des interactions de l’utilisateur. »
Google reconnaît que certaines interactions prendront plus de temps à se charger que d’autres, en particulier celles qui sont complexes. Cependant, cela ne doit pas nécessairement entraîner une mauvaise expérience utilisateur. Ainsi, l’INP ne mesure pas le temps de réponse de l’ensemble de l’interaction, mais plutôt le temps de réponse jusqu’à ce que votre site affiche une forme de rétroaction visuelle (comme l’affichage d’un menu déroulant ou d’un indicateur de chargement, par exemple). Il n’est pas nécessaire de terminer complètement l’interaction, il suffit de prouver que le processus est en cours.
Il est essentiel que chaque site web obtienne un bon score INP, mais cela revêt une importance particulière pour les sites interactifs tels que les plateformes de médias sociaux et les boutiques en ligne. Un faible score INP entraîne une expérience utilisateur médiocre, ce qui peut se traduire par un taux de rebond plus élevé et, à terme, une perte de revenus.
Définir les Interactions
Afin de comprendre le fonctionnement de l’INP et de le mesurer correctement, il est essentiel de comprendre ce que signifie une « interaction ».
Google définit une interaction comme un ensemble d’événements se produisant lors d’un « geste logique de l’utilisateur ».
En d’autres termes, il ne s’agit pas simplement d’un événement unique. Par exemple, appuyer sur un bouton sur un appareil à écran tactile peut impliquer plusieurs événements, tels que pointerup (lorsque la souris n’est pas active) et pointerdown (lorsqu’une souris clique sur un bouton), tous regroupés en un seul. Google considère l’événement ayant la plus longue durée comme la latence de l’interaction. En ce qui concerne la mesure de l’INP, Google ne prend en compte que les interactions suivantes :
- Clic avec une souris
- Appui sur un écran tactile
- Appui sur une touche de clavier
Google mesure trois composants pour établir un score INP : le délai d’entrée (input delay), le temps de traitement (processing time) et le délai de présentation (presentation delay).
Le délai d’entrée correspond au temps écoulé entre le moment où un utilisateur clique sur un bouton et le moment où il obtient une réponse visuelle du bouton. Cela peut prendre de quelques millisecondes à une centaine de millisecondes, selon la quantité de code exécutée par votre site web.
Le temps de traitement est la durée nécessaire pour exécuter le code en réponse à l’interaction d’un utilisateur. Cette durée peut être de l’ordre des millisecondes si seules de petites modifications sont apportées.
Le délai de présentation représente le temps que votre navigateur passe à déterminer où le nouveau contenu doit apparaître. Cette durée peut varier considérablement en fonction de la complexité de votre site web.
Comparaison entre FID et INP
Au cas où vous auriez manqué l’information dans l’introduction, l’Interaction to Next Paint (INP) remplace le First Input Delay (FID).
Le FID mesure également la réactivité de votre site, mais il se concentre uniquement sur la toute première interaction de l’utilisateur et ne mesure que le délai jusqu’à ce que l’événement soit traité, pas jusqu’à ce que l’utilisateur voie les résultats.
Cela diffère de l’Interaction to Next Paint, qui mesure le délai de chaque interaction qu’un utilisateur a avec une page.
Quel est un bon score INP ?
Google fournit des indications pour définir un bon score INP.
Tout d’abord, Google reconnaît qu’il est difficile de définir la réactivité comme bonne ou mauvaise en raison de la variabilité des capacités des appareils des utilisateurs. C’est pourquoi ils recommandent de prendre le 75e percentile des chargements de page sur les appareils mobiles et de bureau comme référence.
En ce qui concerne les délais :
Si votre INP est égal ou inférieur à 200 millisecondes, votre page présente une bonne réactivité.
Si l’INP se situe entre 200 et 500 millisecondes, la réactivité de votre page nécessite des améliorations.
Si l’INP dépasse 500 millisecondes, votre page a une réactivité médiocre.
Pourquoi Google adopte-t-il l’INP ?
L’INP remplacera le FID en tant que l’une des trois principales métriques des Core Web Vitals de Google en mars 2024. Les deux autres métriques sont le Largest Contentful Paint (mesurant la vitesse à laquelle le contenu principal d’une page apparaît) et le Cumulative Layout Shift (mesurant la stabilité de la mise en page de la page après son chargement).
Google affirme que les données d’utilisation de Chrome montrent que la grande majorité (90 %) du temps passé par un utilisateur sur une page intervient après son chargement. Cela signifie qu’il n’est pas suffisant de mesurer le retard jusqu’au premier événement sur une page (FID) ; nous devons mesurer le retard pour chaque interaction effectuée (INP).
En résumé, le FID n’était pas très efficace pour identifier les mauvaises expériences utilisateur car il ne mesurait plus les retards.
Comment optimiser l’INP
Étant donné l’importance des Core Web Vitals pour l’expérience utilisateur et le référencement, il est crucial de mesurer et d’améliorer l’INP de votre site. Voici la méthode que je recommande :
Mesurer votre INP
La première étape pour optimiser l’INP consiste à mesurer les performances de votre site. Il est préférable de le faire sur le terrain, en utilisant les données réelles des visiteurs du site. L’utilisation de données terrain ne vous donnera pas seulement une mesure de votre INP ; elle fournira également des informations contextuelles sur quelle interaction a été responsable du retard.
Le Chrome UX Report est l’un des moyens les plus rapides et les plus simples d’obtenir des données terrain, à condition que votre site soit admissible. Sinon, vous pouvez utiliser un fournisseur de surveillance des utilisateurs réels (RUM) comme Pingdom ou Raygun pour générer des données terrain.
Si vous n’avez pas le temps ou le budget pour collecter des données terrain, je vous recommande d’utiliser l’outil PageSpeed Insights. L’avantage de PageSpeed Insights est qu’il utilise les données terrain collectées par Google et les données Lab pour mesurer votre INP.
Optimisation des Interactions
Comme je l’ai expliqué précédemment, chaque interaction peut être décomposée en trois étapes distinctes :
Le délai d’entrée (input delay)
Le temps de traitement (processing time)
Le délai de présentation (presentation delay)
Puisque chaque étape d’une interaction contribue au retard, vous pouvez optimiser votre INP en réduisant le traitement CPU requis à chaque étape.
Optimisation du Délai d’Entrée
Il existe quelques stratégies que vous pouvez utiliser pour réduire le temps nécessaire à l’enregistrement d’une entrée.
La première consiste à optimiser JavaScript. Une exécution lente de JavaScript peut entraîner des retards d’entrée, mais vous pouvez remédier à cela en minimisant les fichiers JavaScript, en activant la compression GZip, en utilisant un framework JavaScript tel que jQuery et en utilisant un Réseau de Diffusion de Contenu (CDN) pour livrer les fichiers JavaScript depuis un serveur plus proche de votre public.
La deuxième stratégie consiste à minimiser l’activité du thread. Lorsqu’il y a beaucoup d’activité sur votre page (images, vidéos, etc.), cela peut retarder la réactivité de l’entrée. Cependant, vous pouvez utiliser un worker web pour fonctionner indépendamment en dehors du thread principal de votre site.
Éviter le chevauchement des interactions est une autre stratégie pour réduire le retard de l’entrée. Le chevauchement des interactions se produit lorsqu’un visiteur interagit avec un élément, puis avec un autre élément avant que l’interaction initiale n’ait été rendue. C’est un phénomène courant lorsque les utilisateurs tapent dans des champs de formulaire alimentés par une fonction d’autosuggestion.
Résolvez ce problème en limitant les entrées de manière à réduire les rappels (callbacks) et en utilisant AbortController pour annuler les requêtes d’envoi sortantes.
Optimisation du Temps de Traitement
Vous pouvez optimiser le temps de traitement de vos interactions en veillant à ce que les rappels d’événements (les processus qui s’exécutent en réponse à une entrée utilisateur) effectuent le moins de travail possible. Dans la mesure du possible, supprimez complètement les rappels d’événements inutiles.
Lorsque les rappels sont nécessaires, répartissez le travail impliqué en tâches distinctes et assurez-vous que seuls les processus essentiels nécessaires aux mises à jour visuelles sont exécutés en premier. La meilleure façon de faire cela est d’utiliser setTimeout pour exécuter les rappels dans une tâche distincte. Si vous n’êtes pas sûr de la manière de le faire en pratique, Google propose un guide détaillé sur l’optimisation des tâches longues.
Optimisation du Délai de Présentation
Réduire la taille du DOM est un moyen efficace d’accélérer la vitesse de présentation. Le DOM ou Modèle d’Objet de Document connecte les pages web aux scripts et langages de programmation. Lorsque la taille du DOM est petite, les événements sont rapides à rendre. En revanche, lorsque la taille du DOM est grande, le rendu prend beaucoup plus de temps.
Vous pouvez réduire la taille du DOM de plusieurs manières :
- Supprimez le code et les plugins superflus.
- Évitez d’utiliser des constructeurs de pages.
- Transformez un site web d’une seule page en plusieurs pages.
- Évitez les déclarations CSS complexes.
L’objectif est d’avoir une profondeur du DOM d’au plus 1400 nœuds.
Questions fréquentes sur l’INP
Comment optimiser l’INP ?
L’optimisation de l’Interaction to Next Paint (INP) implique de réduire le délai d’entrée, le temps de traitement ou le délai de présentation de l’interaction. Cela peut être réalisé en minimisant et en optimisant les fichiers JavaScript, en réduisant la taille du DOM et en ajoutant des indices de rétroaction immédiate.
Où trouver les métriques de l’INP ?
Étant donné que l’Interaction to Next Paint (INP) fera bientôt partie des Core Web Vitals, vous pouvez trouver des métriques pertinentes en utilisant l’outil PageSpeed Insights de Google. Il vous suffit d’entrer l’URL de votre site et vous obtiendrez un temps en millisecondes qui représente votre INP.
Quel est un bon score d’INP ?
Selon Google, un bon score d’INP est égal ou inférieur à 200 millisecondes. Tout score entre 200 et 500 millisecondes nécessite des améliorations, tandis qu’un score supérieur à 500 millisecondes est considéré comme médiocre.
Conclusion
L’Interaction to Next Paint (INP) est une métrique imminente des Core Web Vitals qui remplacera le First Interaction Delay (FID) en 2024. Elle mesure le temps qu’il faut à votre site pour répondre à une interaction utilisateur. Plus le retard est faible, meilleures sont vos performances.
Étant donné que les Core Web Vitals font partie de l’algorithme de classement de Google, je vous recommande vivement d’optimiser votre INP en réduisant le traitement CPU sur votre site à l’aide des stratégies que j’ai mentionnées précédemment.
Source (inspiré et traduit) : https://neilpatel.com