Depuis mars 2024, INP (Interaction to Next Paint) a remplacé FID (First Input Delay) parmi les Core Web Vitals. Deux ans plus tard, on voit les conséquences sur les projets Next.js — surtout ceux qui rendent côté client sans discipline.
Les trois mesures qui comptent en 2026
Au seuil Good mesuré au p75 (75ᵉ centile sur 28 jours) :
- LCP — Largest Contentful Paint : < 2,5 s
- INP — Interaction to Next Paint : < 200 ms
- CLS — Cumulative Layout Shift : < 0,1
Le seuil Needs Improvement pour INP est entre 200 et 500 ms ; au-dessus, c'est Poor et ça pèse sur le ranking Google + sur le sentiment utilisateur.
Pourquoi INP est plus dur que FID
FID mesurait le délai entre la première interaction et le début du traitement — un nombre faible était facile à atteindre une fois le bundle hydraté. INP mesure le délai entre toute interaction (clic, tap, frappe) et le prochain frame peint — sur toute la session.
Concrètement : si votre menu mobile met 300 ms à s'ouvrir parce qu'un
useEffect recalcule trop, FID s'en fichait. INP le voit, et le retient
comme métrique p75.
Les trois fautes qui plombent INP
Sur les audits qu'on fait, trois patterns reviennent :
- Hydratation trop lourde sur la home — un Carousel3D + 4 sections
animées hydratés en même temps que le hero. Le main thread est saturé
quand l'utilisateur clique sur le menu. → découper en îlots, dynamic
import,
requestIdleCallback. - Listeners scroll non-throttled —
scrollest l'un des événements les plus fréquents du navigateur. ToutaddEventListener('scroll', cb)sans throttle gèle les interactions. →passive: true+requestAnimationFrame. - Animations CSS qui repaint —
top,left,widthau lieu detransform. Le navigateur repeint au lieu de composer. →transformwill-changeciblé, pas global.
Ce qu'on mesure, comment
- En CI : Lighthouse via
@lhci/cli, seuil bloquant à 95 sur Performance. - En prod :
next/web-vitalsqui envoie LCP/INP/CLS à Vercel Speed Insights. - Localement : Chrome DevTools Performance panel, onglet Interactions.
INP est tatillon : tester sur un téléphone milieu de gamme (Pixel 6a en mode batterie économe), pas sur un MacBook M3. Le throttling DevTools "Mid-tier mobile" donne une approximation correcte.
L'angle métier
Un INP qui passe de 350 ms à 180 ms = un site qui se sent deux fois plus réactif. Sur un tunnel e-commerce, ça se traduit dans le taux de complétion panier. Sur un site vitrine, ça se traduit dans le bounce rate sur mobile.
On a mesuré sur trois projets clients : passer de Needs Improvement à Good sur INP a réduit le bounce mobile de 8 à 14 points selon le contexte.
La règle qu'on applique
- Pas de composant
'use client'qui n'a pas une raison forte d'exister. - Pas de polyfill non utilisé dans le bundle critique.
- Pas d'animation scroll-driven qui dépasse 60 fps de budget.
- Et — surtout — un audit INP avant chaque mise en prod, pas après les premières plaintes utilisateurs.