Comment améliorer et surveiller l’interaction avec Next Paint

Google a annoncé que le nouveau Interaction avec la peinture suivante (INP) deviendra l’une des trois Éléments essentiels du Web métriques le 12 mars 2024. Il remplace l’ancien Première métrique de délai d’entrée.

Il s’agit du plus grand changement apporté aux éléments essentiels du Web depuis que Google les a introduits pour la première fois comme facteur de classement en 2021.

Qu’est-ce que l’interaction avec Next Paint ?

Les trois métriques Core Web Vitals mesurent chacune un aspect différent de l’expérience des utilisateurs sur votre site Web. INP évalue la rapidité avec laquelle votre site Web répond aux interactions des utilisateurs.

Par exemple, si un visiteur clique sur un bouton de votre site Web et que le contenu de la page mise à jour prend une seconde pour s’afficher, cela représente une mauvaise expérience utilisateur.

L’interaction avec Next Paint mesure le temps qui s’écoule entre l’interaction de l’utilisateur et la prochaine fois que le navigateur peut mettre à jour le contenu à l’écran. Plus le traitement CPU est nécessaire pour gérer l’interaction et afficher le nouveau contenu, plus le score INP sera mauvais.

Évaluation du score INP

L’interaction avec Next a-t-elle un impact sur le classement Google ?

Google a confirmé que le Les Core Web Vitals sont un facteur de classement. Cela signifie que si votre site obtient de moins bons résultats sur le score INP, il peut être moins bien classé que ses concurrents qui obtiennent de bons résultats sur les trois indicateurs Web Vitals.

Pour obtenir un bon score, l’INP doit être inférieur à 200 millisecondes. Un retard supérieur à 500 millisecondes est considéré comme médiocre. Votre SEO est progressivement impacté à mesure que l’INP se dégrade entre les seuils Bon et Mauvais.

Comment Google sait-il à quelle vitesse votre site Web répond aux interactions des utilisateurs ? Ces données sont collectées auprès de vrais utilisateurs de Chrome dans le cadre du Rapport sur l’expérience utilisateur Chrome (CrUX).

Interaction avec le diagramme Next Paint

Comment tester l’interaction avec Next Paint sur votre site Web

Vous voulez savoir dans quelle mesure votre site Web se comporte bien selon la métrique INP et d’autres Core Web Vitals ? Exécuter un test gratuit de Core Web Vitals sur votre site Web est un moyen rapide de vérifier. Entrez simplement l’URL d’une page et attendez le résultat du test.

Les données d’interaction réelle de l’utilisateur avec Next Paint peuvent être trouvées dans le Éléments essentiels du Web languette. La tendance sur 25 semaines vous permet de savoir si la page s’améliore ou se détériore au fil du temps.

Les données présentées ici proviennent du rapport Google CrUX.

Historique des données Google CrUX

Pour avoir une vue plus large des différents groupes de pages de votre site Web, vous pouvez également consulter le Onglet Core Web Vitals dans Google Search Console. Ici, vous verrez combien de pages sont affectées par des problèmes INP ou non. réussir l’évaluation Core Web Vitals.

Interaction avec Next Paint dans Google Search Console

Malheureusement, les données fournies par Google ne sont pas très nuancées et, en raison du mécanisme de regroupement de pages, vous ne pourrez peut-être pas déterminer quelles pages spécifiques sont affectées par une interaction lente avec Paint suivant.

Les données Google CrUX sont également agrégées sur 28 jours. Cela signifie que vous devrez attendre plusieurs semaines pour voir l’impact d’éventuelles optimisations.

Pour obtenir un aperçu plus approfondi, un dédié outil de surveillance Core Web Vitals pour utilisateurs réels comme DebugBear peut vous aider. De cette façon, vous obtenez des données Core Web Vitals détaillées sur l’ensemble de votre site Web, mises à jour dès qu’un changement est déployé.

Tableau de bord DebugBear Core Web Vitals

Comment accélérer les interactions et améliorer l’INP ?

Pour améliorer les scores INP sur votre site Web, vous devez savoir quel traitement CPU est impliqué dans une interaction utilisateur. L’INP peut être divisé en trois composantes :

  • Délai d’entrée : tâches en arrière-plan qui empêchent le navigateur de gérer une interaction jusqu’à ce que les tâches soient terminées
  • Temps de traitement : exécution du code qui gère l’interaction de l’utilisateur et planifie les mises à jour de l’interface utilisateur
  • Délai de présentation : une fois les mises à jour de l’interface utilisateur planifiées, le navigateur doit mettre à jour la mise en page et présenter le nouveau contenu.

L’onglet performances dans Chrome DevTools montre combien de temps les interactions sur la page ont duré et ce qui était responsable du traitement du processeur.

INP dans l'onglet Performances de Chrome DevTools

Les données dans le Onglet Performances de DevTools peut être difficile à lire, vous aurez donc généralement besoin d’un développeur impliqué. Mais il fournit une explication pour chaque milliseconde passée par le navigateur à gérer l’événement.

Par exemple, vous constaterez peut-être que :

  • Le code tiers s’exécute en arrière-plan et ralentit les interactions.
  • Le code JavaScript que votre site Web exécute en réponse à une interaction doit être optimisé.
  • Vous pouvez planifier les tâches du processeur plus efficacement pour réduire la durée pendant laquelle les interactions sont bloquées.

Surveillance réelle des utilisateurs avec DébogageOurs vous montrera quel composant INP contribue le plus à la mauvaise réactivité de votre site Web.

Répartition des composants INP

Vous constaterez également souvent que les interactions prennent plus de temps lors du processus de chargement initial du site Web. En effet, lorsqu’une page commence à se charger, de nombreuses petites tâches sont exécutées en arrière-plan pour configurer la page, par exemple le chargement d’annonces ou l’initialisation d’un formulaire ou d’un widget de discussion.

DebugBear montre une répartition de la rapidité des interactions à différentes étapes et de la fréquence des interactions au cours de ces périodes (indiquée par la hauteur de la barre).

Répartition de l'étape de charge INP

Si votre site Web prend en charge le API d’images d’animation longuesvous pourrez également voir les scripts spécifiques et les fonctions JavaScript qui ralentissent les interactions de vos visiteurs.

Données d'attribution DebugBear INP

Comment puis-je savoir quelles interactions de page sont affectées par une INP lente ?

Si vous souhaitez optimiser votre code et tester les interactions sur votre site Web, vous devez savoir avec quels éléments les utilisateurs interagissent le plus souvent sur votre site Web et quelles interactions entraînent souvent un INP lent.

Il ne s’agit pas de données que vous pouvez obtenir à partir des rapports Google CrUX, mais d’un outil de surveillance dédié Core Web Vitals comme DebugBear. collectera ces informations pour vous.

Répartition des éléments DebugBear INP

Vous pouvez filtrer les données par page, type d’appareil et bien d’autres facteurs pour mieux comprendre comment les visiteurs perçoivent votre site Web. DébogageOurs les rapports peuvent vous donner des conseils ciblés sur la façon d’améliorer l’interaction avec Next Paint.

Comment surveiller l’interaction avec Next Paint et d’autres Core Web Vitals

Une véritable solution de surveillance des utilisateurs (RUM) peut vous aider à vous préparer à la nouvelle métrique Interaction to Next Paint et vous aider à rester au top de vos Core Web Vitals au fil du temps.

Essayez DebugBear avec un essai gratuit de 14 jours. Mesurez en permanence vos données Web vitales et voyez quelles pages bénéficieraient le plus des optimisations.

Ligne de tendance et histogramme DebugBear INP

Simplement installer l’extrait d’analyse DebugBear pour avoir un aperçu de vos expériences de visiteurs. Évitez le délai de 28 jours associé aux données Web Vitals de Google et obtenez des rapports détaillés que vous pouvez utiliser pour offrir une meilleure expérience de site Web et un meilleur classement dans Google.

Répartition de DebugBear INP par page

Newsletter

Rejoignez notre newsletter pour des astuces chaque semaine