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

L'Interaction to Next Paint est la métrique de réactivité qui a remplacé le First Input Delay dans les Core Web Vitals. Elle mesure le temps que met une page à réagir visiblement après une saisie utilisateur, sur l'ensemble de la session et pas seulement au premier appui. Pour les boutiques denses en filtres, sélecteurs de variantes et boutons d'ajout au panier, l'INP révèle le coût réel du JavaScript côté client.

Définition

L'INP échantillonne chaque interaction discrète, comme le clic, le tap et la frappe, et enregistre le temps entre la saisie et le paint suivant. Le score rapporté correspond grosso modo à la pire interaction de la session, ou au 98e percentile sur les pages longues, exprimé en millisecondes. Google considère jusqu'à 200 ms comme bon et au-delà de 500 ms comme mauvais. L'INP est dominé par les longues tâches sur le thread principal, les gestionnaires d'événements coûteux, le layout thrashing et le travail d'hydratation effectué par React, Vue ou Svelte après le rendu serveur. Les scripts tiers lourds chargés via une balise de content-management-system-cms y contribuent fréquemment.

Pourquoi c'est important

L'INP capture ce que les acheteurs ressentent réellement : des filtres poussifs sur une PLP, un sélecteur de quantité retardé ou un méga-menu lent. Un mauvais INP se répercute en taux de rebond et en paniers abandonnés, et il est plus difficile à corriger que le LCP car il dépend de l'architecture applicative plutôt que de la livraison des assets. Pour les stacks composable-commerce, l'INP est le meilleur indicateur unique du coût d'hydratation et de la qualité du bundle. En tant que Vital, il alimente aussi le search-engine-optimization-seo via le signal page-experience.

Cas d'usage

Les ingénieurs sur Next.js, Remix ou Nuxt atténuent l'INP en découpant les bundles React par route via le code-splitting, en différant le first-party-JS non critique et en déportant le travail lourd hors du thread principal avec des Web Workers. Adopter les React Server Components ou l'Islands Architecture dans Astro retire l'hydratation de larges portions de la page, ce qui réduit souvent de moitié l'INP sur les pages catégorie. L'Edge Rendering sur Vercel Edge, Cloudflare Workers ou Netlify Edge garde la couche de cache proche des utilisateurs, mais les vrais gains viennent de moins de JS interactif côté client. Les équipes instrumentent l'INP par route via la bibliothèque web-vitals et conditionnent les releases à des budgets d'INP.

Voir aussi

Découvrez Performance and Core Web Vitals · Composable Headless Frontend.