Interaction to Next Paint (INP) : Définition, Thresholds, Fixes

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

Interaction to Next Paint (INP) est le Core Web Vital qui mesure la responsiveness globale d'une page aux interactions utilisateur. Pour chaque clic, tap ou pression de touche, INP mesure le temps entre l'événement input et le prochain update visuel (next paint). L'INP rapporté de la page est essentiellement l'interaction la PLUS LONGUE de toute la visite.

INP a remplacé First Input Delay (FID) comme Core Web Vital le 12 mars 2024. FID ne mesurait que la première interaction ; INP sample des interactions à travers le lifecycle de la page.

Thresholds INP

Pourquoi INP a remplacé FID

Ce que INP inclut

1. Input delay — main thread occupé avant que event handler puisse tourner
2. Processing time — exécution event handler + state update
3. Presentation delay — temps jusqu'à ce que le navigateur peigne l'update visuel

Comment mesurer INP

API JavaScript

new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.interactionId && entry.duration > 40) {
      console.log('INP candidate:', entry.duration, 'ms');
    }
  }
}).observe({ type: 'event', buffered: true, durationThreshold: 40 });

import { onINP } from 'web-vitals';
onINP((metric) => sendBeacon('/rum', metric));

Outils

Optimisations INP courantes

1. Briser long tasks

async function processInBatches(arr) {
  for (let i = 0; i < arr.length; i += 100) {
    arr.slice(i, i + 100).forEach(processItem);
    await new Promise(r => setTimeout(r, 0));
  }
}

2. Différer JavaScript non-critique

<script src="analytics.js" defer></script>

3. Utiliser requestIdleCallback

requestIdleCallback(() => { prefetchNextPage(); });

4. Montrer feedback pendant opérations lentes

UI optimiste fait sentir plus rapide.

5. Web Workers pour work CPU-lourd

Déplacer computation coûteuse hors main thread.

6. Réduire coût hydration React/Vue

Partial hydration, server components, resumability.

7. Optimiser event handlers

Debounce/throttle événements rapides.

8. Réduire scripts third-party

Ads + analytics + chat widgets compound.

Proxy lab : Total Blocking Time (TBT)

Pièges INP courants

• Event handlers long-running.
• Hydration pendant interaction utilisateur.
• Layout thrashing.
• Hydration lourde sur devices lents.
• Calls réseau synchrones dans handlers.
• Re-rendering huge component trees.
• Tag managers third-party.

FAQ : Interaction to Next Paint

Quel est un bon score INP ?

≤ 200ms au percentile 75.

Comment INP diffère-t-il de FID ?

FID mesurait SEULEMENT première interaction. INP mesure TOUTES end-to-end.

Pourquoi mon score Lighthouse est-il bon mais field INP est mauvais ?

Lighthouse ne peut mesurer INP directement. Utiliser TBT comme proxy lab.

Comment je trouve quelle interaction est lente ?

Web Vitals Chrome extension montre l'élément.

INP est-il la même chose que "page est laggy" ?

Approximativement.

Comment l'hydration affecte-t-elle INP ?

L'hydration est JavaScript executing — bloque main thread.

Qu'est-ce qui a remplacé FID ?

INP est devenu le Core Web Vital officiel le 12 mars 2024.

Testez les bundles JS INP-impacting avec LoadFocus

LoadFocus exécute des audits Lighthouse depuis 25+ régions globales, mesurant TBT. Inscrivez-vous sur loadfocus.com/signup.