INP (Interaction to Next Paint)

Définition courte

Résumé opérationnel

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

L'INP est une métrique des Core Web Vitals introduite par Google pour mesurer la réactivité d'une page web. Elle évalue le temps écoulé entre le moment où un utilisateur interagit avec la page (clic sur un bouton, appui sur une touche, tap sur un lien) et l'instant où le navigateur affiche le prochain frame visuel correspondant à cette interaction. Contrairement au FID (First Input Delay) qu'elle remplace, l'INP prend en compte toutes les interactions tout au long de la session, et non seulement la première.

L'INP est exprimé en millisecondes. Un score inférieur à 200 ms est considéré comme bon, entre 200 et 500 ms comme moyen (à améliorer), et au-dessus de 500 ms comme mauvais. Cette métrique reflète la fluidité perçue par l'utilisateur : une page avec un INP élevé donne une sensation de lenteur, de blocage ou de retard dans les retours visuels.

L'INP est calculé à partir de données de terrain réelles collectées via le Chrome User Experience Report (CrUX) ou via des outils de monitoring utilisateur réel (RUM). Il ne peut pas être mesuré avec des outils synthétiques comme Lighthouse seul. Pour les sites e-commerce, une mauvaise INP peut entraîner une baisse du taux de conversion, car les utilisateurs abandonnent face à une interface non réactive.

À quoi sert l'INP dans le cadre des Core Web Vitals ?

L'INP sert d'indicateur clé de l'expérience utilisateur, en complément du LCP (Largest Contentful Paint) et du CLS (Cumulative Layout Shift). Tandis que le LCP mesure la vitesse de chargement perçue et le CLS la stabilité visuelle, l'INP évalue la réactivité après le chargement. Ensemble, ces trois métriques donnent une image complète de la qualité d'une page.

Google a intégré l'INP dans ses critères de classement depuis mars 2024. Un site avec un INP mauvais (supérieur à 500 ms) peut voir son positionnement dégradé, surtout sur mobile où les interactions tactiles sont plus fréquentes et plus sensibles. Pour les pages e-commerce (fiches produit, panier, checkout), l'INP est crucial : un délai lors de l'ajout au panier ou de la validation de commande peut faire perdre des ventes.

L'INP permet également de détecter des problèmes de performance JavaScript, comme des scripts trop lourds, des animations bloquantes ou des appels asynchrones mal gérés. En optimisant l'INP, on améliore non seulement le référencement, mais aussi la satisfaction utilisateur et les indicateurs métier (taux de rebond, temps sur site, conversion).

Comment mesurer l'INP : outils et méthodes

La mesure de l'INP nécessite des données de terrain. Voici les outils recommandés :

• PageSpeed Insights : fournit des données CrUX pour l'INP (origine et page). Idéal pour un diagnostic rapide.
• Google Search Console : rapport Core Web Vitals indiquant les pages avec INP mauvais ou moyen.
• Chrome DevTools : onglet Performance, avec enregistrement des interactions réelles pour analyser les causes.
• Outils RUM (Real User Monitoring) : solutions comme New Relic, Datadog, ou des scripts maison pour collecter les métriques utilisateur.
• Web Vitals Extension : extension Chrome qui affiche l'INP en temps réel lors de la navigation.

Pour interpréter les résultats, il faut regarder le 75e percentile des interactions sur mobile et desktop. Un INP moyen entre 200 et 500 ms nécessite une analyse détaillée des interactions les plus lentes (via les traces de performance). Attention : les tests synthétiques (Lighthouse) ne donnent pas d'INP, car ils simulent un seul chargement sans interactions réelles.

Les causes principales d'un INP élevé

Un INP élevé est souvent dû à un blocage du thread principal du navigateur. Voici les causes fréquentes :

• Scripts JavaScript longs et synchrones : des fonctions qui s'exécutent en continu sans cession (plus de 50 ms) empêchent le navigateur de répondre aux interactions.
• Animations et transitions coûteuses : des animations CSS ou JavaScript qui sollicitent le GPU ou le CPU peuvent retarder le prochain paint.
• Appels réseau bloquants : des requêtes fetch ou XHR synchrones (à éviter absolument) ou des appels asynchrones mal gérés qui retardent la mise à jour du DOM.
• Gestion d'événements complexe : des écouteurs d'événements attachés à de nombreux éléments, ou des handlers qui effectuent des calculs lourds.
• Réévaluations de style et reflows : des modifications du DOM ou du CSS qui déclenchent des recalculs de style et des mises en page coûteuses.
• Third-party scripts : des scripts de publicité, d'analyse, de réseaux sociaux qui s'exécutent sur le thread principal et interfèrent avec les interactions.

Pour identifier la cause exacte, il faut utiliser les traces de performance dans Chrome DevTools : enregistrer une interaction (clic, tap), puis analyser la flamegraph pour repérer les tâches longues (plus de 50 ms) et les goulots d'étranglement.

Comment optimiser l'INP : techniques et bonnes pratiques

L'optimisation de l'INP repose sur la réduction du temps de traitement des interactions et l'amélioration de la réactivité du thread principal. Voici les techniques clés :

• Fractionner les tâches longues : utiliser requestAnimationFrame, setTimeout ou scheduler.postTask pour découper les scripts en morceaux de moins de 50 ms.
• Déprioriser les scripts non critiques : charger les scripts tiers en différé (defer ou async) ou les déplacer dans un web worker.
• Optimiser les animations : utiliser transform et opacity pour les animations, éviter les propriétés qui déclenchent un reflow (comme width, height, top, left).
• Minimiser le travail des écouteurs d'événements : utiliser la délégation d'événements, éviter les handlers lourds, et retirer les écouteurs inutiles.
• Utiliser le cache et la prélecture : pour les interactions qui nécessitent des données (ex : autocomplete), précharger les données en arrière-plan ou utiliser un cache local.
• Éviter les appels réseau synchrones : toujours utiliser fetch asynchrone avec await ou des promesses, et gérer les timeouts.
• Limiter l'impact des scripts tiers : auditer régulièrement les scripts externes, les charger en différé, ou utiliser des versions allégées.

Il est conseillé de tester chaque optimisation sur un échantillon d'utilisateurs réels via un outil RUM pour vérifier l'impact sur l'INP.

Différence entre INP et FID : pourquoi le changement ?

Le FID (First Input Delay) mesurait uniquement le délai avant la première interaction, ce qui donnait une vision partielle de la réactivité. L'INP le remplace pour plusieurs raisons :

• Couverture complète : l'INP prend en compte toutes les interactions (clic, tap, touche) tout au long de la session, pas seulement la première. Cela reflète mieux l'expérience réelle.
• Mesure de la latence totale : l'INP inclut le temps de traitement de l'interaction (exécution du handler, mise à jour du DOM, paint), tandis que le FID ne mesurait que le délai avant le début du traitement.
• Meilleure corrélation avec la satisfaction : Google a montré que l'INP est plus corrélé à la perception de fluidité par les utilisateurs que le FID.
• Alignement avec les attentes modernes : les utilisateurs s'attendent à une réactivité immédiate pour chaque interaction, surtout sur mobile. L'INP permet de détecter les problèmes de performance même après le chargement initial.

Le passage du FID à l'INP a été progressif : annoncé en 2022, déployé comme métrique officielle en mars 2024. Les sites qui avaient optimisé leur FID ne sont pas forcément bons pour l'INP, car les causes diffèrent (le FID était surtout lié au chargement des scripts, l'INP à l'exécution des interactions).

Outils complémentaires pour le diagnostic avancé de l'INP

Pour aller plus loin que les outils de base, voici des solutions spécialisées :

• Web Vitals Library : bibliothèque JavaScript officielle de Google pour collecter les métriques Core Web Vitals, y compris l'INP, sur votre site. Idéal pour un monitoring personnalisé.
• Lighthouse avec mode utilisateur : la version récente de Lighthouse (10+) permet de simuler des interactions et d'obtenir un score INP approximatif (mais toujours basé sur des données synthétiques).
• Performance Observer API : API native pour écouter les événements de performance, notamment les 'first-input' et 'event' pour l'INP. Permet de logger les interactions lentes.
• Outils de profiling avancé : Chrome DevTools (onglet Performance) avec enregistrement des interactions, ou l'outil 'Web Vitals' dans les DevTools (onglet 'Lighthouse' puis 'Mode utilisateur').
• Solutions RUM payantes : SpeedCurve, Calibre, Datadog RUM, New Relic Browser – offrent des dashboards, des alertes et des analyses détaillées de l'INP par page, par appareil, par interaction.

Pour un site e-commerce, il est recommandé d'utiliser au moins une solution RUM pour suivre l'INP en continu, car les variations de trafic et de contenu peuvent affecter la métrique.

Impact de l'INP sur le SEO et les conversions

L'INP influence directement le classement Google, car il fait partie des Core Web Vitals depuis mars 2024. Google a confirmé que les pages avec un INP mauvais (supérieur à 500 ms) peuvent être pénalisées dans les résultats de recherche, surtout sur mobile. Cependant, l'impact est plus marqué pour les sites à fort trafic ou très concurrentiels, où chaque dixième de seconde compte.

Au-delà du SEO, l'INP a un effet tangible sur les indicateurs métier :

• Taux de conversion : une étude de Google (données internes) montre qu'une amélioration de l'INP de 100 ms peut augmenter le taux de conversion de plusieurs points (pourcentage variable selon le secteur).
• Taux de rebond : les utilisateurs qui rencontrent des retards lors des interactions (ex : ajout au panier lent) quittent plus souvent la page.
• Engagement : une interface réactive encourage la navigation et les interactions (scroll, clics, formulaires).

Pour les pages critiques (checkout, recherche, filtres), un INP élevé peut entraîner une perte de ventes directe. Il est donc stratégique de prioriser l'optimisation de ces pages.

Cas pratiques d'optimisation de l'INP sur un site e-commerce

Voici deux scénarios concrets d'optimisation :

Scénario 1 : Page fiche produit avec INP moyen (350 ms)

• Problème : le clic sur le bouton 'Ajouter au panier' déclenche un appel API pour vérifier le stock, puis une animation de confirmation, le tout géré par un script jQuery lourd.
• Solution : précharger les données de stock via une requête asynchrone au chargement de la page, utiliser requestAnimationFrame pour l'animation, remplacer jQuery par du vanilla JS léger.
• Résultat : INP passe à 120 ms, le bouton répond immédiatement.

Scénario 2 : Page de recherche avec INP mauvais (600 ms)

• Problème : chaque frappe dans le champ de recherche déclenche une requête AJAX synchrone, avec un traitement de 200 ms côté client pour filtrer les résultats.
• Solution : implémenter un debounce (délai de 300 ms avant l'envoi), utiliser un cache local pour les résultats fréquents, déporter le filtrage côté serveur.
• Résultat : INP descend à 180 ms, la recherche est fluide.

Ces exemples montrent que l'optimisation de l'INP passe souvent par une refonte de la logique JavaScript et une meilleure gestion des appels réseau.

Plan d'action en 30 jours pour optimiser l'INP

Checklist

• Vérifier l'INP de votre site via PageSpeed Insights (données CrUX)
• Identifier les pages avec INP mauvais ou moyen dans Google Search Console
• Installer la Web Vitals Extension pour tester en navigation réelle
• Analyser les interactions lentes avec Chrome DevTools (onglet Performance)
• Repérer les tâches longues JavaScript (>50 ms) dans la flamegraph
• Fractionner les scripts longs avec requestAnimationFrame ou setTimeout
• Optimiser les animations en utilisant transform et opacity uniquement
• Remplacer les appels réseau synchrones par des appels asynchrones
• Auditer les scripts tiers et les charger en différé si possible
• Implémenter un debounce sur les interactions fréquentes (recherche, filtres)
• Tester chaque optimisation sur un échantillon d'utilisateurs réels
• Documenter les correctifs et surveiller l'INP en continu avec un outil RUM

Questions fréquentes

Sources : FEVAD · Google Search Central · Shopify.