Interaction avec Next Paint INP en tant que prochain Core Web Vital. - ūüŹÜ Serveurs g√©r√©s
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.

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

ManagedServer.it est le premier fournisseur italien de solutions d'hébergement hautes performances. Notre modèle d'abonnement est abordable et prévisible, afin que les clients puissent accéder à nos technologies d'hébergement fiables, à nos serveurs dédiés et au cloud. ManagedServer.it offre également d'excellents services d'assistance et de conseil sur l'hébergement des principaux CMS Open Source tels que WordPress, WooCommerce, Drupal, Prestashop, Magento.

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.
Remonter en haut