INP

L'Interaction to Next Paint évalue le temps qui s'écoule entre une action de l'internaute et la mise à jour visible de la page qui la suit. Un bouton qui ne réagit pas tout de suite, un menu qui s'ouvre avec retard, un champ de saisie qui affiche les lettres par saccades : c'est ce que l'INP mesure. Il fait partie des trois Core Web Vitals, avec le LCP et le CLS.

Le successeur du FID

L'INP est devenu un Core Web Vital le 12 mars 2024. Il a remplacé à cette date le FID (First Input Delay), retiré du programme. La différence de périmètre est nette. Le FID ne s'intéressait qu'au délai avant le traitement de la première interaction. L'INP observe toutes les interactions de la visite, et chacune sur toute sa durée, jusqu'à l'affichage qui en résulte. Les outils et les documents qui citent encore le FID comme indicateur de réactivité sont donc dépassés.

Ce que l'INP mesure

Trois types d'interactions comptent : le clic de souris, l'appui sur un écran tactile et la frappe sur un clavier, physique ou virtuel. Le survol, le zoom et le défilement ne sont pas pris en compte. Chaque interaction se décompose en trois phases :

• le délai d'entrée, avant que les gestionnaires d'événements commencent à s'exécuter ;
• la durée de traitement, le temps d'exécution de ces gestionnaires ;
• le délai de présentation, jusqu'à l'affichage de l'image suivante à l'écran.

La valeur retenue pour une visite est en général celle de la pire interaction observée. Sur les pages où les interactions sont très nombreuses, la valeur la plus haute est écartée pour chaque tranche de 50 interactions, afin de ne pas juger une page sur un incident isolé. Une visite sans clic, appui ni frappe ne produit pas d'INP. C'est aussi le cas des robots qui chargent la page sans interagir.

Les seuils

INP	Évaluation
200 ms ou moins	Bon
De 200 à 500 ms	À améliorer
Plus de 500 ms	Mauvais

Comme pour les autres Core Web Vitals, on regarde le 75e centile des visites, séparément sur mobile et sur ordinateur.

Améliorer l'INP

Un INP élevé signale un fil principal du navigateur trop occupé : tant qu'un script s'exécute, le navigateur ne peut ni traiter l'interaction ni redessiner la page. Les recommandations de Google portent sur ce point.

• Découper les tâches longues, pour rendre la main au navigateur entre deux morceaux de travail.
• Dans un gestionnaire d'événement, mettre à jour l'affichage d'abord et différer le reste.
• Éviter de modifier des styles puis de lire aussitôt des dimensions dans la même tâche, ce qui force un recalcul de la mise en page.
• Réduire la taille du DOM, et différer le rendu des zones hors écran avec la propriété CSS content-visibility.
• Alléger les scripts exécutés pendant le chargement, qui bloquent aussi les premières interactions.

Exemple : la confirmation visuelle est affichée tout de suite, et l'envoi de statistiques, qui n'est pas urgent, part dans une tâche séparée.

bouton.addEventListener('click', () => {
  afficherConfirmation(); // visible dès l'image suivante
  setTimeout(() => {
    envoyerStatistiques(); // traité dans une autre tâche
  }, 0);
});

Mesurer l'INP

L'INP dépend d'interactions réelles. Il se mesure donc surtout sur le terrain. PageSpeed Insights affiche les données du Chrome User Experience Report, que la Google Search Console reprend dans son rapport Core Web Vitals. La bibliothèque JavaScript web-vitals permet aussi de collecter l'INP de ses propres visiteurs et d'identifier les interactions les plus lentes. Un test de laboratoire qui se contente de charger la page, sans interagir avec elle, ne produit pas d'INP. Certains outils affichent alors le Total Blocking Time, une approximation qui ne le remplace pas : un bon score de performance ne garantit pas un bon INP.