Apprendre
Optimisation INP : corriger Interaction to Next Paint et les Core Web Vitals
Un guide pratique de l’Interaction to Next Paint : ce qu’elle mesure, pourquoi elle est plus difficile à corriger que la vitesse de chargement, et comment accélérer les interactions réelles.
Lancez un audit DomainLens frais et utilisez le rapport comme liste de priorités.
Ce que l’INP mesure réellement
L’Interaction to Next Paint (INP) mesure la réactivité : le temps que met la page à répondre visuellement après un clic, un tap ou une touche. Elle observe toutes les interactions du visiteur et retient presque la pire, si bien qu’un seul menu saccadé ou un bouton « ajouter au panier » lent peut définir le score de toute la page.
Le bon seuil est de 200 ms ou moins ; au-delà de 500 ms, c’est mauvais. Contrairement au LCP, qui concerne la vitesse d’apparition du contenu, l’INP concerne ce qui se passe une fois la page à l’écran — c’est pourquoi une page peut charger vite et sembler cassée dès qu’on l’utilise.
Pourquoi l’INP est plus dur à corriger que la vitesse
Les métriques de chargement dépendent surtout du réseau et du serveur, donc le cache et un hébergement plus rapide aident beaucoup. L’INP dépend de votre propre JavaScript exécuté sur le thread principal. Quand un clic se déclenche, le navigateur ne peut pas peindre la réponse tant que le gestionnaire, le re-rendu du framework et le reste de la file ne sont pas terminés — les longues tâches invisibles sur un portable rapide deviennent des blocages sur un mobile milieu de gamme.
L’INP a remplacé le First Input Delay en mars 2024. Le FID ne mesurait que le délai avant le début du traitement de la première interaction ; l’INP mesure le temps complet jusqu’à la prochaine image peinte, pour les interactions de toute la visite. C’est bien plus strict, et c’est pourquoi des sites qui passaient le FID échouent à l’INP.
Où trouver vos pires interactions
Commencez par les données terrain — l’INP est une métrique d’utilisateurs réels, et un outil de labo ne sait pas quel bouton pose vraiment problème.
- Chrome UX Report / Search Console : confirmez que l’INP échoue chez de vrais utilisateurs, et notez si c’est mobile, desktop ou des templates précis.
- L’extension Web Vitals ou le panneau Performance : reproduisez l’interaction et lisez la décomposition INP en input delay, processing time et presentation delay.
- La piste long tasks du panneau Performance : enregistrez en cliquant l’élément fautif, puis repérez la tâche de plus de 50 ms qui bloque la peinture suivante.
- Les devtools du framework (React Profiler, Vue Devtools) : trouvez les composants qui se re-rendent bien plus que nécessaire sur une seule interaction.
Comment accélérer la réponse aux interactions
L’objectif est de laisser le navigateur peindre avant de faire le travail coûteux. Découpez la grande tâche en une petite réponse visible immédiate et le travail lourd ensuite.
- Rendez la main au thread principal : après avoir mis à jour ce que voit l’utilisateur, différez le travail non urgent avec requestIdleCallback, setTimeout ou await scheduler.yield().
- Réduisez le coût d’hydratation : sur React, Vue, Nuxt ou Next.js, livrez moins de JavaScript client et préférez les server components ou les islands.
- Maîtrisez les tiers : analytics, widgets de chat, tag managers et scripts publicitaires tournent sur le même thread — chargez-les en différé et supprimez les inutiles.
- Debounce et mémoïsation : empêchez le filtrage coûteux, les calculs de layout et les mises à jour d’état de se déclencher à chaque frappe ou défilement, et mettez en cache les valeurs dérivées.
Les erreurs qui maintiennent l’INP dans le rouge
- N’optimiser que le score Total Blocking Time de Lighthouse en supposant que l’INP terrain suivra — le TBT est un proxy de chargement, pas les interactions réelles.
- Tester sur un desktop rapide alors que le trafic est en Android milieu de gamme, où le même gestionnaire prend plusieurs fois plus longtemps.
- Garder chaque tag tiers parce qu’il « paraît petit » — le coût est cumulatif et retombe sur le chemin d’interaction.
- Corriger l’interaction moyenne au lieu de la pire ; l’INP est défini par la queue lente, pas la médiane.
Comment confirmer que l’INP s’est amélioré
Les métriques terrain évoluent lentement car elles agrègent 28 jours de visites réelles, n’attendez donc pas que le graphique de Search Console bondisse le jour du déploiement. Validez en deux couches : reproduisez l’interaction dans le panneau Performance et vérifiez que la longue tâche a disparu, puis suivez la tendance terrain les semaines suivantes.
Dans DomainLens, traitez l’INP dans le même fil de preuve que le LCP, le CLS et la vitesse de page — les meilleures corrections rendent la page réellement plus agréable à utiliser, pas seulement plus verte en labo.