24 mai 2023

Interaction avec Next Paint INP en tant que prochain Core Web Vital.

Google vient d'annoncer que Interaction to Next Paint, ou INP, remplacera First Input Delay dans Core Web Vitals.

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.

IN

INP

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Ă©.

valeurs-i-de-INP_png

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 :

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.

Informations sur l'auteur

Vous avez des doutes ? Vous ne savez pas par oĂč commencer ? Contactez-nous !

Nous avons toutes les réponses à vos questions pour vous aider à faire le bon choix.

Discute avec nous

Discutez directement avec notre support avant-vente.

0256569681

Contactez-nous par téléphone pendant les heures de bureau 9h30 - 19h30

Contactez-nous en ligne

Ouvrez une demande directement dans l'espace contact.

INFORMATIONS

Managed Server Srl est un acteur italien leader dans la fourniture de solutions systÚme GNU/Linux avancées orientées vers la haute performance. Avec un modÚle d'abonnement peu coûteux et prévisible, nous garantissons que nos clients ont accÚs à des technologies avancées en matiÚre d'hébergement, de serveurs dédiés et de services cloud. En plus de cela, nous proposons des conseils systÚme sur les systÚmes Linux et une maintenance spécialisée en SGBD, sécurité informatique, Cloud et bien plus encore. Nous nous distinguons par notre expertise dans l'hébergement de CMS Open Source de premier plan tels que WordPress, WooCommerce, Drupal, Prestashop, Joomla, OpenCart et Magento, soutenus par un service d'assistance et de conseil de haut niveau adapté aux administrations publiques, aux PME et à toutes tailles.

Red Hat, Inc. dĂ©tient les droits de Red HatÂź, RHELÂź, RedHat LinuxÂź et CentOSÂź ; AlmaLinuxℱ est une marque commerciale d'AlmaLinux OS Foundation ; Rocky LinuxÂź est une marque dĂ©posĂ©e de la Rocky Linux Foundation ; SUSEÂź est une marque dĂ©posĂ©e de SUSE LLC ; Canonical Ltd. dĂ©tient les droits sur UbuntuÂź ; Software in the Public Interest, Inc. dĂ©tient les droits sur DebianÂź ; Linus Torvalds dĂ©tient les droits sur LinuxÂź ; FreeBSDÂź est une marque dĂ©posĂ©e de la FreeBSD Foundation ; NetBSDÂź est une marque dĂ©posĂ©e de la Fondation NetBSD ; OpenBSDÂź est une marque dĂ©posĂ©e de Theo de Raadt. Oracle Corporation dĂ©tient les droits sur OracleÂź, MySQLÂź et MyRocksÂź ; PerconaÂź est une marque dĂ©posĂ©e de Percona LLC ; MariaDBÂź est une marque dĂ©posĂ©e de MariaDB Corporation Ab ; REDISÂź est une marque dĂ©posĂ©e de Redis Labs Ltd. F5 Networks, Inc. dĂ©tient les droits sur NGINXÂź et NGINX PlusÂź ; VarnishÂź est une marque dĂ©posĂ©e de Varnish Software AB. Adobe Inc. dĂ©tient les droits sur MagentoÂź ; PrestaShopÂź est une marque dĂ©posĂ©e de PrestaShop SA ; OpenCartÂź est une marque dĂ©posĂ©e d'OpenCart Limited. Automattic Inc. dĂ©tient les droits sur WordPressÂź, WooCommerceÂź et JetPackÂź ; Open Source Matters, Inc. dĂ©tient les droits sur JoomlaÂź ; Dries Buytaert dĂ©tient les droits sur DrupalÂź. Amazon Web Services, Inc. dĂ©tient les droits sur AWSÂź ; Google LLC dĂ©tient les droits sur Google Cloudℱ et Chromeℱ ; Facebook, Inc. dĂ©tient les droits sur FacebookÂź ; Microsoft Corporation dĂ©tient les droits sur MicrosoftÂź, AzureÂź et Internet ExplorerÂź ; La Fondation Mozilla dĂ©tient les droits sur FirefoxÂź. ApacheÂź est une marque dĂ©posĂ©e de The Apache Software Foundation ; PHPÂź est une marque dĂ©posĂ©e du groupe PHP. CloudFlareÂź est une marque dĂ©posĂ©e de Cloudflare, Inc. ; NETSCOUTÂź est une marque dĂ©posĂ©e de NETSCOUT Systems Inc. ; ElasticSearchÂź, LogStashÂź et KibanaÂź sont des marques dĂ©posĂ©es d'Elastic NV. Ce site n'est affiliĂ©, sponsorisĂ© ou autrement associĂ© Ă  aucune des entitĂ©s mentionnĂ©es ci-dessus et ne reprĂ©sente aucune de ces entitĂ©s de quelque maniĂšre que ce soit. Tous les droits sur les marques et noms de produits mentionnĂ©s sont la propriĂ©tĂ© de leurs titulaires respectifs des droits d'auteur. Toutes les autres marques mentionnĂ©es appartiennent Ă  leurs titulaires. MANAGED SERVERÂź est une marque dĂ©posĂ©e au niveau europĂ©en par MANAGED SERVER SRL Via Enzo Ferrari, 9 62012 Civitanova Marche (MC) Italie.

JUSTE UN MOMENT !

Souhaitez-vous voir comment votre WooCommerce fonctionne sur nos systĂšmes sans avoir Ă  migrer quoi que ce soit ? 

Entrez l'adresse de votre site WooCommerce et vous obtiendrez une démonstration navigable, sans avoir à faire absolument quoi que ce soit et entiÚrement gratuite.

Non merci, mes clients préfÚrent le site lent.
Retour en haut de page