Depuis mars 2024, Google utilise l’Interaction to Next Paint (INP) à la place du First Input Delay (FID) dans les Core Web Vitals. Cette métrique aide à observer la réactivité d’une page lors des interactions réelles. Un score ne résume pas toute l’expérience : il doit être interprété avec les données de terrain, le type de page et les problèmes que rencontrent vraiment les visiteurs.
Qu'est-ce que l'INP exactement ?
Contrairement au FID qui mesurait uniquement le délai avant la première interaction, l'INP mesure le temps de réponse de TOUTES les interactions sur votre page : clics, touches de clavier, tapotements sur mobile. Il prend le 98e percentile de toutes les interactions enregistrées — ce qui signifie que même une seule interaction lente peut dégrader votre score.
Les seuils publiés par Google servent de repères : bon sous 200 ms, à améliorer entre 200 et 500 ms, et faible au-delà de 500 ms.
Les causes les plus fréquentes d'un mauvais INP
Le JavaScript qui bloque le fil principal est une cause fréquente. Les scripts tiers, les widgets et certaines bibliothèques peuvent ralentir les interactions lorsqu’ils demandent trop de travail au navigateur.
Les gestionnaires d’événements lourds : des calculs ou manipulations DOM déclenchés par un clic peuvent rendre l’interface moins réactive. Utilisez le profiler Chrome DevTools pour identifier les tâches qui durent trop longtemps.
Le rendu React non optimisé : les composants React qui re-rendent inutilement sur chaque interaction sont une cause majeure de mauvais INP dans les applications modernes.
Les solutions concrètes
Découpez les longues tâches JavaScript afin de redonner régulièrement la main au navigateur. Le bon correctif dépend du framework, du type d’interaction et de la source exacte du travail bloquant.
Chargez les scripts tiers de façon asynchrone et différée. Utilisez la stratégie "partytown" pour déplacer les scripts tiers dans un web worker, hors du thread principal.
Optimisez vos composants React avec React.memo, useMemo, et useCallback pour éviter les re-rendus inutiles. Utilisez le React Profiler pour identifier les composants problématiques.
Implémentez le Virtual Scrolling pour les longues listes (plus de 50 éléments) — rendre 1 000 éléments DOM simultanément est une recette pour un mauvais INP.
Comment mesurer votre INP actuel
Utilisez PageSpeed Insights (données de terrain réelles), Chrome DevTools Performance panel, ou l'extension Web Vitals. Attention : le laboratoire ne mesure pas l'INP — vous avez besoin de données de terrain (CrUX) pour une mesure précise.
Nos audits de performance incluent une analyse complète des Core Web Vitals avec un plan d'action priorisé. Contactez-nous pour optimiser votre site.
