Interaction to Next Paint INP Métrique

Sommaire de l'article

Vitesse et performance : tout savoir sur la métrique Interaction to Next Paint (INP)

Introduction

La vitesse et la performance d'un site web sont des éléments essentiels pour garantir une expérience utilisateur optimale et améliorer le référencement naturel. Parmi les métriques utilisées pour évaluer la qualité de l'expérience, l’Interaction to Next Paint (INP) occupe aujourd’hui une place centrale. Cette métrique fait partie des Core Web Vitals et sert à mesurer la réactivité réelle d’une page face aux interactions des utilisateurs.

Depuis mars 2024, l’INP a officiellement remplacé le First Input Delay (FID) dans les Core Web Vitals, ce qui en fait un indicateur stratégique pour toute stratégie de performance web et de SEO technique. Comprendre, mesurer et optimiser cette métrique est devenu incontournable pour les développeurs, intégrateurs, spécialistes UX et consultants SEO.

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

L’Interaction to Next Paint mesure le temps écoulé entre le moment où un utilisateur interagit avec une page (par exemple un clic, un tapotement ou une frappe clavier) et le moment où l’interface affiche visuellement le résultat de cette interaction, via la prochaine mise à jour d’affichage du navigateur.

Concrètement, l’INP ne se contente pas de mesurer un simple délai technique isolé. Il s’intéresse à toute la chaîne de traitement de l’interaction :

le délai d’entrée (input delay), entre l’action de l’utilisateur et le début de l’exécution des gestionnaires d’événements ;
le temps de traitement (processing time), nécessaire pour exécuter le code associé à l’interaction ;
le délai de présentation (presentation delay), jusqu’au moment où le navigateur peint la prochaine image reflétant l’état mis à jour de la page.

L’INP couvre donc l’intégralité du temps perçu par l’utilisateur entre son action et la réponse visuelle de l’interface. C’est ce qui en fait une métrique de réactivité perçue plus représentative que l’ancien FID, qui ne mesurait que le premier délai d’entrée.

INP, Core Web Vitals et remplacement du FID

L’INP a été introduit d’abord comme métrique expérimentale dans le cadre des Core Web Vitals, avant de devenir une métrique stable. Depuis mars 2024, il est officiellement utilisé comme remplaçant du FID dans les rapports de performance de Google.

Ce changement s’explique par plusieurs limites du First Input Delay :

FID mesurait uniquement la première interaction de l’utilisateur, ce qui ne reflétait pas la réactivité globale de la page tout au long de la session ;
FID ne prenait en compte que le délai d’entrée, sans intégrer le temps de traitement ni le délai d’affichage ;
dans de nombreuses applications web modernes (SPA, interfaces riches), la première interaction n’était pas toujours représentative de l’expérience globale.

À l’inverse, l’INP :

observe toutes les interactions éligibles intervenant pendant la visite sur la page ;
mesure la chaîne complète de latence jusqu’à la prochaine mise à jour visuelle ;
offre une vision beaucoup plus fidèle de la réactivité réelle, y compris dans des interfaces complexes.

Comment l’INP est-il calculé pour une visite de page ?

Lorsqu’un utilisateur visite une page, chaque interaction éligible génère une mesure de latence. Une interaction peut elle-même regrouper plusieurs événements bas niveau, mais ils sont considérés comme une seule interaction logique (par exemple, un clic souris avec appui puis relâchement).

Pour chaque interaction, on enregistre la durée entre :

le moment où l’utilisateur effectue l’action (clic, tapotement, frappe) ;
et le moment où la page a effectivement affiché le résultat de cette action.

Ensuite, pour une visite donnée, l’INP est déterminé ainsi :

si la page enregistre moins de 50 interactions, l’INP correspond à l’interaction ayant la plus grande latence ;
si la page enregistre 50 interactions ou plus, la pire interaction est traitée comme une valeur aberrante et ignorée, et l’INP est calculé à partir d’une valeur proche du maximum, associée à un percentile très élevé (en pratique autour du 98e percentile des latences d’interaction).

Ce mode de calcul permet de :

refléter les interactions réellement lentes ;
éviter qu’une seule interaction anormale ne fausse toute l’évaluation de la réactivité de la page.

Seuils de qualité INP : qu’est-ce qu’un bon score ?

Pour interpréter correctement votre INP, il est important de connaître les seuils généralement recommandés :

Bon INP : inférieur ou égal à 200 ms ;
INP à améliorer : supérieur à 200 ms et inférieur ou égal à 500 ms ;
Mauvais INP : supérieur à 500 ms.

Ces valeurs servent de repères pour qualifier la réactivité de votre site :

un INP inférieur ou égal à 200 ms est souvent perçu comme quasi instantané par l’utilisateur ;
au-delà de 200 ms, la latence commence à être ressentie ;
au-delà de 500 ms, l’interface est clairement perçue comme lente, ce qui peut dégrader fortement l’expérience et les conversions.

INP au niveau site et reporting (CrUX, Search Console)

Les outils basés sur des données de terrain, comme Chrome UX Report ou les rapports Core Web Vitals de la Google Search Console, n’affichent pas la valeur INP de chaque visite individuelle. Ils présentent une vue agrégée basée sur un percentile.

Pour une URL (ou un groupe d’URL), la valeur rapportée est généralement calculée sur le 75e percentile des visites : cela signifie que 75 % des chargements de page ont un INP inférieur ou égal à cette valeur. L’objectif recommandé est de faire en sorte que ce 75e percentile se situe dans la zone « bon » (≤ 200 ms).

C’est ce percentile qui est utilisé pour classer vos URL dans les catégories « Bon », « À améliorer » ou « Mauvais » au niveau des Core Web Vitals.

Quelles interactions sont prises en compte dans l’INP ?

L’INP ne mesure pas toutes les actions possibles sur une page, mais seulement un ensemble précis d’interactions qualifiées :

clics (par exemple sur un lien, un bouton, une icône interactive) ;
tapotements tactiles sur mobile ou tablette ;
frappes clavier, qu’il s’agisse d’un clavier physique ou virtuel.

Certaines actions ne sont pas prises en compte directement :

le survol (hover) de la souris n’est généralement pas comptabilisé ;
le défilement (scroll) n’est pas pris en compte comme interaction INP en tant que tel, sauf si le scroll déclenche des événements ou mises à jour visuelles mesurés dans le cadre de l’INP.

Cette sélection d’interactions cible les actions où l’utilisateur attend une réaction explicite de l’interface, ce qui reflète mieux la satisfaction ressentie.

INP, LCP, CLS : comment l’INP s’intègre avec les autres Core Web Vitals

L’INP n’est pas la seule métrique de performance importante, mais elle complète un triptyque désormais classique :

LCP (Largest Contentful Paint) : mesure le temps nécessaire pour afficher le principal élément de contenu visible (par exemple une grande image ou un bloc de texte significatif) ;
CLS (Cumulative Layout Shift) : mesure la stabilité visuelle de la page, c’est-à-dire les déplacements inattendus de mise en page ;
INP : mesure la réactivité de la page aux interactions utilisateur.

Ces trois métriques couvrent ainsi :

la vitesse d’affichage initial (LCP) ;
la stabilité visuelle (CLS) ;
la réactivité aux actions de l’utilisateur (INP).

Pour un bon positionnement SEO et une expérience utilisateur de qualité, il est crucial de travailler sur ces trois axes simultanément.

Pourquoi l’INP est crucial pour l’expérience utilisateur et le SEO

Une mauvaise performance INP a un impact direct sur la perception de votre site :

les utilisateurs ont l’impression que les boutons ne répondent pas ;
les formulaires semblent « bloqués » ;
les menus ou filtres prennent trop de temps à se déployer ;
les actions critiques (validation de commande, ajout au panier, soumission de formulaire) paraissent lentes et peu fiables.

Ces frustrations se traduisent très vite par :

une augmentation du taux de rebond ;
une baisse du taux de conversion ;
une diminution du temps passé sur le site et du nombre de pages vues ;
un impact négatif sur votre référencement naturel, puisque Google prend en compte les Core Web Vitals, dont l’INP, comme signaux de qualité.

Bonnes pratiques pour optimiser l’INP

Pour améliorer votre INP et la réactivité globale de votre site, il est nécessaire d’agir sur plusieurs leviers techniques.

1. Optimiser l’exécution du JavaScript

Le JavaScript est souvent l’une des principales causes de latence d’interaction. Quelques recommandations :

réduire la taille et la complexité des bundles JavaScript ;
fractionner le code (code splitting) pour ne charger que le nécessaire au moment voulu ;
éliminer ou différer le JavaScript non critique lors du chargement initial ;
éviter les tâches longues sur le thread principal, ou les découper en tâches plus courtes ;
limiter l’usage de bibliothèques lourdes si une alternative plus légère est possible.

2. Minimiser les ressources bloquantes

Les ressources qui bloquent le rendu peuvent retarder la réponse à une interaction :

utiliser les attributs defer ou async sur les scripts lorsque c’est possible ;
charger en priorité les ressources critiques (CSS essentiel, scripts indispensables à l’interaction) ;
déporter les scripts d’analyse ou de marketing non essentiels après le chargement principal ;
limiter le nombre de requêtes simultanées impactant le thread principal.

3. Implémenter le chargement différé des images et médias

Le lazy loading des images, vidéos et iframes permet de :

réduire la charge initiale de la page ;
libérer des ressources pour traiter plus rapidement les interactions ;
éviter que des opérations lourdes de décodage d’images ou de rendu vidéo ne viennent concurrencer les réponses aux actions utilisateur.

4. Utiliser des techniques de rendu efficaces

Une structure DOM complexe et des recalculs fréquents de mise en page peuvent dégrader fortement la réactivité :

simplifier le DOM lorsque c’est possible ;
éviter les changements de style qui déclenchent des recalculs de layout coûteux ;
regrouper les modifications DOM pour réduire le nombre de cycles de rendu ;
utiliser des animations basées sur transform et opacity, moins coûteuses que d’autres propriétés.

5. Optimiser le temps de réponse du serveur

Même si l’INP se concentre sur les interactions après le chargement initial, un serveur lent peut encore impacter certaines mises à jour de contenu :

réduire le temps de réponse du serveur (TTFB) ;
mettre en place un cache efficace (serveur, CDN, cache applicatif) ;
optimiser les requêtes base de données et les traitements serveur associés aux actions utilisateur.

6. Gérer intelligemment les tâches de fond

Les tâches de fond, même si elles ne sont pas directement liées à une interaction, peuvent bloquer le thread principal et retarder la réponse à l’utilisateur. Il est recommandé de :

planifier les tâches non essentielles lorsque le navigateur est moins occupé ;
éviter les boucles de calcul intensives sur le thread principal ;
utiliser des web workers pour les calculs lourds lorsque c’est pertinent.

INP, mesures de terrain et mesures de laboratoire

L’INP est avant tout une métrique de terrain, basée sur des données réelles issues des navigateurs des utilisateurs. C’est ce qui la rend particulièrement précieuse pour comprendre la réalité de l’expérience vécue.

En laboratoire (tests locaux ou outils qui simulent un chargement de page sur une machine spécifique), l’INP peut être plus difficile à mesurer de manière représentative, car :

le nombre d’interactions réalisées durant un test est limité ;
les scénarios ne reflètent pas toujours la diversité des comportements réels ;
l’environnement (machine, réseau, contexte) est souvent plus favorable que celui des utilisateurs finaux.

En pratique, pour anticiper les problèmes d’INP en laboratoire, on utilise souvent des métriques proches comme le Total Blocking Time (TBT), qui est fortement corrélé à la réactivité.

Outils pour mesurer et surveiller l’INP

Plusieurs outils permettent de mesurer et d’optimiser l’INP de vos pages. Voici les principaux à connaître.

Google Search Console

La Google Search Console propose un rapport Core Web Vitals qui présente, pour vos URL, les données d’INP basées sur le comportement réel des utilisateurs. Ce rapport agrège les données au 75e percentile et classe vos pages en « Bon », « À améliorer » ou « Mauvais ».

Ce rapport est particulièrement utile pour :

identifier les modèles d’URL problématiques ;
prioriser les pages à optimiser ;
suivre l’évolution de vos améliorations dans le temps.

PageSpeed Insights

PageSpeed Insights fournit à la fois :

des données de terrain (Chrome UX Report) incluant l’INP, lorsqu’elles sont disponibles ;
des données de laboratoire obtenues via un audit simulé.

L’outil affiche la valeur INP, la classification qualitative (bon, moyen, mauvais) et une série de recommandations concrètes pour améliorer les différents aspects de la performance, y compris la réactivité.

Lighthouse

Lighthouse est un outil d’audit de performance intégré aux DevTools de Chrome et disponible en ligne. Il fournit un rapport détaillé sur :

les performances globales ;
l’accessibilité ;
les bonnes pratiques ;
le SEO technique.

Les audits Lighthouse s’appuient surtout sur des métriques de laboratoire, mais ils mettent en évidence les scripts bloquants, les tâches longues et les optimisations possibles qui ont un impact indirect sur l’INP.

Bibliothèque Web Vitals et intégration personnalisée

Pour les équipes qui souhaitent suivre précisément l’INP dans leurs propres analyses, il est possible d’utiliser des bibliothèques dédiées (par exemple la bibliothèque Web Vitals) afin :

de récupérer les valeurs d’INP en temps réel dans le navigateur de l’utilisateur ;
de les envoyer vers un outil d’analytics interne ou tiers ;
de corréler les données d’INP avec des informations métier (type de page, segment d’utilisateur, device, etc.).

Outils tiers de monitoring de performance

Des solutions de monitoring comme celles de type APM ou d’analyse des performances front-end peuvent aussi proposer des rapports détaillés sur :

la latence des interactions ;
les scripts ou ressources responsables des blocages ;
l’impact des scripts tiers (tags, trackers, widgets, etc.) sur la réactivité.

FAQ : questions fréquentes sur l’INP

Qu’est-ce que la métrique INP ?
La métrique INP mesure le temps entre une interaction utilisateur (clic, tapotement, frappe clavier) et la prochaine mise à jour visuelle du navigateur qui reflète cette interaction. Elle intègre le délai d’entrée, le temps de traitement et le délai d’affichage.
Pourquoi l’INP est-elle importante ?
L’INP reflète la réactivité réelle de votre site et la façon dont les utilisateurs perçoivent la rapidité de vos interfaces. Une bonne INP garantit une expérience fluide, réduit la frustration, contribue à de meilleurs taux de conversion et soutient vos performances SEO.
Quels sont les bons seuils pour l’INP ?
Un bon INP est inférieur ou égal à 200 ms. Entre 200 ms et 500 ms, il est considéré comme à améliorer. Au-delà de 500 ms, les interactions sont perçues comme lentes et dégradent fortement l’expérience.
L’INP affecte-t-elle le SEO ?
Oui. L’INP fait partie des Core Web Vitals pris en compte par Google pour évaluer la qualité de l’expérience utilisateur. Un bon INP peut contribuer à de meilleures performances SEO, en complément d’autres signaux techniques et de contenu.
Comment améliorer concrètement l’INP ?
En réduisant les tâches JavaScript longues, en différant les scripts non essentiels, en simplifiant le DOM, en optimisant le rendu et le chargement des images, en améliorant le temps de réponse du serveur et en surveillant l’impact des scripts tiers sur le thread principal.
Quelle différence entre FID et INP ?
Le FID mesurait uniquement le délai d’entrée de la première interaction. L’INP mesure la latence complète de nombreuses interactions (clics, tapotements, frappes clavier) tout au long de la visite et inclut le traitement et l’affichage, ce qui en fait une métrique plus fiable de la réactivité globale.

Conclusion

L’Interaction to Next Paint est devenue une métrique incontournable pour évaluer et optimiser la réactivité de vos pages web. En mesurant le temps réel qui sépare les actions de vos utilisateurs de la réponse visuelle de votre interface, l’INP fournit un indicateur fiable de la qualité de l’expérience proposée.

Un bon score INP ne se résume pas à une simple optimisation ponctuelle : il repose sur un ensemble de bonnes pratiques en performance front-end, optimisation JavaScript, gestion des ressources et architecture globale du site. En agissant sur ces différents leviers, vous améliorez non seulement vos Core Web Vitals, mais aussi la satisfaction de vos utilisateurs, vos conversions et, à terme, vos performances SEO.

En mettant en place un suivi régulier de l’INP via les outils adaptés, et en intégrant la performance dans votre processus de développement, vous construisez des expériences web plus rapides, plus fluides et plus compétitives.

À vous maintenant d’analyser vos pages, de prioriser les optimisations et de transformer l’INP en véritable avantage concurrentiel pour votre site.