Table des matières de l'article :
Google vient d'annoncer que Interaction to Next Paint, ou INP, remplacera le premier délai d'entrée dans Vitaux Web de base. Qu'est-ce que cela signifie pour les sites WordPress, mais aussi pour les sites en général, et que pouvez-vous faire maintenant pour vous assurer que vous êtes prêt pour le 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.
Depuis Google Documentation 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 JavaScript qui exécute des tâches de longue durée sur le thread principal est la principale cause de problèmes INP, ou Interaction to Next Paint. Pour mieux comprendre, le fil conducteur est le cœur battant du traitement du navigateur. Lors de l'exécution d'une tâche JavaScript, elle ne peut pas répondre simultanément aux entrées de l'utilisateur. Par conséquent, si une tâche JavaScript est particulièrement longue, elle peut retarder la réponse du navigateur aux entrées de l'utilisateur, affectant la réactivité du site. Cela peut entraîner des retards INP, car INP mesure le temps nécessaire pour qu'un changement apparaisse à l'écran en réponse à l'entrée 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.
En ce qui concerne les sites WordPress, ces problèmes sont souvent causés par des plugins WordPress ou des scripts tiers. Ceux-ci peuvent ajouter de la complexité et une charge de travail supplémentaire au thread principal, entraînant une augmentation de l'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 mentionné précédemment, INP n'est qu'une métrique de champ. Cela signifie qu'il n'est mesuré que pour les utilisateurs qui interagissent avec votre site. Vous ne pouvez pas exécuter Lighthouse ou WebPageTest lors du chargement de la page pour tester cette métrique. Au lieu de cela, nous devons examiner les données utilisateur réelles, comme dans Rapport d'expérience utilisateur Chrome ou CrUX.
Vous pouvez utiliser l'outil gratuit Vitesse du site TREO 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 cette page reçoit suffisamment de trafic.
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é un ensemble complet de documentation pour aider au développement et à l'optimisation d'INP. Ces articles couvrent divers aspects de la métrique INP, y compris la façon dont elle est calculée, comment elle peut être surveillée et mesurée, et comment elle se compare à d'autres métriques gouvernementales. Vitaux Web de base. La documentation fournit également des conseils pratiques sur la façon d'optimiser INP, de minimiser le temps de traitement JavaScript, de gérer efficacement les ressources et d'optimiser le 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
INP qui remplace FID dans le Vitaux Web de base Ce sont de bonnes nouvelles. Cela permettra de mieux centrer l'expérience utilisateur sur la réactivité et l'interactivité dans les métriques. L'expérience utilisateur est la clé d'un taux de conversion plus élevé, et ce changement alignera également les classements des moteurs de recherche sur cette expérience utilisateur.
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.
