Les trois composantes de l'INP (Interaction to Next Paint)

Pour garantir une expérience utilisative fluide, Google met l'accent sur la métrique INP (Interaction to Next Paint). L'INP mesure le temps entre l'action d'un utilisateur (clic, toucher, frappe clavier) et l'affichage du résultat visuel. Une page réactive est cruciale pour le référencement et la satisfaction des visiteurs.

Les trois composantes de l'INP

Toute interaction peut être décomposée en trois phases successives :

1. Délai d'entrée (Input Delay) : « commence lorsque l'utilisateur initie une interaction avec la page et se termine lorsque les callbacks d'événement de l'interaction commencent à s'exécuter. »
2. Durée de traitement (Processing Duration) : « correspond au temps nécessaire pour que les callbacks d'événement s'exécutent complètement. »
3. Délai de rendu (Presentation Delay) : temps nécessaire au navigateur pour afficher l'image suivante contenant le résultat visuel de l'interaction .

Les seuils de performance sont :

• Bon : moins de 200 ms.
• À améliorer : entre 200 et 500 ms.
• Mauvais : plus de 500 ms.

Recommandations actionnables par composante

1. Délai d'entrée élevé

Un délai d'entrée élevé signifie que le thread principal était occupé par d'autres tâches avant que les callbacks de votre interaction puissent commencer . L'interaction elle-même « peut ne pas être la cause directe d'un INP lent » .

Solutions :

• Évaluez s'il y a un travail excessif sur le thread principal pendant que les utilisateurs tentent d'interagir .
• Visez à garder « chaque partie d'une interaction aussi courte que possible » .

2. Durée de traitement élevée

Une durée de traitement élevée indique que « les gestionnaires d'événements de l'interaction sont la cause directe d'un INP lent » .

Solutions :

• Réduisez ou reportez le travail effectué par les gestionnaires d'événements .
• Auditez tous vos écouteurs : « Tout code qui s'exécute dans un écouteur d'événements retardera l'interaction. » Cela inclut votre propre code, mais aussi celui des frameworks et des scripts tiers .
• Utilisez le fractionnement de code, le chargement progressif et la fragmentation des longues tâches .

3. Délai de rendu élevé

Un délai de rendu élevé signale un problème de rendu après l'exécution de vos callbacks .

Solutions :

• Concentrez-vous sur la réduction de la phase la plus lente de chaque interaction .
• Testez différentes interactions utilisateur lors de l'enregistrement pour identifier les plus gros contributeurs d'INP .

Approche globale

« En règle générale, vous voulez garder chaque partie d'une interaction aussi courte que possible pour que votre site web ait la meilleure chance d'atteindre le seuil 'bon' de la métrique INP, quel que soit l'appareil de l'utilisateur. »

Pour un diagnostic précis, utilisez la ventilation INP dans Chrome DevTools (Performance Insights) qui vous permet d'identifier la phase à optimiser .