Tracer une interaction réelle
L’INP prend en compte les interactions survenant pendant la visite d’une page, et retient celle qui représente le mieux sa pire réactivité. Le délai peut venir du traitement de l’entrée, de longues tâches JavaScript, d’un travail de mise en page synchrone ou d’un affichage retardé par d’autres tâches. Un clic qui finit par aboutir peut quand même donner une impression de lenteur.
Comment l’inspecter
Utilisez les données de terrain pour repérer les groupes de pages concernés, puis enregistrez une trace pendant une action réaliste : tap, clic ou touche. Décomposez l’interaction en délai d’entrée, temps de traitement et délai d’affichage. Testez la route sur un profil d’appareil contraint : une trace prise sur ordinateur peut masquer la saturation du thread principal.
Comment l’implémenter ou l’améliorer
Retirez les traitements synchrones inutiles du gestionnaire d’événement, découpez les longues tâches, évitez les allers-retours de mise en page (layout thrashing) et affichez rapidement le prochain état utile. Vérifiez que l’interaction se termine toujours, qu’elle reste accessible au clavier et qu’elle ne décale pas la page. Comparez des traces comparables avant et après la modification.
Limites et erreurs fréquentes
N’optimisez pas seulement le premier clic, et ne remplacez pas le travail d’interaction par un simple spinner superficiel. La page doit réellement accuser réception de l’action et mener à bien la tâche de l’utilisateur.
Triez un constat INP en décomposant l’interaction en délai d’entrée, temps de traitement et délai d’affichage. Notez le clic, le tap ou l’action clavier exacts, l’élément concerné et le profil d’appareil. Une longue tâche avant le gestionnaire signale une contention sur le thread principal ; un gestionnaire lent peut effectuer un calcul synchrone ; un affichage retardé peut venir d’un travail de style ou de mise en page après le gestionnaire. Par exemple, un clic sur un filtre qui reconstruit de façon synchrone une grande liste peut être amélioré en réduisant le périmètre de la mise à jour et en cédant la main aux traitements non essentiels, mais le résultat doit toujours signaler la progression et rester utilisable au clavier. Rejouez la même interaction après la modification et inspectez à la fois la trace et la réponse visible.