INP : définition, seuils et remplacement du FID

L'INP (Interaction to Next Paint) mesure la latence de toutes les interactions d'un utilisateur avec une page — clics, appuis tactiles, frappes clavier — et retient la pire latence observée pendant toute la session, avec une tolérance pour ignorer quelques valeurs aberrantes.

Contrairement au FID qui ne capturait que la première interaction, l'INP donne une vision complète de la réactivité tout au long de la navigation. Les seuils officiels Google :

• Bon (vert) : moins de 200 ms
• À améliorer (orange) : entre 200 ms et 500 ms
• Mauvais (rouge) : au-delà de 500 ms

L'INP mesure trois phases distinctes : le délai d'entrée (temps avant que le navigateur commence à traiter l'événement), le temps de traitement (durée des gestionnaires d'événements) et le délai de présentation (temps avant le prochain affichage de la frame).

La principale cause des mauvais INP est l'exécution de longues tâches JavaScript sur le thread principal, qui bloquent le traitement des interactions utilisateur.

L'INP est désormais le signal officiel de réactivité dans les Core Web Vitals depuis mars 2024. Un mauvais INP donne une impression de lenteur ou de gel, même si la page s'est chargée rapidement.

Sur les applications web riches en JavaScript (SPA, e-commerce dynamique, outils SaaS), l'INP est souvent le Core Web Vital le plus difficile à optimiser. Un bon INP est directement corrélé à un meilleur taux de rétention et d'engagement des utilisateurs.

1. 1Découpez les longues tâches JavaScript en utilisant `scheduler.yield()` ou `setTimeout()` pour libérer le thread principal.
2. 2Réduisez le JavaScript initial avec du code-splitting et du lazy loading.
3. 3Optimisez les gestionnaires d'événements pour qu'ils soient légers et délèguent les traitements lourds à des web workers.
4. 4Mémoïsez les composants React ou Vue pour éviter les re-rendus inutiles (`React.memo`, `useMemo`).
5. 5Profilez vos interactions avec Chrome DevTools (onglet Performance) pour identifier les interactions lentes.