Performance web

Améliorer l’INP : diagnostiquer une interaction qui répond trop tard

Un bouton semble bloqué ? Séparez l’action, le traitement et le retour visuel pour comprendre ce qui retarde la réponse de votre page.

Schéma original du dossier : Performance web
Repères pour ce dossier, illustration pédagogique originale.

Pour améliorer la réactivité d'une page, partez d'une interaction qui semble lente et observez ce qui retarde son prochain affichage. Réduire le poids initial du site ne suffit pas si un clic déclenche ensuite un long traitement. Le diagnostic doit relier une action précise à une trace de performance.

Décrire l'interaction avant de mesurer

Choisissez une action reproductible : ouvrir un filtre, sélectionner une option ou afficher un panneau. Notez l'état initial, les données déjà chargées et le résultat visible attendu. « Le site est lent » ne permet pas de rejouer le problème.

L'INP décrit la réactivité aux interactions pendant une visite. Il ne se confond pas avec le temps de réponse d'une requête distante ni avec la durée totale d'un traitement métier. Gardez ces différentes attentes séparées dans votre fiche.

Relier action, traitement et affichage

Enregistrez le parcours dans le panneau Performance des outils de développement du navigateur. Déclenchez une seule action cible, puis observez l'activité autour de ce moment. Cherchez ce qui occupe le navigateur avant le retour visuel : code, recalcul de disposition ou travail déjà en cours.

Notez les pistes sans conclure trop vite. Une longue activité simultanée n'est pas nécessairement provoquée par le bouton. Refaites la séquence depuis le même état et, si possible, comparez une version où une hypothèse est isolée. Conservez l'enregistrement pour qu'une autre personne puisse examiner le diagnostic.

Exemple fictif : filtrer un catalogue

Imaginons un catalogue qui recalcule toutes ses cartes lors de chaque sélection de filtre. Le bouton change peu visuellement et la page semble figée. La fiche décrit la sélection effectuée, le nombre d'éléments du jeu d'essai et le retour attendu, sans présenter ces données de test comme un trafic réel.

Préparez une modification limitée du traitement ou du rendu. Rejouez ensuite la même sélection avec le même jeu de données. Vérifiez que les résultats restent corrects, que le focus ne se perd pas et que la page peut recevoir une nouvelle action.

Un indicateur de chargement peut rendre une attente compréhensible ; il ne constitue pas à lui seul une preuve de traitement accéléré. Distinguez la clarté du retour visuel et la mesure de réactivité dans votre conclusion.

Contrôler plusieurs moments du parcours

Recommencez après un chargement neuf, puis après quelques actions. Un problème peut apparaître seulement lorsque des éléments s'accumulent ou qu'une fonction a déjà été utilisée. Conservez une liste de scénarios réalistes au lieu de cliquer au hasard jusqu'à obtenir un bon résultat.

Pour interpréter les rapports, consultez la distinction entre mesures de laboratoire et données terrain. Pour préparer les états et les attentes avant le code, vous pouvez tester le scénario dans un prototype. Le prototype aide à vérifier la compréhension ; il ne mesure pas la réactivité de l'application future.

Questions fréquentes

Un score de chargement élevé exclut-il une interaction lente ?

Non. Une page peut se charger correctement puis réagir lentement à une action. Le scénario doit inclure l'interaction concernée, avec son état initial et son résultat.

Faut-il retirer tout le JavaScript ?

Non. Cherchez le travail utile à la tâche et ce qui la retarde. Retirer une fonctionnalité nécessaire peut améliorer une mesure tout en empêchant l'utilisateur d'accomplir son objectif.

Comment savoir si la correction tient ?

Rejouez les scénarios avec des données comparables, contrôlez leur résultat et observez les mesures disponibles après publication. Signalez les environnements non testés et évitez de généraliser un seul essai.

Sources

Documentation consultée lors de la relecture du 10 septembre 2026.

Poursuivre votre lecture

Revenir au dossier