Interaction to Next Paint (INP)
L'Interaction to Next Paint (INP) est une métrique des Core Web Vitals qui mesure le temps nécessaire à une page pour répondre visuellement après une interaction de l'utilisateur (clic, appui ou pression de touche). En mars 2024, Google a élevé l'INP au rang de facteur de classement officiel, en remplacement du First Input Delay (FID).
L'Interaction to Next Paint (INP) est une métrique des Core Web Vitals qui mesure le temps nécessaire à une page pour répondre visuellement après une interaction de l'utilisateur (clic, appui ou pression de touche). En mars 2024, Google a élevé l'INP au rang de facteur de classement officiel, en remplacement du First Input Delay (FID).
Pourquoi c'est important
Le FID ne mesurait que le délai de la première interaction, tandis que l'INP suit chaque interaction tout au long du cycle de vie de la page et établit son score à partir de la plus lente. Cela reflète ce que les utilisateurs ressentent réellement. Selon Google, en 2026, environ 36 % des sites sur ordinateur et 45 % des sites mobiles échouent encore à atteindre le seuil « Bon », ce qui fait de l'optimisation de l'INP un net facteur de différenciation par rapport aux pages concurrentes.
Seuils
| Évaluation | Valeur d'INP |
|---|---|
| Bon | ≤ 200 ms |
| À améliorer | 200 à 500 ms |
| Médiocre | > 500 ms |
Mesuré au 75e centile (p75) des données d'utilisateurs réels issues du Chrome User Experience Report (CrUX).
Ce qui ralentit l'INP
Tâches JavaScript longues : toute tâche monopolisant le thread principal pendant plus de 50 ms bloque l'interaction suivante.
Délai d'entrée (input delay) : temps qui s'écoule avant l'exécution d'un gestionnaire d'événements parce que le thread principal est occupé par d'autres traitements.
Délai de présentation (presentation delay) : temps entre la fin du traitement de l'événement et l'affichage de la prochaine image par le navigateur, généralement dû à des modifications complexes du DOM ou de la mise en page.
Comment optimiser
Fractionnez les tâches longues : utilisez setTimeout, scheduler.yield() ou requestIdleCallback pour découper les tâches de plus de 50 ms.
Gardez les gestionnaires d'événements légers : n'exécutez pas de traitements lourds dans un gestionnaire de clic, différez-les au-delà du prochain requestAnimationFrame.
Évitez les rendus inutiles : avec React, utilisez memo, useMemo et useCallback pour éviter les mises à jour redondantes.
Utilisez contain en CSS : des propriétés comme contain: content limitent la portée de la mise en page et de l'affichage, rendant le rendu des images moins coûteux.
Différez les scripts tiers : chargez les publicités, les outils d'analyse et les widgets de chat avec async/defer pour qu'ils ne bloquent pas les interactions.
Outils de mesure : utilisez PageSpeed Insights, l'extension Chrome Web Vitals et le rapport sur les Core Web Vitals de la Search Console pour obtenir des données INP réelles.
Sources: