Interaction to Next Paint (INP) est un Core Web Vital de Google qui mesure la reactivite d une page web. Il enregistre le plus long delai entre une interaction utilisateur (clic, tap, frappe) et la prochaine mise a jour visuelle durant toute la visite, et rapporte le 75e centile sur l ensemble des sessions reelles. INP est devenu Core Web Vital officiel et signal de classement le 12 mars 2024, remplacant First Input Delay (FID). Bon INP : 200 ms ou moins. Mesure via CrUX, PageSpeed Insights, Search Console, Chrome DevTools et la librairie web-vitals.
Comment INP est mesure
- Input delay.
- Processing time.
- Presentation delay.
Seuils
| Categorie | Valeur | Sensation |
|---|---|---|
| Bon | 200 ms ou moins | Instantane. |
| A ameliorer | 200 a 500 ms | Latence perceptible. |
| Mauvais | Plus de 500 ms | Lent visiblement. |
En fevrier 2025, environ 65 pour cent des URL mobiles dans CrUX passent le seuil, contre 55 pour cent au lancement en mars 2024.
Pourquoi INP remplace FID
- FID ne mesurait que la premiere interaction.
- FID n incluait ni traitement ni rendu.
Causes d un mauvais INP
- Long tasks sur le main thread.
- Scripts tiers synchrones.
- Handlers lourds.
- Layout thrashing.
- Rerenders de framework lents.
- Animations JS au lieu de CSS.
- Recalculs CSS sur DOM enormes.
Mesure
- PageSpeed Insights.
- Search Console.
- Chrome DevTools (depuis Chrome 121).
- web-vitals (
npm install web-vitals). - Cloudflare Web Analytics, Vercel Speed Insights, SpeedCurve, DebugBear.
- CrUX sur BigQuery.
import { onINP } from 'web-vitals';
onINP(metric => {
fetch('/api/vitals', { method: 'POST', body: JSON.stringify(metric), keepalive: true });
});Optimisation
- Decouper les long tasks avec
scheduler.yield()(Chrome 129, octobre 2024). - Differer le JS non critique.
- Hydration partielle (Astro Islands, RSC, Qwik).
- Memoiser les composants React.
- Animations CSS.
- Debounce des handlers.
- Web Workers pour le parsing lourd.
- Reduire le DOM.
content-visibility: auto.- Auditer les scripts tiers.
INP dans WordPress
- Desactiver jQuery sur le front.
- Theme rapide (GeneratePress, Astra, Kadence).
- Eviter les page builders lourds.
- Charger GTM et analytics differes.
- Cacher les pages.
- Optimiser WooCommerce ou passer en headless.
- Limiter les widgets de chat.
- Mesurer avec Site Kit by Google.
Mythes
- Lighthouse 100 n implique pas un bon INP reel.
- Moins de JS n aide que s il etait bloquant.
- INP compte sur mobile et desktop separement.
- INP n est pas equivalent a TBT.
Comment InspectWP aide ?
InspectWP detecte jQuery sur le front, scripts bloquants et page builders lents.