Interaction to Next Paint (INP)

Ce que vérifie ce contrôle

Lit l’INP depuis PageSpeed Insights. L’INP mesure l’interaction la plus lente au 98ᵉ centile (clic, tap, frappe) pendant une session de page, en millisecondes. Depuis mars 2024, l’INP a remplacé First Input Delay (FID) comme troisième Core Web Vital.

Valeur INP	Verdict
≤ 200 ms	Bon
200–500 ms	À améliorer
> 500 ms	Mauvais

Pourquoi c’est important

L’INP est la métrique de performance la plus proche de « est-ce que ce site donne l’impression d’être rapide ? ». Contrairement au LCP (qui mesure le chargement) ou au CLS (qui mesure la stabilité), l’INP mesure l’interactivité tout au long de la session, pas seulement au chargement.

Un mauvais INP est presque toujours un problème JavaScript. Le thread principal est occupé à exécuter vos scripts, donc quand l’utilisateur clique, le gestionnaire de clic attend en queue derrière ce qui s’exécute et l’écran ralentit.

Comment le corriger

1. Trouvez vos pires interactions. Dans Chrome DevTools, ouvrez l’onglet Performance, enregistrez une session qui inclut l’interaction lente. Cherchez les longues tâches (>50 ms) juste après l’événement de clic.

2. Découpez les longues tâches. Tout JavaScript synchrone qui s’exécute plus de 50 ms bloque la saisie utilisateur. Découpez avec des morceaux await-friendly :

async function processItems(items) {
  for (const item of items) {
    await yieldToMain();
    process(item);
  }
}

function yieldToMain() {
  return new Promise(resolve => setTimeout(resolve, 0));
}

Les navigateurs modernes ont aussi scheduler.yield() (Chromium 129+), plus propre.

3. Différez les scripts non critiques. Déplacez analytics, pubs, snippets A/B, widgets de chat pour qu’ils chargent après la première interaction (ou utilisez requestIdleCallback).

4. Utilisez content-visibility: auto sur les sections hors écran. Le navigateur saute layout et paint pour le contenu masqué jusqu’à ce qu’il entre dans le viewport.

5. Allégez les re-rendus React/Vue/Svelte. Un tueur d’INP classique : un gestionnaire de clic déclenche une mise à jour d’état qui re-rend 500 composants. Utilisez la mémoïsation (React.memo, useMemo), la virtualisation pour les longues listes, et des slices d’état granulaires.

Questions fréquentes

PageSpeed Insights affiche-t-il l’INP ?

Oui — en labo et en terrain. L’INP terrain vient du Chrome User Experience Report (CrUX) pour les sites à trafic suffisant ; les petits sites n’ont que l’INP simulé en labo.

L’INP est-il la même chose que le FID ?

Non. Le FID ne mesurait que le délai de la première interaction. L’INP mesure le pire cas sur toute la session, en incluant la durée d’exécution du gestionnaire de clic et le paint suivant. L’INP est environ 5× plus difficile à optimiser que le FID.

Mon site est presque statique. Pourquoi mon INP est mauvais ?

Même un site statique a souvent de gros scripts tiers (analytics, chat, bannières de consentement) qui monopolisent le thread principal. Auditez vos balises <script> et différez tout ce qui n’est pas critique pour le premier paint.