Qu’est-ce que l’interaction avec Next Paint (INP) ? Les 7 meilleures façons de l'améliorer

Vous êtes peut-être au courant de la transition prochaine de Google du First Input Delay (FID) à l'Interaction to Next Paint (INP) d'ici mars 2024. Cette modification aura un impact significatif sur les critères d'évaluation des Core Web Vitals. Si vous ne les connaissiez pas, ne vous inquiétez pas, nous avons ce qu'il vous faut.

Interaction avec le suivant Paint ou INP est une métrique utilisée pour mesurer la réactivité de l'interface d'une page Web. Cette réactivité est le temps écoulé entre l'interaction de l'utilisateur avec la page et le moment où il y a la prochaine mise à jour visuelle de la page. Donc, essentiellement, cela fait référence à la rapidité avec laquelle une page Web réagit à un clic ou à une pression sur une touche d'un utilisateur. Cela aide à comprendre et à améliorer l'expérience utilisateur (UX), étant donné qu'il est directement lié à la rapidité avec laquelle une page spécifique répond. 

Données d'utilisation de Chrome a montré qu'environ 90 % des utilisateurs le temps passé sur une page Web s'écoule après le chargement d'une page. Cette mesure de la réactivité tout au long du cycle de vie d’une page est donc extrêmement importante. 

Qu’est-ce que l’INP (Interaction avec Next Paint) ?

Si vous êtes familier avec Premier délai d'entrée, vous comprendrez également ce qu'est INP, même si les deux termes ne sont pas tout à fait synonymes. L'interaction avec First Paint ou INP a été introduite par Google pour remplacer le FID ou First Input Delay dans les CWV. Cela peut être considéré comme faisant partie des tentatives de Google visant à améliorer l'expérience utilisateur et les performances Web. Dans la tentative de Google de rendre le Web plus centré sur l'utilisateur, l'introduction de l'INP comme mesure de réactivité des pages et des sites Web a joué un rôle crucial.

Bonne réactivité en général fait référence à la rapidité avec laquelle une page répond aux interactions effectuées avec elle. La réponse dans ce scénario fait référence au retour visuel que le navigateur présente dans le cadre suivant. Même s'il est évident que certaines interactions prendront plus de temps, il est important qu'il y ait un certain niveau de retour visuel, qui informera l'utilisateur qu'un processus est en cours. La première possibilité de le faire est le temps jusqu'à la prochaine peinture. Si le retour visuel est retardé, les utilisateurs peuvent avoir l'impression que la page ne répond pas du tout à leurs actions.

Donc, INP, comme une métrique, observe la latence de tous les appuis, clics ainsi que les interactions au clavier, qui ont lieu tout au long de la période de visite de la page d'un utilisateur. Désormais, la valeur finale de l'INP est calculée en fonction de l'interaction la plus longue notée, à l'exception des valeurs aberrantes. 

INP s'avère plus utile et pertinent pour les pages, qui connaissent une interaction à long terme comme les applications d'une seule page. De cette façon, il est capable de donner une représentation beaucoup plus précise de l’ensemble de l’expérience utilisateur.

Ainsi, une fois que l'INP aura succédé au FID en mars 2024, le rapport de la console de recherche de Google n'affichera plus les métriques FID mais utilisera plutôt l'INP à l'avenir.

De plus, tout le Web les éditeurs doivent respecter l'Interaction to Next Paint pour améliorer leur Scores Core Web Vital(CWV) et offrir une meilleure expérience utilisateur.

Qu'est-ce qu'une bonne interaction avec le prochain score de peinture ?

Afin de Pour garantir que les utilisateurs vivent une expérience satisfaisante, les sites Web doivent essayer de maintenir leur interaction jusqu'à la prochaine peinture à 200 millisecondes ou moins. La plupart des utilisateurs considèrent qu'il s'agit d'un bon seuil, ce qui signifie que le site Web fonctionne correctement, est réactif et que ses interactions sont traitées avec une grande rapidité. 

Cependant, lorsqu'on considère INP, nous devons également considérer que l'expérience utilisateur varie selon les plates-formes, les appareils et les conditions. Ainsi, afin de s'assurer que la réactivité que vous apportez est bonne, le seuil est de mesurer 75% des chargements de pages, qui sont enregistrés sur le terrain. De cette façon, la mesure devient encore plus complète et fournit une image plus claire, garantissant que la majorité des utilisateurs vivent une expérience réactive positive. 

Un INP dépassant 200 millisecondes et inférieur à 500 millisecondes signifie que votre page Web a besoin d'une réactivité meilleure et améliorée. Si l'INP est supérieur à 500 millisecondes, votre page a une mauvaise réactivité.

Si un site Web comporte un certain nombre d'éléments interactifs, c'est-à-dire ceux des jeux et des éditeurs de texte, etc., avoir un faible INP est très important. Si l’INP est élevé, cela signifie que la réactivité du site Web est très mauvaise, conduisant à une mauvaise expérience utilisateur. Un INP inférieur signifierait cependant une expérience meilleure et plus fluide pour les utilisateurs.

Quelles sont les différentes étapes de mesure de l’interaction avec la prochaine peinture ?

Comprenons comment fonctionne l'INP en décomposant le processus en ses composants principaux. Voici les principales étapes impliquées dans la mesure de l’INP :

Capture d'interaction utilisateur – 

Le processus de mesure commence lorsque l'utilisateur interagit pour la première fois avec la page Web. L'interaction peut faire référence à une pression sur une touche, à un toucher sur l'écran ou à un clic. INP a été conçu pour se concentrer sur ces éléments, car il s'agit d'actions d'interaction directes qui nécessitent un retour spécifique de la page. 

Délai d'entrée

Le délai d'entrée fait référence au temps pris avant le début du traitement des informations. Le navigateur peut rester dans un état occupé pendant cette phase, retardant la vitesse de traitement des entrées de l’utilisateur. 

Délai de traitement

Dans cette phase, les gestionnaires d'événements, liés à l'interaction, sont amenés à s'exécuter. Ce ne sont rien d’autre que des fonctions Javascript qui visent à exécuter la réponse à l’action de l’utilisateur. Le temps de traitement peut varier en fonction de la complexité de la tâche. 

Retard dans la présentation

Après le traitement de l'entrée, le délai de présentation est la phase suivante. Il fait référence au temps nécessaire pour restituer la réponse visuelle de l’interaction. Des tâches telles que l'exécution des modifications CSS, le recalcul de la mise en page de la page ou la repeinture de la page afin de refléter l'interaction sont effectuées au cours de cette phase. 

Mise à jour visuelle

Cela peut être considéré comme l’étape finale où culmine tout le processus d’interaction. À ce stade, l'utilisateur peut voir le résultat de son action initiale, – une indication de la soumission d'un formulaire, de l'ouverture d'un menu ou de toute autre réponse visuelle sur une page Web. 

Calcul de l'INP

Le calcul de l'INP est effectué en ajoutant le délai d'entrée, le temps de traitement ainsi que le délai de présentation. Cela vous donne une mesure complète de la période de temps entre l’interaction initiale de l’utilisateur et la prochaine peinture reflétant la mise à jour visuelle de la page. 

En quoi l’INP et le FID sont-ils différents – Une comparaison

 Pour les développeurs Web qui souhaitent optimiser leur expérience utilisateur, il est important de savoir exactement en quoi INP et FID sont différents. Bien que ces deux mesures soient utilisées pour mesurer la réactivité et l’interactivité, certaines différences fondamentales doivent être gardées à l’esprit. 

Délai de première entrée ou FID :

Cette métrique traite de la première fois que l'utilisateur interagit et mesure le temps écoulé entre cette interaction et le moment où le navigateur peut commencer à traiter les gestionnaires d'événements censés répondre à cette interaction. 

Donc, essentiellement, FID aide à évaluer l’expérience utilisateur pendant la phase de chargement de la page. Cela dépend entièrement de la première interaction. 

Prenons un exemple où l'utilisateur clique sur un menu déroulant pour qu'une liste déroulante pertinente apparaisse. Ainsi, le FID mesurera le temps écoulé entre le clic de l’utilisateur et le temps nécessaire à l’apparition du menu. Entre-temps, si le navigateur est en train de charger la page, il y aura bien sûr un retard considérable dans la réponse. Cela entraînera automatiquement une mauvaise expérience utilisateur. 

Interaction avec la peinture suivante

INP, en revanche, peut être considéré comme une métrique plus complète dans laquelle il mesure la latence de toutes les interactions des utilisateurs. Contrairement au FID, il ne se limite pas à la première interaction et traite des interactions qui se produisent tout au long de la durée de vie de la visite de la page. Il comprend le délai de saisie, de traitement des informations et le délai de présentation. 

Par exemple, considérons qu'un utilisateur utilise différents éléments interactifs sur la page Web. Cela peut inclure la saisie dans un champ de recherche, la sélection d'éléments dans le menu, le clic sur des liens, etc. L'INP serait chargé de mesurer le retard dans toutes ces interactions et fournirait une idée beaucoup plus large de la qualité de l'UX. 

Quelles sont les différentes manières d’améliorer l’interaction avec Next Paint ?

Améliorer un site Web L'interaction avec Next Paint (INP) est essentielle pour améliorer sa réactivité et optimiser l'expérience utilisateur globale (UX). Les recommandations détaillées suivantes impliquent des approches stratégiques pour optimiser efficacement l’INP et améliorer considérablement l’expérience utilisateur en même temps :

1. Minimiser le traitement du processeur :

• Améliorez l'expérience utilisateur en exécutant davantage de code de manière asynchrone, en fournissant des mises à jour immédiates de l'interface utilisateur, même pendant le traitement en arrière-plan en cours.
• Tirez parti d'outils tels que le profileur de performances DevTools pour examiner le fil principal et identifier les domaines à optimiser.
• Évaluer l'impact des scripts tiers sur la réactivité du site et les configurer ou les différer selon les besoins
• Pour les ressources non essentielles, vous pouvez envisager un chargement différé et vous assurer que le chargement n'a lieu que lorsque cela est absolument nécessaire afin de minimiser le temps de chargement initial.

2. Réduire le délai d'entrée :

• Réduisez le délai d’entrée en diminuant l’activité du processeur en arrière-plan sur le thread principal
• Utiliser la métrique du temps de blocage total (TBT) dans les données de laboratoire pour identifier les activités entravant les interactions des utilisateurs
• Étudier les méthodes pour optimiser le code tiers provoquant des retards
• Envisagez de diviser le fil principal des tâches en tâches plus petites et gérables afin de minimiser la probabilité de retards de saisie.

3. Optimisation du temps de traitement :

• Identifiez et optimisez les zones dans lesquelles le navigateur passe beaucoup de temps à exécuter du code
• Assurez-vous que les composants, en particulier dans des frameworks comme React, ne s'affichent pas inutilement
• Élaborer une stratégie pour minimiser les mises en page et les repeints s'ils contribuent de manière significative à l'activité du processeur
• Utiliser un mécanisme de mise en cache intelligent afin que les données fréquemment utilisées puissent être facilement stockées et récupérées, minimisant ainsi le besoin de calculs redondants

4. Mise à jour de l'interface utilisateur avant un traitement intensif :

•  Fournissez un retour visuel immédiat, tel qu'un spinner, avant de lancer des tâches gourmandes en ressources
• Utilisez des écrans squelettes ou des espaces réservés afin que les utilisateurs puissent recevoir un retour visuel immédiat pendant l'exécution de tâches gourmandes en ressources.
• Envisagez l'utilisation de Web Workers pour exécuter des tâches JavaScript gourmandes en calcul à partir du thread principal.

5. Éviter de bloquer les boîtes de dialogue :

•  Remplacez les dialogues natifs bloquants traditionnels (comme les alertes, les confirmations et les invites) par des éléments d'interface utilisateur non bloquants.
• Implémentez des superpositions ou des dialogues modaux personnalisés, qui ne bloquent pas le fil principal et offrent une expérience utilisateur transparente

6. Réduire le délai de présentation :

•  Si le rendu du contenu est lent, donnez la priorité à l'affichage du contenu critique en premier pour accélérer la livraison des images suivantes.
• Gérez efficacement les interactions en file d’attente pour minimiser les retards de présentation
• Essayez de tirer parti du CDN ou des réseaux de diffusion de contenu pour répartir les charges de traitement et réduire les temps de réponse du serveur.

7. Meilleures pratiques générales :

• Utiliser des outils tels que Google PageSpeed ​​Insights, Lighthouse et des solutions de surveillance des utilisateurs réels (RUM) pour une surveillance continue des performances
• Restez au courant des changements dans Éléments essentiels du Web (CWV) métriques et ajuster les stratégies d’optimisation en conséquence

Conclusion

L'interaction avec Next Paint s'est avérée être une mesure assez complète d'évaluation de l'expérience utilisateur où elle calcule les retards en cas de toutes les interactions utilisateur au cours d'une seule visite de page, contrairement au FID qui ne traite que la première.

 Dans cet article, nous avons vu en détail ce qu'est l'INP et une analyse détaillée du processus dans lequel il fonctionne. Nous avons également utilisé plusieurs méthodes permettant d'optimiser ou d'améliorer l'expérience utilisateur et de nous assurer qu'il y a le moins de retards lorsqu'un utilisateur effectue une interaction. 

L'impact de l'amélioration des performances du site va au-delà de la simple satisfaction des utilisateurs ; cela se traduit par des avantages tangibles pour les éditeurs, notamment en matière de revenus publicitaires. Un site adapté et réactif possède la capacité de favoriser des visites récurrentes, nourrissant ainsi un public plus engagé.

Foire aux questions