Qu’est-ce que l’INP et comment l’améliorer ?

[Mise à jour du 11 juillet 2023] L’INP est une métrique de mesure de performance web qui mesure la réactivité d’une page web, c’est-à-dire la rapidité avec laquelle elle réagit à l’interaction de l’utilisateur. Cette métrique développée par Google deviendra l’un des Core Web Vitals.

Les Core Web Vitals sont des métriques de Google pour évaluer l’UX (User Experience) d’un site. Ils regroupent trois critères : LCP, CLS et FID.

Alors que la LCP et la CLS varient d’un site à un autre, la FID reste pratiquement le même pour 99,9 % des sites internet. Au vu de ce manque d’intérêt, Google a pensé à le remplacer par un critère plus utile. L’INP est désigné comme son remplaçant.

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

L’INP est l’acronyme de « Interaction to Next Paint » (Interaction avec la peinture suivante en français). Pour comprendre l’INP, il faut d’abord comprendre ce qu’est une interaction.

Qu’est-ce qu’une interaction ?

Une interaction correspond à une entrée de l’utilisateur et à la réponse de l’appareil.

En ce qui concerne l’INP, une interaction correspond à l’une des actions suivantes :

• appuyer une touche sur le clavier ou sur l’écran (pour les écrans tactiles)
• toucher un élément interactif sur un dispositif équipé d’un écran tactile
• utiliser la souris pour cliquer sur un élément interactif

Une interaction peut également regrouper plusieurs évènements.

Une frappe sur le clavier regroupe par exemple des évènements minuscules/majuscules. Tous les éléments d’une interaction forment une interaction logique avec l’utilisateur.

Une interaction se fait en trois phases.

Lorsque l’utilisateur fait une entrée, l’appareil reçoit d’abord l’entrée, effectue le traitement demandé avant de rendre et peindre l’image suivante.

Que contient l’interaction avec la peinture suivante ?

L’INP est une métrique de mesure du temps qui sépare le moment de l’interaction de l’utilisateur et le moment de la prochaine mise à jour de l’interface utilisateur (User Interface).

💡 C’est, par exemple, le temps entre le moment où l’utilisateur clique sur un bouton pour changer d’image et le moment où la nouvelle image s’affiche.

Ce temps correspond à la somme des délais des trois phases d’une interaction :

1. Le délai d’entrée. Il regroupe l’ensemble des tâches s’exécutant en arrière-plan sur la page et qui empêche l’exécution du gestionnaire d’évènements. C’est le temps qui sépare les moments d’interaction de l’utilisateur et d’exécution des gestionnaires d’évènements.
2. Le temps de traitement. C’est le temps que met le navigateur à exécuter des gestionnaires d’évènements en JavaScript. Il peut regrouper plusieurs gestionnaires d’évènements, par exemple des évènements keyup et keydown.
3. Le délai de présentation. Il correspond au temps écoulé entre la fin de l’exécution des gestionnaires d’éléments et l’affichage des éléments de la page.

Comment apprécier la valeur de l’INP ?

Il est difficile d’apprécier la réactivité d’une page.

D’une part, le site doit être optimisé pour offrir une bonne expérience aux visiteurs. D’autre part, il faut tenir compte du fait que les appareils (appareils bas de gamme ou haut de gamme) que les utilisateurs utilisent pour se connecter ne possèdent pas les mêmes capacités.

Pour effectuer une mesure pertinente, il faut donc définir des attentes réalisables même sur des appareils bas de gamme.

Dans cet ordre d’idée, il est nécessaire de considérer une métrique de réactivité adaptée pour des cas d’utilisation larges.

L’INP joue parfaitement ce rôle et peut être utilisé pour apprécier la réactivité d’une page.

On l’obtient en sélectionnant l’une des plus longues interactions produites lorsqu’un utilisateur visite une page. L’INP correspond à l’interaction ayant la plus mauvaise latence dans le cas d’une page enregistrant moins de 50 interactions. Pour celles qui enregistrent un grand nombre d’interactions, sa valeur correspond au 98^e percentile de la latence d’interaction.

Elle admet trois fourchettes de valeurs qui conduisent à trois conclusions différentes :

1. Lent. Pour les valeurs supérieures à 500 ms, l’INP indique que la page a une très mauvaise réactivité.
2. Demande d’amélioration. Les valeurs de l’INP supérieures à 200 ms et inférieures ou égales à 500 ms indiquent que la page est moyennement réactive, mais qu’il faut apporter des améliorations pour l’optimiser.
3. Rapide. Une valeur de l’INP inférieure ou égale à 200 ms indique que la page a une bonne réactivité. La page répondra donc de manière fiable à tout moment.

Comment mesurer l’INP ?

En tant que métrique expérimentale, tous les outils de mesure ne prennent pas encore en charge l’INP.

Il est actuellement possible de la mesurer soit avec des données de laboratoire, soit avec des données de terrain. Vous avez un certain nombre d’outils à votre disposition pour y parvenir.

Toutefois, vous devez savoir que la meilleure façon de mesurer l’INP de votre site internet est de collecter des données sur le terrain (Field data), auprès d’utilisateurs réels.

Les outils de terrain pour mesurer l’INP

Comme outils de terrain, nous pouvons citer :

• PageSpeed Insights
• web-vitals JavaScript library
• Chrome User Experience Report (CrUX)
• via BigQuery dans CrUX dataset, table experimental.interaction_to_next_paint
• CrUX API via experimental_interaction_to_next_paint
• CrUX Dashboard

Notez que la collecte de métriques INP sur le terrain ne fonctionne que sur les navigateurs qui prennent entièrement en charge l’API Event Timing y compris sa propriété interactionIdpropriety.

Les outils de laboratoire (Lab data) pour mesurer l’INP

Voici quelques outils au choix :

• Lighthouse Panel dans DevTools, disponible en « Timespan Mode »
• Lighthouse User Flows
• Lighthouse NPM module
• Web Vitals extension pour Chrome

Comment mesurer l’Interaction to Next Paint (INP) en JavaScript ?

Il peut s’avérer complexe d’écrire votre propre code PerformanceObserver pour mesurer l’INP.

C’est pourquoi il est recommandé d’utiliser le web-vitals JavaScript library pour la mesure de l’INP en JavaScript. Cet élément exporte une fonction onIP et fait la mesure pour vous.

Vous pouvez ensuite récupérer les données INP avec la version 3 (version beta) de web-vitals. Voici la commande pour l’installer :

npm install web-vitals@next –save

Vous pouvez ensuite utiliser la méthode onINP pour obtenir l’INP d’une page web :

import {onINP} from ‘web-vitals’;

onINP(({value}) => {

// Log the value to the console, or send it to your analytics provider.

console.log(value);

});

onIP accepte une fonction comme argument, tout comme les autres méthodes exportées par web-vitals. Il transmettra les données des métriques à la fonction qui lui a été fournie. Vous pourrez ensuite transférer ces données vers un point de terminaison pour la collecte et l’analyse des données.

Enfin, voici un code proposé par Jeremy Wagner que vous pouvez copier et modifier dans votre navigateur (si nécessaire) pour avoir une idée de ce à quoi ressemblent les plus longues interactions sur votre page :

let maxDuration = 0;

new PerformanceObserver(list => {

for (const entry of list.getEntries()) {

// Comment this out to show ALL event entry types (useful e.g. on Firefox).

if (!entry.interactionId) continue;

if (entry.duration > maxDuration) {

// New longest Interaction to Next Paint (duration).

maxDuration = entry.duration;

console.log(`[INP] duration: ${entry.duration}, type: ${entry.name}`, entry);

} else {

// Not the longest Interaction, but uncomment the next line if you still want to see it.

// console.log(`[Interaction] duration: ${entry.duration}, type: ${entry.name}`, entry);

}

}

}).observe({

type: ‘event’,

durationThreshold: 16, // Minimum supported by the spec.

buffered: true

});

Comment améliorer son INP ?

Si la valeur INP indique que votre réactivité est mauvaise ou demande des améliorations, vous devrez mettre en place des actions pour améliorer ces valeurs.

Des valeurs INP élevées signalent une grande dépendance de la page soit au JavaScript soit à d’autres tâches non JavaScript (cases à cocher, boutons radio, éléments HTML, etc.).

Ces dernières peuvent s’exécuter en même temps que les interactions de l’internaute. Le site web.dev propose des pistes d’amélioration de l’Interaction to Next Paint (INP).

Comment améliorer son INP au moment du démarrage de la page ?

L’INP peut être un facteur lors du démarrage de la page.

En réalité, les utilisateurs peuvent essayer d’interagir avec une page avant même qu’elle ait fini de récupérer le JavaScript pour configurer les gestionnaires d’évènements qui produisent l’interactivité nécessaire au fonctionnement de la page.

Pour améliorer la réactivité du site lors du chargement de la page, vous avez plusieurs possibilités :

• Éliminer le code inutile avec Coverage tool dans Chrome’s DevTools.
• Identifier des opportunités pour fractionner le code (code splitting) afin de charger paresseusement (lazyloading) le JavaScript non indispensable au chargement de la page.
• Repérer les scripts tiers lents qui chargent au moment du démarrage du chargement de la page.
• Identifier les tâches longues (long tasks) que vous pouvez optimiser à l’aide du profileur de performances.
• Assurez-vous de ne pas solliciter à l’excès votre navigateur une fois que le JavaScript a fini de charger. Autrement dit, vous devez éviter de demander un nouveau rendu de l’arborescence de composants trop lourds, trop d’effets CSS lourds, des décodages d’image volumineux, etc.

Comment améliorer l’INP d’une page après son démarrage ?

Le calcul de l’INP prend en compte des données collectées tout au long du cycle de vie de la page.

Il peut donc également être influencé par les évènements qui ont lieu après le démarrage de la page. Si votre site web se retrouve dans ce cas, voici quelques pistes à explorer pour trouver des solutions d’améliorer votre INP :

• Hiérarchiser correctement les tâches avec l’API postTask
• Utiliser requestIdleCallback pour remettre les tâches non essentielles pour le moment où le navigateur est inactif.
• Évaluer les interactions discrètes avec un profileur de performance (performance profiler) et identifier des tâches longues à optimiser.
• Évaluer l’impact des scripts tiers sur la réactivité de vos pages grâce à un audit.