Comment optimiser l’INP, le futur remplaçant du FID en 2024 ?

Rappel sur l’INP

L’Interaction to Next Paint vise à représenter la latence d’interaction globale d’une page. Un INP correct se situe sous les 200ms.

Selon le site Web, il peut y avoir peu ou pas d’interactions, comme des pages contenant principalement du texte et des images avec peu ou pas d’éléments interactifs. Ou, dans le cas de sites Web tels que des éditeurs de texte ou des jeux, il peut y avoir des centaines, voire des milliers, d’interactions. Dans les deux cas, où il y a un INP élevé, l’expérience utilisateur peut être déceptive, voir faire fuir l’utilisateur…

Déterminez ce qui cause un mauvais INP

Trouver des interactions lentes sur le terrain

Déjà, il faut élucider au sein de vos pages quelles sont les causes d’un mauvais INP. On peut commencer par utiliser le rapport Chrome UX (CrUX). Ce rapport donne l’ensemble de données officiel du programme Web Vitals par Google. Bien que les données de CrUX seules ne vous donnent pas toutes les informations dont vous avez besoin pour résoudre des problèmes INP spécifiques, elles vous permettent déjà de savoir si vous avez un problème et sur quelles pages il se reproduit.

Diagnostiquer les interactions lentes en labo

Voici les 5 informations dont nous avons besoin pour donner un contexte aux raisons pour lesquelles les interactions ont été lentes.

JavaScript est un excellent moyen de trouver des interactions lentes, grâce à l’API Event Timing qui va nous fournir toutes ces informations notamment avec les propriétés d’interaction (interactionId). On peut aussi utiliser directement l’extension Web Vitals dans chrome.

1. La valeur INP

Il s’agit de l’élément clé de données que vous devrez collecter. La distribution de ces valeurs déterminera si la page respecte les seuils INP .

2. L’élément responsable de l’INP de la page

Connaître l’INP d’une page c’est bien, mais pas assez bien en soi. Sans savoir quel élément en était responsable, vous serez dans le noir. En enregistrant les chaînes de sélection d’éléments, vous saurez exactement quels éléments sont responsables des interactions.

3. L’état de chargement de la page pour l’interaction qui est l’INP de la page

Lorsqu’une page se charge, on peut supposer qu’il y a plus d’activité sur le thread principal entrainant ainsi une latence d’interaction plus élevée. Pendant le chargement de la page, une analyse HTML, une analyse de feuille de style, ainsi qu’une évaluation et une exécution JavaScript sont en cours. Savoir si une interaction a eu lieu pendant le chargement de la page ou après vous aide à déterminer si vous devez optimiser pour un démarrage plus rapide afin que les interactions aient plus de place sur le fil principal pour s’exécuter rapidement, ou si l’interaction responsable de l’INP de la page en elle-même est lente malgré tout.

4. Le startTime

La journalisation des interactions startTimevous permet de savoir exactement quand l’interaction s’est produite sur la chronologie des performances.

5. Le type d’événement

Le type d’événement est bon à savoir, car il vous indiquera si l’interaction est le résultat d’un click, keypressou d’un autre type d’événement éligible. Une interaction utilisateur peut contenir plusieurs rappels et peut vous aider à identifier exactement quel rappel d’événement dans l’interaction a mis le plus de temps à s’exécuter.

Quelques indicateurs à suivre pour limiter l’impact de l’INP

Avant d’attendre un an pour savoir si votre INP sera au top pour mars 2024, prenez connaissance des infos citées ci-dessus et contrôler plusieurs indicateurs qui sont intiment liés à l’INP comme vous pourrez le lire ci-après.

• Le TBT, le Total Blocking Time, reste une valeur sûre, il est révélateur de pleins de choses notamment au chargement de la page. Un TBT correct est en dessous de 200ms.
• Compléter cet indicateur avec un suivi du CPU time. Le CPU Time correct serait selon YellowLabTools de 500ms.
• Le nombre d’éléments dans le DOM. Ce nombre étant correct jusqu’à 1500 éléments.

Si vous approchez ces seuils, normalement votre INP devrait être correct ou ne devrait pas être trop dur à rectifier.

Optimiser les interactions

Une fois que vous avez identifié une interaction lente et que vous pouvez la reproduire en laboratoire, l’étape suivante consiste à l’optimiser. Les interactions peuvent être décomposées en trois phases :

1. Le délai d’entrée, qui correspond au temps pour que l’interaction soit pris en compte avant le déclenchement du traitement.
2. Le temps de traitement, qui correspond au temps nécessaire pour que les callbacks s’exécutent jusqu’à la fin.
3. Le délai de présentation, qui est le temps nécessaire au navigateur pour présenter le prochaine affichage contenant le résultat visuel de l’interaction.

La somme de ces trois phases est la latence totale d’interaction. Chaque phase d’une interaction contribue un certain temps à la latence totale de l’interaction, il est donc important de savoir comment vous pouvez optimiser chaque partie de l’interaction afin qu’elle dure le moins de temps possible.

Optimiser le délai d’entrée

3 pistes de réflexion pour optimiser le délai d’entrée :

• Évitez les timers récurrents (setTimeout ou setInterval) qui déclenchent un travail excessif du thread principal.
• Évitez les tâches longues.
• Soyez conscient du chevauchement des interactions qui se produisent en parallèle.

Optimiser les temps de traitements

Le principe de base est de limiter les temps d’exécution dans le thread principal quelques l’état de la page en cours.

Réduire les taches longues au chargement

Un aspect critique de l’interactivité dans le cycle de vie de la page se situe au démarrage. Il est important de se rappeler que ce n’est pas parce qu’une page s’est affichée qu’elle a fini de se charger. En fonction du nombre de ressources dont une page a besoin pour devenir pleinement fonctionnelle, il est possible que les utilisateurs tentent d’interagir avec la page alors qu’elle est encore en cours de chargement.

Une chose qui peut prolonger le délai d’entrée d’une interaction pendant le chargement d’une page est l’évaluation du script. Une fois qu’un fichier JavaScript a été extrait du réseau, le navigateur a encore du travail à faire avant que JavaScript puisse s’exécuter ; ce travail comprend l’analyse d’un script pour s’assurer que sa syntaxe est valide, sa compilation, puis son exécution finale.

Selon la taille d’un script, ce travail peut introduire de longues tâches sur le thread principal, ce qui retardera la réponse du navigateur aux autres interactions de l’utilisateur. Pour que votre page reste réactive lors du chargement de la page, il est important de comprendre ce que vous pouvez faire pour réduire les tâches longues lors du chargement de la page.

Optimiser les callbacks

Après une interaction l’utilisateur attend un rendu visuel qui lui indique que sa requête a été prise en compte. Si il y a plusieurs traitements pour une même interaction, vous risquez d’encombrer le thread principal. Bref, de créer une tâche longue et de bloquer toutes interactions suivantes.

Une technique avancée consiste à structurer le code dans vos callbacks pour limiter ce qui est exécuté immédiatement pour la mises à jour de l’affichage. Tout le reste du traitement peut être reporté à une tâche ultérieure. Il s’agit en découper en petit taches ce qui doit être fait et de prioriser les taches de rendus visuel. Voire même de découper le rendu en plusieurs étapes. Cela permet de garder les callbacks légers et agiles. Mais aussi d’améliorer le temps de rendu des interactions en ne bloquant pas les mises à jour de l’affichage.

Minimiser le délai de présentation

Là encore 3 pistes de réflexion :

• Minimiser la taille du DOM
  
  Un grand DOM est problématique dans deux cas :
  • Lors du rendu initial de la page, où un grand DOM nécessite beaucoup de travail pour rendre l’état initial de la page.
  • En réponse à une interaction de l’utilisateur, où un grand DOM peut rendre les mises à jour de rendu très coûteuses, et donc augmenter le temps nécessaire au navigateur pour présenter l’image suivante.
• Soyez conscient des coûts de performance du rendu HTML
  
  Là où il y a HTML, il y a analyse HTML, et une fois que le navigateur a fini d’analyser HTML dans un DOM, il doit lui appliquer des styles, effectuer des calculs de mise en page, puis restituer cette mise en page. Il s’agit d’un coût inévitable, mais la façon dont vous procédez au rendu du HTML est importante.
• Utilisez content-visibility
  
  Une façon de limiter la quantité de travail de rendu pendant le chargement (et le travail de rendu asynchrone) consiste à s’appuyer sur la propriété CSS content-visibility. Ce qui revient à faire un rendu graphique « paresseux » (ou lazily render). Les éléments sont traités au fur et à mesure qu’ils approchent du viewport.
  
  NB : cela demande  un peu de pratique pour être bien maitrisé et utilisé efficacement. Mais cela vaut la peine de vérifier si le résultat a un temps de rendu inférieur qui peut donc améliorer l’INP de votre page.

Conclusion

L’amélioration de l’INP de votre site est un processus itératif. Lorsque vous corrigez une interaction lente, il y a de fortes chances que vous commenciez à trouver d’autres interactions lentes et que vous deviez également les optimiser… Attention, vous ne pourrez plus cacher la poussière sous le tapis. Certaines techniques pour tricher avec les indicateurs, notamment en différant le chargement de script après une 1ère interaction, ne pourront plus masquer une web performance médiocre. Pour rappel, l’INP est mesuré durant la totalité du temps passé sur la page !

La clé de l’amélioration de l’INP est la persévérance. Avec le temps, vous améliorerez la réactivité de votre page et donc de l’expérience utilisateur. Il est également fort probable que lorsque vous développerez de nouvelles fonctionnalités pour vos utilisateurs, vous devrez suivre le même processus itératif pour optimiser les interactions qui leur sont spécifiques. Cela prendra du temps et des efforts, mais c’est du temps et des efforts bien investis.

Dans tous les cas, une agence web rennaise a quelques clefs pour vous accompagner. N’hésitez pas contactez-nous…

Source : https://web.dev/optimize-inp/