Interaction avec Next Paint (INP) : guide technique complet et norme d'optimisation

L'interaction avec Next Paint (INP) est une métrique officielle de Google Core Web Vital introduite pour évaluer la réactivité globale de l'interface des pages Web.

Contrairement au First Input Delay (FID), qui évaluait uniquement l'interaction initiale lors du chargement de la page, INP observe la latence de toutes les interactions utilisateur (clics, tapotements et saisies au clavier) qui se produisent tout au long de la durée de vie de la visite d'un utilisateur sur une page.

Résumé de la réponse en premier

L'interaction avec Next Paint (INP) est une métrique Core Web Vital qui mesure le temps écoulé entre le moment où un utilisateur interagit avec une page (en cliquant, en appuyant ou en appuyant sur une touche) jusqu'à ce que le navigateur présente le cadre visuel mis à jour à l'écran.La latence INP se compose de trois sous-parties : le délai d'entrée, la durée de traitement et le délai de présentation.Un score INP réussi est de 200 millisecondes ou moins au 75e centile des visites d'utilisateurs réels.En mars 2024, INP a officiellement remplacé le First Input Delay (FID) dans les algorithmes de classement de recherche de Google.

Seuils de score INP et échelle de notation

Pour offrir une expérience utilisateur réactive, les pages Web doivent respecter les seuils Core Web Vitals suivants pour l'INP évalués au 75e centile des visites sur le terrain des utilisateurs réels :

• Bon : $\le 200\text {ms} $ (Vert) - Réponse rapide et fluide de l'interface utilisateur qui semble instantanée aux utilisateurs.
• Amélioration nécessaire : $> 200\text {ms} $ et $\le 500\text {ms} $ (ambre) – Retard notable lors des clics ou des pressions qui a un impact sur l'engagement des utilisateurs.
• Mauvais : $> 500\text {ms} $ (Rouge) - Gel sévère de l'interface et blocage du thread principal qui entraînent la frustration des utilisateurs et des taux de rebond élevés.

Les trois composants de la latence d’interaction INP

Lorsqu'un utilisateur interagit avec un élément d'une page Web, la latence totale d'interaction mesurée par INP se compose de trois phases séquentielles :

1. Délai d'entrée : temps écoulé entre le moment où l'utilisateur lance l'interaction physique (clic, appui ou pression sur une touche) et le moment où le thread principal du navigateur commence à exécuter les gestionnaires d'événements associés.Le délai d'entrée est principalement dû à la congestion du thread principal due à de longues tâches JavaScript en arrière-plan exécutées lors du chargement de la page ou du nouveau rendu des composants.
2. Durée du traitement : temps passé à exécuter le code JavaScript dans tous les écouteurs d'événements enregistrés pour cette interaction (tels que onclick , onkeydown ou les gestionnaires de mise à jour d'état réactif du framework).
3. Délai de présentation : temps écoulé après la fin des gestionnaires d'événements jusqu'à ce que le navigateur ait fini de calculer le recalcul du style, la mise en page, de peindre les pixels mis à jour et d'afficher le cadre visuel suivant sur le matériel d'affichage de l'utilisateur.

Mathématiquement, la latence totale de l'INP pour une seule interaction est exprimée comme suit :

$$\text{Latence INP} = \text{Délai d'entrée} + \text{Durée de traitement} + \text{Délai de présentation}$$

Pourquoi Google a remplacé FID par INP en mars 2024

Le délai de première entrée (FID) mesurait uniquement la composante du délai d'entrée de la toute première interaction sur une page.Bien que le FID ait permis d'identifier les pages sur lesquelles le blocage du thread principal empêchait l'interaction initiale, il souffrait de deux limitations techniques majeures :

• Portée d'interaction unique : FID a ignoré toutes les interactions utilisateur ultérieures après le chargement de la page, ne parvenant pas à capturer la lenteur lors de la navigation côté client d'une application monopage (SPA) complexe.
• Mesure de latence incomplète : le FID a mesuré uniquement le délai d'entrée, ignorant entièrement le temps de traitement et le délai de présentation.Un gestionnaire d'événements dont l'exécution a pris 2 000 ms a reçu un score FID satisfaisant si le délai d'entrée initial était inférieur à 50 ms.

En mars 2024, Google a officiellement remplacé FID par INP en tant que facteur de classement officiel Core Web Vital.INP évalue le 75e percentile de toutes les interactions au cours d'une session, fournissant ainsi une évaluation beaucoup plus complète et réaliste de l'expérience utilisateur réelle dans les applications Web modernes.

Interactions utilisateur éligibles et événements non éligibles

INP mesure les interactions utilisateur discrètes où l'utilisateur attend un retour visuel immédiat.Comprendre quelles interactions comptent pour l’INP est essentiel pour le profilage diagnostique :

Interactions mesurées

• Clics de souris : clic sur des boutons, des liens, des contrôles de formulaire ou des composants interactifs personnalisés.
• Touchscreen Taps : en appuyant sur des éléments sur des appareils mobiles ou des tablettes.
• Appuyez sur le clavier : appuyez sur des touches du clavier physique ou virtuel (telles que Enter , Space ou des touches alphanumériques dans les saisies de texte).

Événements non mesurés

• Défilement et panoramique : le défilement d'une page ou le panoramique d'un composant cartographique ne déclenche pas la mesure INP.
• Survol : déplacer le curseur de la souris sur un élément sans cliquer est exclu de l'INP.
• Animations de chargement de page : les animations CSS qui se déclenchent automatiquement sans intervention de l'utilisateur ne comptent pas dans l'INP.

Stratégies techniques éprouvées pour optimiser les scores INP élevés

Pour réduire la latence INP en dessous du seuil de 200 ms, les équipes d'ingénierie doivent mettre en œuvre les optimisations techniques suivantes :

1. ** Séparez les tâches longues du thread principal ** : utilisez requestIdleCallback() , setTimeout() ou scheduler.yield() pour diviser les tâches d'exécution de plus de 50 ms en morceaux plus petits, permettant au navigateur de traiter les entrées utilisateur entrantes immédiatement entre les blocs d'exécution de tâches.
2. Optimiser les mises à jour de l'état du framework : dans les applications Vue 3 et Nuxt 4, différez les rendus non critiques de l'interface utilisateur en utilisant les limites des composants asynchrones ou les mises à jour de référence réactives différées.
3. Minimiser la mise en page : évitez de lire les propriétés géométriques du DOM (telles que offsetHeight ou getBoundingClientRect() ) immédiatement après la mutation des éléments DOM, ce qui force un recalcul de mise en page synchrone.
4. Réduire la profondeur de l'arborescence DOM : les arborescences DOM surdimensionnées augmentent le calcul du style et les coûts de mise en page pendant le délai de présentation.Maintenez le nombre total d’éléments DOM en dessous de 1 500 nœuds par page.
5. Optimiser les scripts tiers : les scripts tiers lourds (analyses, réseaux publicitaires, widgets de discussion client) détournent fréquemment le fil de discussion principal.Différez ou déchargez les scripts tiers non essentiels.

Surveillance continue de l'INP avec SimpleOps

SimpleOps suit en permanence les performances de l'INP en capturant les métriques de l'ensemble de données de terrain du rapport Chrome UX (CrUX) ainsi que les audits synthétiques Lighthouse.SimpleOps alerte automatiquement votre équipe chaque fois que l'INP du 75e centile de votre site Web dépasse 200 ms, garantissant ainsi que votre application reste rapide, fluide et optimisée pour les classements des moteurs de recherche.