Interaction to Next Paint (INP) est une nouvelle mesure essentielle des Web Vitals (CWV) qui se concentre sur la mesure de la réactivité d'une page Web à partir du moment où un utilisateur interagit avec elle jusqu'au point où la réponse visuelle est rendue.
Cette mesure est essentielle pour comprendre et améliorer l'expérience utilisateur (UX) d'un site Web, car elle est directement liée à la rapidité avec laquelle une page peut répondre aux entrées de l'utilisateur.
Google a introduit l'INP en remplacement du First Input Delay (FID) dans les CWV dans le cadre de ses efforts continus pour améliorer les performances Web et l'expérience utilisateur. L'annonce souligne l'importance de l'INP dans la mesure de la réactivité des applications et des sites Web, marquant ainsi une étape vers un Web plus centré sur l'utilisateur.
Dans cet article, nous allons aborder les subtilités de l'INP, explorer son importance et les méthodes permettant de l'optimiser pour une expérience Web plus fluide. Que vous soyez développeur Web, propriétaire d'un site ou simplement intéressé par les performances Web, les connaissances et les outils que vous trouverez ici devraient vous aider à utiliser efficacement la mesure INP.
Qu'est-ce que l'interaction avec Next Paint ?
Interaction to Next Paint (INP) est le dernier ajout aux principales mesures Web Vitals de Google et mesure la réactivité d'un site Web ou d'une application Web aux interactions des utilisateurs.
Il quantifie spécifiquement le temps écoulé entre une action initiée par l'utilisateur (comme un clic, un appui ou une pression sur une touche) et le moment où la page se met à jour visuellement en réponse à cette action. Cette mesure est essentielle pour évaluer la rapidité et l'efficacité avec lesquelles un site Web peut répondre aux saisies de l'utilisateur.
L'un des aspects clés de l'INP est qu'il mesure la réactivité tout au long du cycle de vie de la visite d'un utilisateur sur une page, et pas seulement lors de l'interaction initiale. Il s'agit donc d'une mesure plus complète que son prédécesseur, Délai de première entrée (FID) , qui ne prend en compte que le délai de traitement de la première entrée.
L'INP est particulièrement pertinent pour les pages avec lesquelles on interagit sur une période plus longue, comme les applications d'une seule page, où il fournit une représentation plus précise de l'expérience utilisateur globale (UX).
Comment l'interaction avec la peinture suivante (INP) est-elle mesurée ?
Pour comprendre comment l'interaction avec la prochaine image (INP) est mesurée, il faut décomposer le processus en ses composants principaux. L'INP ne concerne pas uniquement la réponse initiale à une interaction, mais englobe toute la séquence allant de l'action de l'utilisateur à la mise à jour visuelle sur la page.
Étapes de la mesure de l'INP
- Capture de l'interaction de l'utilisateur : la mesure commence au moment où un utilisateur interagit avec la page. Cette interaction peut être un clic, un appui sur un écran tactile ou une pression sur une touche du clavier. L'INP se concentre sur ces types d'interactions spécifiques, car il s'agit d'actions directes et intentionnelles nécessitant une réponse de la page.
- Délai d'entrée : La phase suivante de la mesure est le délai d'entrée. Il s'agit du temps nécessaire à la page pour commencer à traiter l'interaction. Au cours de cette phase, le navigateur peut être occupé par d'autres tâches, ce qui peut retarder le traitement de la saisie de l'utilisateur.
- Temps de traitement : Une fois l'entrée traitée, la phase suivante est le temps de traitement. Cela implique l'exécution des gestionnaires d'événements associés à l'interaction. Ces gestionnaires d'événements sont généralement des fonctions JavaScript qui s'exécutent en réponse à l'action de l'utilisateur. Le temps de traitement peut varier en fonction de la complexité des tâches effectuées par ces gestionnaires.
- Délai de présentation : la phase suivante est le délai de présentation après le traitement de l'entrée. Il s'agit du temps nécessaire à la page pour restituer la réponse visuelle à l'interaction. Il comprend des tâches telles que le recalcul de la mise en page de la page, l'exécution des modifications CSS et le repeintage du contenu de la page pour refléter l'interaction.
- Mise à jour visuelle : L'étape finale est la mise à jour visuelle de la page, qui est le point culminant du processus d'interaction. C'est à ce moment-là que l'utilisateur voit le résultat de son action, comme l'ouverture d'un menu, une indication de soumission de formulaire ou tout autre changement visuel sur la page.
- Calcul de l'INP : l'INP total est calculé en additionnant le délai de saisie, le temps de traitement et le délai de présentation. Cela donne une mesure complète du temps écoulé entre l'interaction initiale de l'utilisateur et la prochaine mise à jour visuelle de la page.
Quel est un bon score INP ?
Pour garantir une expérience utilisateur satisfaisante (UX), les sites Web doivent viser un INP de 200 millisecondes ou moins. Ce seuil est considéré comme un bon seuil pour la plupart des utilisateurs, indiquant que le site Web est réactif et que les interactions sont traitées rapidement.
Lors de l'évaluation des scores INP, il est important de prendre en compte la variabilité des expériences utilisateur selon les appareils et les conditions. Par conséquent, une approche pratique consiste à mesurer le 75e percentile des chargements de pages, en tenant compte à la fois des appareils mobiles et des ordinateurs de bureau. Cette méthode permet d'obtenir une vue plus complète de l'expérience utilisateur, garantissant que la majorité des utilisateurs bénéficient d'une expérience réactive.
Un score INP élevé peut avoir un impact significatif sur l'expérience utilisateur, en particulier sur les sites Web comportant de nombreux éléments interactifs, tels que des éditeurs de texte ou des jeux. Dans ces cas, un score INP élevé indique un risque de mauvaise expérience utilisateur en raison de réponses tardives aux interactions de l'utilisateur. À l'inverse, un score INP faible suggère que le site Web est systématiquement réactif, contribuant à une expérience utilisateur plus fluide et plus agréable.
Différence entre le premier délai d'entrée (FID) et l'interaction avec la prochaine peinture (INP)
Il est essentiel pour les développeurs Web et les propriétaires de sites Web qui souhaitent optimiser l'expérience utilisateur (UX) de comprendre la différence entre le First Input Delay (FID) et l'Interaction to Next Paint (INP). Bien que ces deux mesures soient conçues pour mesurer l'interactivité et la réactivité, elles se concentrent sur différents aspects des interactions des utilisateurs.
Délai de première entrée (FID)
Le délai de première entrée mesure le temps écoulé entre le moment où un utilisateur interagit pour la première fois avec une page (comme cliquer sur un lien ou appuyer sur un bouton) et le moment où le navigateur est réellement en mesure de commencer à traiter les gestionnaires d'événements en réponse à cette interaction.
Le FID permet de comprendre l'expérience utilisateur pendant la phase de chargement d'une page. Tout est une question d'impression initiale : la rapidité avec laquelle une page peut commencer à traiter une interaction après qu'un utilisateur ait essayé d'interagir avec elle pour la première fois.
Prenons par exemple un utilisateur qui clique sur un menu déroulant dès que la page se charge. Le FID mesure le temps écoulé entre le clic de l'utilisateur et le moment où le menu déroulant commence à apparaître. Si le navigateur est occupé à charger la page, il peut y avoir un retard notable, ce qui peut entraîner une mauvaise expérience utilisateur.
Interaction avec Next Paint (INP)
L'interaction avec la page suivante (INP), en revanche, est une mesure plus complète. Elle mesure la latence de toutes les interactions de l'utilisateur pendant la durée de vie d'une visite de page, et pas seulement la première. L'INP capture toute la durée entre le moment où l'utilisateur interagit avec la page et le moment où la réponse visuelle de cette interaction est affichée à l'écran. Cela inclut le temps nécessaire au délai de saisie, au traitement de l'interaction et au délai de présentation.
Pour illustrer ce propos, imaginons un utilisateur interagissant avec différents éléments d'une page Web, comme saisir des informations dans un champ de recherche, sélectionner des éléments dans un menu et cliquer sur des liens. L'INP mesurerait la réactivité de chacune de ces interactions, offrant ainsi une vue plus large de l'interactivité globale de la page tout au long de la visite de l'utilisateur.
Comment mesurer l'interaction avec la peinture suivante (INP)
L'INP ne peut être mesuré qu'avec des outils de terrain car il nécessite des données d'interaction utilisateur réelles. Ces outils comprennent :
- PageSpeed Insights : fournit une interface conviviale pour afficher les scores INP. PageSpeed Insights fournit le score du 75e percentile pour les 28 derniers jours.
- Google BigQuery (CrUX Dashboard) : offre un contexte plus historique des scores INP. Google mesure toutes les interactions des utilisateurs réels de Chrome avec une page et les stocke dans l'ensemble de données CrUX.
- Outil Lighthouse : utile pour déboguer INP en temps réel pendant le développement.
Bien que l'ensemble de données CrUX soit la source finale des mesures INP, il est hautement anonymisé et ne fournit pas de surveillance en temps réel ni de filtrage détaillé. Les consultants en performances Web s'appuient généralement sur la surveillance des utilisateurs réels (RUM) pour obtenir des informations plus détaillées.
Comment optimiser l'interaction avec Next Paint ?
L'optimisation de l'interaction avec Next Paint (INP) est essentielle pour améliorer la réactivité et l'expérience utilisateur (UX) d'un site Web. Voici des conseils détaillés sur la façon d'optimiser l'INP :
1. Minimisez le traitement du processeur sur votre page
- Exécution de code asynchrone : exécutez davantage de votre code de manière asynchrone pour garantir que l'utilisateur obtient une mise à jour immédiate de l'interface utilisateur, même si certains traitements en arrière-plan sont toujours en cours.
- Profil du code du site Web : utilisez des outils tels que le profileur de performances DevTools pour comprendre ce qui se passe sur le thread principal et identifier les domaines à optimiser.
- Examiner les scripts tiers : évaluez si les scripts tiers ont un impact sur la réactivité de votre site et configurez-les ou différez-les si nécessaire.
2. Réduisez le délai d'entrée
- Décomposer les tâches du thread principal : réduisez et décomposez l’activité du processeur en arrière-plan sur le thread principal pour minimiser le délai d’entrée.
- Mesure du temps de blocage total (TBT) : utilisez cette mesure dans les données de laboratoire pour identifier les activités en arrière-plan qui pourraient bloquer les interactions des utilisateurs.
- Optimisez le code tiers : si les scripts tiers provoquent des retards, explorez les options permettant de réduire leur impact ou chargez-les uniquement lorsque cela est nécessaire.
3. Optimisez le temps de traitement
- Exécution efficace du code : recherchez où le navigateur passe la majeure partie de son temps et optimisez ces parties de votre application.
- Évitez les rendus inutiles : dans des frameworks tels que React, assurez-vous que les composants ne sont pas rendus inutilement.
- Réduction du travail de mise en page : si une quantité importante d'activité du processeur est le résultat du travail de mise en page, trouvez des moyens de réduire les mises en page et les repeintures.
4. Mettre à jour l'interface utilisateur avant un traitement intensif
- Rétroaction immédiate : fournissez une rétroaction visuelle (comme un spinner) avant de démarrer des tâches gourmandes en ressources processeur.
- Utiliser des travailleurs Web : pour un traitement JavaScript lourd, envisagez d’utiliser des travailleurs Web pour exécuter des tâches en dehors du thread principal.
5. Évitez de bloquer les dialogues
- Éléments d'interface utilisateur non bloquants : remplacez les boîtes de dialogue d'alerte, de confirmation et d'invite natives, qui bloquent le thread principal, par des éléments d'interface utilisateur non bloquants.
6. Réduisez le délai de présentation
- Simplifiez les mises à jour des pages : si le rendu du contenu de la page est lent, concentrez-vous sur l'affichage du contenu important en premier pour diffuser l'image suivante plus rapidement.
- Gérer les interactions en file d’attente : soyez conscient de la manière dont les interactions en file d’attente peuvent augmenter le délai de présentation et gérez-les efficacement.
7. Bonnes pratiques générales
- Surveillez régulièrement les performances : surveillez en permanence les performances de votre site à l'aide d'outils tels que Google PageSpeed Insights, Lighthouse et des solutions de surveillance des utilisateurs réels (RUM).
- Restez à jour avec les CWV : suivez les changements dans les principales mesures Web Vitals et ajustez vos stratégies d'optimisation en conséquence.
En mettant en œuvre ces stratégies, vous pouvez améliorer considérablement l'INP de votre site Web, ce qui vous permettra d'obtenir une expérience plus réactive et plus conviviale. N'oubliez pas que l'optimisation de l'INP est un processus continu qui nécessite une surveillance et des ajustements réguliers en fonction des modèles d'interaction des utilisateurs et des mises à jour du site Web.
Réflexions finales
L'interaction avec la prochaine page (INP) est une mesure clé pour évaluer la réactivité des pages Web. Elle offre une vue complète de la rapidité avec laquelle un site répond aux interactions des utilisateurs, dépassant la portée du First Input Delay (FID) en mesurant la latence de toutes les interactions, et pas seulement de la première.
Nous avons expliqué comment mesurer l'INP à l'aide d'outils tels que PageSpeed Insights et Lighthouse et exploré des stratégies d'optimisation, telles que la minimisation du traitement du processeur et la réduction du délai d'entrée. Ces étapes sont essentielles pour améliorer l'expérience utilisateur (UX) et les performances du site Web.
L'optimisation des performances du site peut également aider les éditeurs à améliorer leurs revenus publicitaires . Après tout, un site bien optimisé est plus susceptible d'encourager les audiences à le visiter plusieurs fois. Si vous cherchez à améliorer la monétisation de votre site, pensez à nous contacter pour en savoir plus sur la façon dont nous avons aidé plus de 350 éditeurs dans 60 pays à augmenter leurs revenus depuis 2015.
FAQ
Que signifie l’interaction utilisateur ?
L'interaction utilisateur fait référence à toute action qu'un utilisateur effectue sur une page Web, comme cliquer sur un bouton, appuyer sur un lien ou saisir du texte dans un champ. Ces interactions permettent aux utilisateurs de communiquer avec un site Web, en déclenchant une réponse ou une modification sur la page. Les interactions utilisateur sont fondamentales pour la fonctionnalité des applications Web, car elles déclenchent des événements qui conduisent à des modifications dynamiques, des mises à jour de contenu ou une navigation au sein du site.
L'INP est-il une mesure essentielle des Web Vitals ?
L'INP remplacera le First Input Delay (FID) en tant que mesure Core Web Vitals en mars 2024. Les CWV sont un ensemble de mesures que Google utilise pour évaluer l'expérience utilisateur (UX) d'une page Web, en se concentrant sur des aspects tels que le chargement de la page, l'interactivité et la stabilité visuelle.
Quelles interactions utilisateur l'INP prend-il en compte ?
L'INP prend en compte les interactions telles que les clics de souris, les appuis sur un écran tactile et les pressions sur les touches. Il s'agit d'actions directes que les utilisateurs effectuent pour interagir avec un site Web. L'INP n'inclut pas les interactions passives telles que le survol ou le défilement. La mesure se concentre sur les engagements actifs où l'utilisateur attend une réponse du site Web, ce qui en fait une mesure précieuse des performances interactives d'un site.
Que sont les cookies ?
Les cookies sont de petits fichiers de données stockés sur l'appareil d'un utilisateur par un navigateur Web lors de la visite d'un site Web. Ils sont utilisés pour mémoriser des informations sur l'utilisateur, telles que les informations de connexion, les préférences et l'historique de navigation.
Les cookies permettent de personnaliser l'expérience utilisateur, de maintenir les états de session et de suivre le comportement des utilisateurs à des fins d'analyse et de publicité. Bien qu'ils soient essentiels pour de nombreuses fonctionnalités Web, les cookies soulèvent également des questions de confidentialité, ce qui conduit à des réglementations sur leur utilisation et le consentement des utilisateurs.
Quel est un exemple d’interaction avec Next Paint ?
Un exemple d'interaction avec Next Paint serait un utilisateur qui clique sur un bouton « Envoyer » dans un formulaire et le temps nécessaire pour que le message de confirmation apparaisse à l'écran. L'INP mesure la durée entre le clic et la mise à jour visuelle de la confirmation. Cette mesure permet d'identifier les interactions lentes, ce qui est essentiel si vous souhaitez améliorer l'expérience utilisateur de votre site.