Interaction to Next Paint (INP) est une nouvelle mesure de Core Web Vitals pour mesurer la réactivité de vos pages web. Elle remplacera le First Input Delay (FID) le 12 mars 2024, après avoir été introduite en tant que mesure expérimentale en mai 2022.
Cet article est une introduction à l'INP pour les développeurs web, les spécialistes UX et tous ceux qui mesurent les aspects clés de l'expérience utilisateur. Vous apprendrez comment fonctionne l'INP, pourquoi il a remplacé le FID, quel score INP vous devriez viser et comment diagnostiquer les problèmes de votre INP.
Qu'est-ce qu'Interaction to Next Paint ?
INP est une nouvelle mesure introduite par Google dans le cadre de son initiative Core Web Vitals. Il évalue la réactivité à l'aide de données provenant de l'API Event Timing, en examinant le temps nécessaire à une page web pour répondre aux clics, aux tapotements et aux interactions au clavier. Un INP inférieur indique que votre page web répond plus rapidement à la majorité des interactions de l'utilisateur.
En quoi l'INP diffère-t-il du FID ?
First Input Delay (FID)) était l'ancienne mesure de Core Web Vitals pour mesurer la réactivité. Le passage de FID à INP donnera une idée plus précise de l'expérience des utilisateurs dans le monde réel. Voici pourquoi :
- INP prend en compte toutes les interactions d'un utilisateur avec une page, alors que la FID ne prend en compte que la première interaction.
- INP mesure le temps de chargement des scripts interactifs après le chargement initial de la page, ce que ne faisait pas FID.
- INP a plus de capacité à prendre en compte différentes applications web avec des interactions complexes.
- INP prend en compte un éventail plus large d'interactions, y compris les clics, les appuis sur l'écran tactile et les pressions sur les touches des claviers physiques et à l'écran, alors que la FID ne le faisait pas
Quels sont les changements que je constaterai ?
À partir du 12 mars 2024, vous ne verrez plus le délai de première saisie dans la Google Search Console. Les outils et les guides seront également mis à jour pour se concentrer sur l'INP, bien que la documentation historiquement importante sur le FID reste en place. Des outils tels que PageSpeed Insights et CrUX accordent aux développeurs une période de dépréciation de six mois afin qu'ils aient la possibilité de mettre à jour leur code.
Comment fonctionne Interaction to Next Paint ?
Le délai entre l'interaction et la “peinture” suivante est calculé en examinant le temps qui s'écoule entre l'interaction de l'utilisateur et le moment où un retour visuel lui est présenté. Ce délai est appelé latence.
Les interactions de l'utilisateur reconnues par INP comprennent les clics, les tapotements et les frappes de clavier. L'INP ne prend pas en compte le survol ou le défilement, bien que le défilement à l'aide de touches puisse déclencher d'autres événements qu'il mesure. Une interaction peut être pilotée par JavaScript, CSS, les contrôles intégrés du navigateur ou toute combinaison de ces éléments.
Le retour d'information visuel est important car il montre à l'utilisateur que son interaction a été réussie. Sans cela, l'utilisateur peut penser que la page ne répond pas à ses actions. Voici quelques exemples de retour d'information visuel :
- L'apparition d'un article dans le panier après avoir cliqué sur « ajouter au panier »
- Un menu de navigation s'ouvre lorsque vous appuyez dessus
- Votre nom d'utilisateur apparaît dans le champ d'un formulaire de connexion lorsque vous le saisissez.
Les pages peuvent avoir plusieurs interactions, de sorte que l'INP signalé sera généralement le plus lent dans le 75e percentile des chargements de page enregistrés. En outre, dans le cas improbable où il y aurait plus de 50 interactions sur une page, le retard le plus important sera ignoré. Cela permet d'obtenir une mesure plus représentative en supprimant les valeurs aberrantes.
Qu'est-ce qu'un bon score INP ?
Voici comment interpréter votre score INP selon Google :
- Moins de 200 millisecondes = bon INP
- Entre 200 et 500 millisecondes = à améliorer
- Plus de 500 millisecondes = un mauvais INP
Pourquoi l'INP est-il important ?
Les attentes des internautes en matière de performances des sites web sont de plus en plus élevées. Selon Google, une augmentation du temps de chargement d'une page de 1 à 3 secondes peut entraîner une augmentation de 32 % de la probabilité de rebond. Mais le retard dans le chargement des pages n'est pas le seul problème de performance qui peut frustrer les utilisateurs et les inciter à quitter votre site.
L'INP fournit des informations précieuses sur les interactions d'un utilisateur tout au long du temps qu'il passe sur une page. En prêtant attention à l'INP, vous pouvez identifier les problèmes de performance et découvrir des opportunités d'améliorer l'expérience de l'utilisateur et d'atteindre vos objectifs commerciaux.
Comment mesurer la performance de mon site avec l'INP ?
Si votre site web est éligible pour le Chrome User Experience Report (CrUX), vous pouvez obtenir des données sur les champs INP et d'autres indicateurs Web de base via CrUX dans PageSpeed Insights. Il est également possible de vérifier des pages individuelles en entrant manuellement l'URL de la page dans Page Speed Insights.
Quelles sont les causes d'un bas INP?
Les mauvais scores INP se produisent lorsque la lenteur du traitement de l'unité centrale empêche l'affichage de contenus actualisés. Trois facteurs principaux contribuent à votre score INP :
- Le délai d'entrée - le temps qui s'écoule entre le clic, le tapotement ou la frappe d'un utilisateur et le moment où les gestionnaires d'événements commencent à s'exécuter. Des tâches longues sur le fil d'exécution principal, par exemple, peuvent entraîner des délais plus longs.
- Temps de traitement - le temps nécessaire pour exécuter votre code en réponse à une interaction avec l'utilisateur.
- Délai de présentation - le temps nécessaire aux navigateurs pour déterminer où et comment afficher un nouveau contenu, y compris des éléments tels que les couleurs et le positionnement.
Des éléments tels qu'un code inefficace, des conceptions complexes et des médias de grande taille auront un impact négatif sur ces facteurs. En conséquence, l'interaction avec Next Paint risque d'être moins bonne.
Il est également possible qu'une page ne renvoie aucune valeur INP. Cela peut se produire si la page a été chargée mais que l'utilisateur n'a pas interagi avec elle ou n'a utilisé que des interactions que l'INP ne reconnaît pas (par exemple, le défilement ou le survol avec la souris).
Comment trouver et résoudre les problèmes liés à Interaction to Next Paint ?
Pour améliorer votre score INP, il est important de diagnostiquer les problèmes spécifiques plutôt que de se fier à des suppositions. CrUX offre une vue de haut niveau de l'INP, mais vous aurez probablement besoin de plus de détails pour trouver et résoudre les problèmes de réactivité.
Pour les flux d'utilisateurs relativement simples, vous pouvez utiliser un outil gratuit comme le débogueur INP de DebugBear. Il vous suffit d'entrer l'URL de votre site web et l'outil recherchera les boutons, les champs de saisie et les autres éléments de la page susceptibles de présenter des retards d'interaction.
Pour une meilleure compréhension des flux complexes, il est intéressant d'obtenir des données à partir d'une solution de Real User Monitoring (RUM). RUM fournit des informations précieuses sur les interactions, telles que leur type et le fait qu'elles se soient produites pendant ou après le chargement de la page. Cela vous permet d'attribuer rapidement et précisément l'INP à des interactions individuelles. Vous pouvez ensuite tester manuellement toute interaction problématique afin de diagnostiquer et de résoudre le problème.
Vous n'avez pas accès à ces données? L'équipe Chrome propose quelques suggestions pour diagnostiquer manuellement les interactions lentes en laboratoire.
Besoin d'inspiration ? Consultez les exemples de réussite de l'Economic Times et de RedBus. Ils ont amélioré leurs scores INP en prenant des mesures telles que :
- Veiller à ce que leur code soit rationalisé et efficace
- Donner la priorité aux parties de leur site web qui se chargent en premier
- Optimiser la mise en cache du navigateur pour accélérer les temps de chargement
Comment puis-je améliorer les performances globales de mon site web ?
L'INP n'est qu'un des nombreux paramètres à prendre en compte pour évaluer la vitesse, la fiabilité et la stabilité de votre site ; il est judicieux de tenir compte de plusieurs autres facteurs. Nous vous recommandons d'effectuer régulièrement des tests de charge, de stress, de pointe et d'endurance. Si votre site n'a pas été testé depuis longtemps ou s'il présente des problèmes importants, un audit complet des performances du site web peut être un excellent point de départ.
Evolving Web peut également vous aider à améliorer les performances de votre site grâce à un code efficace et aux meilleures pratiques, par le biais de nos formations, de nos services de développement web et de nos services de maintenance de sites web.