Table des matières de l'article :
Google vient d'annoncer que l'Interaction to Next Paint (INP) remplacera le First Input Delay dans les Core Web Vitals . Quelles conséquences cela aura-t-il pour les sites WordPress, mais aussi pour les sites web en général ? Comment vous préparer dès maintenant à ce changement ?
Cet article vous donnera un aperçu de tout ce que vous devez savoir sur cette nouvelle mesure très importante.
Qu'est-ce que l'interaction avec la peinture suivante (INP) ?
L'interaction avec Next Paint, souvent abrégé en INP, représente une avancée dans l'évolution des mesures de performance Web. Il s'agit d'une mesure relativement nouvelle qui vise à fournir une mesure plus précise et utile de l'expérience utilisateur lors de l'interaction avec une page Web.
À la base, INP se concentre sur le temps qu'il faut au navigateur pour "peindre" ou afficher l'image suivante après qu'un utilisateur a interagi avec la page. Concrètement, cela signifie qu'il mesure le temps entre le moment où un utilisateur, par exemple, clique sur un bouton et le moment où il voit un changement visible à l'écran à la suite de ce clic.
Cela peut sembler une mesure simple, mais cela fournit en fait une indication très significative de l'expérience utilisateur. Imaginez, par exemple, cliquer sur un bouton sur un site Web. Vous vous attendriez à une sorte de rétroaction instantanée pour confirmer que votre clic a eu un effet - peut-être que le bouton change de couleur ou qu'un message apparaît. Mais si vous ne voyez aucune réponse visuelle, vous pourriez commencer à vous demander si votre clic a été enregistré. Après un certain temps, vous pouvez même commencer à être frustré. C'est pourquoi l'INP est si important : il mesure le temps qu'il faut avant que vous ne voyiez un retour visuel après une interaction, ce qui peut être un indicateur clé de la qualité de l'expérience utilisateur sur votre site Web.
De plus, INP est particulièrement utile car il prend en compte tout le cycle de vie de la page, pas seulement la première entrée. Cela en fait une mesure plus représentative de l'expérience utilisateur que certaines autres mesures, reflétant le fait que les utilisateurs interagissent avec une page de différentes manières et à différents moments au cours de leur visite. Par conséquent, l'optimisation pour un faible INP peut aider à garantir que votre site Web offre une expérience utilisateur cohérente et réactive du début à la fin.
Comment INP se compare-t-il au FID ?
L'interaction avec Next Paint, ou INP, est une mesure de performance Web qui offre une perspective unique et précieuse sur l'expérience utilisateur lors de l'interaction avec une page Web. Au cœur de son calcul, INP prend en compte un temps de traitement plus important que les autres métriques lorsqu'il mesure la réactivité d'une page après une interaction utilisateur. Cela signifie qu'il est en mesure de fournir une représentation plus précise et complète de la façon dont un utilisateur subit un retard d'interactivité sur un site Web.
Prenons, par exemple, une métrique connexe appelée First Input Delay, ou FID. Le FID mesure le temps entre le moment où un utilisateur interagit avec un élément de la page (comme cliquer sur un bouton ou un lien, ou toucher un élément sur un appareil tactile) et le moment où le navigateur est capable de répondre à cette interaction. C'est une mesure utile, mais elle est limitée car elle se concentre uniquement sur la première interaction de l'utilisateur avec la page.
L'INP va plus loin. Non seulement il mesure le temps qu'il faut au navigateur pour répondre à une interaction de l'utilisateur, mais il étend cette mesure pour inclure le temps qu'il faut au navigateur pour « peindre » ou afficher l'image suivante après cette interaction. Il peut s'agir, par exemple, du temps nécessaire pour afficher une réponse visuelle au clic ou au toucher d'un utilisateur.
De plus, un avantage important de l'INP par rapport au FID est que l'INP est mesuré pendant toute la durée d'une session utilisateur, et pas seulement la première interaction. Cela signifie qu'INP peut fournir un aperçu plus complet et plus précis de l'expérience utilisateur tout au long de la visite d'une page, plutôt qu'un seul point dans le temps. C'est une bonne chose car cela reflète la réalité selon laquelle l'expérience utilisateur sur un site Web est dynamique et peut changer au fil du temps. Par conséquent, l'optimisation pour un faible INP peut aider à améliorer l'expérience utilisateur dans son ensemble, plutôt qu'un seul instant.
D'après la documentation Google accessible à l' adresse https://web.dev/inp/
Les données d'utilisation de Chrome montrent que 90 % du temps d'un utilisateur sur une page est passé après son chargement. Il est donc important de mesurer avec précision la réactivité tout au long du cycle de vie de la page. C'est ce que la métrique INP évalue.
INP signale le pire moment environ.
FID et INP ne peuvent être mesurés qu'avec de vrais utilisateurs. Le temps de blocage total (TBT) est une métrique de laboratoire que vous pouvez suivre lors de tests individuels qui peuvent être corrélés à la fois avec FID et INP, mais uniquement pour les événements qui peuvent se produire pendant le chargement de la page.
Qu'est-ce qu'une bonne valeur INP ?
Il est difficile d'attribuer des étiquettes telles que "bon" ou "médiocre" à une métrique de réactivité. D'une part, vous souhaitez encourager les pratiques de développement qui privilégient une bonne réactivité. D'un autre côté, vous devez tenir compte du fait qu'il existe une grande variabilité dans les capacités des appareils que les gens utilisent pour définir des attentes de développement réalisables.
Pour vous assurer que vous fournissez des expériences utilisateur réactives, un bon seuil à mesurer est le 75e centile des chargements de page enregistrés sur le terrain, répartis entre mobile et ordinateur :
- Un INP inférieur ou à 200 millisecondes cela signifie que votre page a une bonne réactivité.
- Un INP supérieur à 200 millisecondes et inférieur ou 500 millisecondes cela signifie que la réactivité de votre page doit être améliorée.
- Un INP supérieur à 500 millisecondes cela signifie que votre page a une mauvaise réactivité.
Qu'est-ce qui cause de mauvaises performances INP ?
L'exécution de code JavaScript effectuant des tâches longues sur le thread principal est la principale cause des problèmes d'INP (Interaction to Next Paint). En d'autres termes, le thread principal est au cœur du traitement des données par le navigateur. Lorsqu'il exécute une tâche JavaScript, il ne peut pas répondre simultanément aux interactions de l'utilisateur. Par conséquent, si une tâche JavaScript est particulièrement longue, elle peut retarder la réponse du navigateur aux interactions de l'utilisateur, ce qui nuit à la réactivité du site. Cela peut entraîner des délais d'INP, car l'INP mesure le temps nécessaire pour afficher une modification à l'écran en réponse à une interaction de l'utilisateur.
Pour compliquer davantage les choses, les grandes mises à jour de rendu peuvent également avoir un impact sur l'INP. Lorsque le navigateur doit traiter une mise à jour de rendu importante - qui peut impliquer des changements à grande échelle dans la vue d'une page - cela peut prendre du temps et des ressources, ce qui allonge encore le temps INP.
Sur les sites WordPress, ces problèmes sont souvent causés par des extensions ou des scripts tiers. Ces derniers peuvent complexifier le système et alourdir la charge du thread principal, entraînant une augmentation du nombre de requêtes (INP).
De plus, l'utilisation d'un framework JavaScript comme Vue ou React pour rendre l'interface utilisateur de votre site peut contribuer à un INP plus élevé. Ces frameworks sont des outils puissants pour créer des interfaces utilisateur riches et dynamiques, mais ils peuvent également imposer une charge importante au navigateur, surtout s'ils sont utilisés de manière sous-optimale.
Enfin, un autre coupable possible est le code JavaScript inefficace dans le thème WordPress lui-même. Si le code JavaScript de votre thème n'a pas été écrit ou optimisé efficacement, cela peut entraîner des retards et des problèmes de performances qui peuvent affecter votre INP. Par conséquent, il est toujours judicieux de revoir et d'optimiser votre code de thème pour garantir les meilleures performances possibles.
Comment mesurer et améliorer l'INP ?
Comme indiqué précédemment, l'INP est une métrique de terrain uniquement. Cela signifie qu'elle n'est mesurée que pour les utilisateurs qui interagissent avec votre site. Vous ne pouvez pas exécuter Lighthouse ou WebPageTest au chargement de la page pour tester cette métrique. Il est donc nécessaire d'analyser des données utilisateur réelles, telles que le rapport d'expérience utilisateur de Chrome ou CrUX.
Vous pouvez utiliser l'outil gratuit TREO SiteSpeed pour consulter les données CrUX de l'ensemble de votre domaine. Vous pouvez également exécuter PageSpeed Insights sur les pages les plus populaires et parfois obtenir des données INP au niveau de la page si celle-ci reçoit un trafic suffisant.
Le débogage et la correction de l'INP seront plus difficiles que l'optimisation pour la plus grande peinture de contenu et le changement de mise en page cumulé. Cependant, une étape que vous pouvez prendre maintenant pour faciliter cette tâche consiste à nettoyer votre site.
Nous avons travaillé avec plusieurs marchands WordPress pour optimiser leurs sites Web. Nous avons également examiné de nombreux autres sites WordPress et analysé ceux-ci sur le Web via CrUX et HTTPArchive. L'un des problèmes les plus courants que nous rencontrons est le chargement excessif de scripts tiers. Cela vient souvent des plugins WordPress qui ont été installés. Certains d'entre eux ne sont plus utilisés, et certains d'entre eux que vous avez peut-être pensé avoir supprimés, mais le code est toujours là.
Comment trouvez-vous certains des pires contrevenants?
L'identification des responsables d'un INP (Interaction to Next Paint) élevé peut nécessiter une analyse approfondie du comportement de votre site Web, du chargement de JavaScript à l'exécution et au rendu de la page. Voici quelques étapes clés à suivre :
- Utiliser les outils de développement de navigateur : des outils tels que l'analyseur de performances de Chrome peuvent aider à identifier les activités JavaScript de longue durée susceptibles de causer des problèmes INP. Cet outil fournit un tracé détaillé du temps de traitement pour chaque activité JavaScript au cours d'une session, vous permettant d'identifier toute activité qui prend plus de temps que prévu.
- Analyser l'utilisation de JavaScript: Un INP élevé peut être causé par des scripts JavaScript lourds ou inefficaces. Cela peut inclure une utilisation excessive de scripts tiers, des scripts qui nécessitent beaucoup de traitement ou des scripts qui bloquent l'affichage des pages. Un outil comme Lighthouse peut donner un aperçu de l'utilisation de JavaScript sur votre site et suggérer des moyens de l'optimiser.
- Surveiller l'activité du thread principal: Un INP élevé peut être causé par des activités qui bloquent le thread principal, telles qu'un traitement JavaScript de longue durée ou des mises à jour de rendu volumineuses. Des outils tels que Lighthouse et l'analyseur de performances de Chrome peuvent fournir un aperçu de l'activité principale du thread.
- Analyser l'utilisation des ressources: Un INP élevé peut également être causé par une utilisation inefficace des ressources, comme une charge excessive des ressources ou une utilisation importante des ressources. Des outils comme Lighthouse et PageSpeed Insights peuvent fournir une analyse détaillée de l'utilisation des ressources et suggérer des moyens de l'optimiser.
- Analyser l'utilisation du réseau: Un INP élevé peut être causé par des problèmes de réseau, tels qu'une latence élevée ou un chargement lent des ressources. Des outils tels que le volet Réseau des outils de développement Chrome peuvent fournir une analyse détaillée de l'activité du réseau et aider à identifier les problèmes.
Débogage INP
Le débogage de l'interaction avec la peinture suivante (INP) est plus difficile que le premier délai d'entrée (FID), car l'INP affecte l'ensemble du cycle d'interaction de l'utilisateur avec le site, et pas seulement la première entrée. En d'autres termes, alors que FID se concentre sur le délai entre la première entrée de l'utilisateur (comme un clic ou un appui) et la réponse du navigateur, INP mesure le temps entre une entrée de l'utilisateur et le moment où le navigateur affiche le changement lié à cette entrée. Cela signifie que l'INP prend en compte toutes les interactions de l'utilisateur pendant la session, ce qui en fait un indicateur plus complexe et complet de l'expérience utilisateur.
S'attaquer au débogage INP nécessite une compréhension détaillée du fonctionnement du navigateur et des performances de JavaScript. Les outils de développement de Chrome, en particulier l'analyseur de performances, peuvent fournir des informations précieuses sur les performances d'INP au cours d'une session. Ces outils peuvent aider à identifier les tâches de script longues ou les mises à jour de rendu volumineuses susceptibles d'affecter négativement l'INP.
L'équipe Chrome a publié une documentation complète pour faciliter le développement et l'optimisation de l'INP. Ces articles abordent différents aspects de la métrique INP, notamment son calcul, son suivi et sa mesure, ainsi que sa comparaison avec d'autres indicateurs clés de performance Web (Core Web Vitals) . La documentation fournit également des conseils pratiques pour optimiser l'INP, tels que la réduction du temps de traitement JavaScript, la gestion efficace des ressources et l'optimisation du rendu du navigateur.
Il est important de noter que l'optimisation de l'INP doit aller de pair avec l'optimisation d'autres mesures de performance. L'objectif doit être de fournir une expérience utilisateur fluide et réactive, et l'optimisation INP peut être un élément clé pour y parvenir.
Conclusions
Le remplacement de FID par INP dans les Core Web Vitals est une excellente nouvelle. Cette nouvelle approche permettra de mieux prendre en compte l'expérience utilisateur en matière de réactivité et d'interactivité. L'expérience utilisateur étant essentielle à l'amélioration des taux de conversion, ce changement permettra également d'aligner le référencement naturel sur cette expérience.
Commencez dès maintenant à optimiser l'interaction avec Next Paint. A la fois pour vous préparer au changement et pour améliorer l'expérience des clients qui visitent votre site aujourd'hui. Dans les mois à venir, nous publierons plus de contenu d'apprentissage pour aider les marchands, les développeurs de thèmes et les développeurs d'applications de l'écosystème WordPress à répondre à vos besoins uniques.
