Interaction to Next Paint (INP)

L'INP a remplacé le FID en mars 2024. Il mesure la réactivité de la page à toutes les interactions (clic, toucher, clavier) pendant la visite. Objectif : moins de 200 ms.

Mis à jour le

Les 3 phases d'une interaction

  • Délai d'entrée : le thread principal est occupé par une autre tâche.
  • Traitement : durée des gestionnaires d'événements.
  • Délai de présentation : calcul du style, de la mise en page et du rendu suivant.

Actions prioritaires

  • Découper les longues tâches JavaScript et rendre la main au navigateur :
  • Supprimer ou différer le JS inutile (defer et async) et auditer les scripts tiers.
  • Déporter les calculs lourds dans des Web Workers.
  • Limiter la taille du DOM ; content-visibility: auto allège le rendu initial (MDN).
async function traiter(items) {
  for (const item of items) {
    travailler(item);
    if (globalThis.scheduler?.yield) await scheduler.yield();
    else await new Promise(r => setTimeout(r));
  }
}

Voir aussi web.dev/inp, puis LCP et CLS pour compléter l'audit des Core Web Vitals.