Time To Interactive

La perception de vitesse de chargement par les utilisateurs d’un site web est une expérience qu'aucune métrique ne peut pleinement saisir. Au cours de l'expérience de chargement par le navigateur, plusieurs étapes peuvent avoir une incidence sur celle-ci. Pour évaluer la vitesse de chargement de vos pages, plusieurs indicateurs sont à observer. Parmi eux le Start Render ou encore le Speed Index. Mais si ces métriques permettent de mesurer la vitesse d’affichage d’une page, elles ne permettent pas d’évaluer la capacité de vos pages à répondre rapidement à une interaction, alors que c'est un élément déterminant pour la qualité de l'expérience pour vos utilisateurs. Pour ce faire, vous avez besoin d'optimiser votre Time To Interactive (TTI).

Time To Interactive : définition

Le Time To Interactive est une métrique qui permet d'évaluer l'interactivité. Elle est indissociable de l’expérience utilisateur et doit être prise en compte dans le monitoring de votre performance web.

Il est important de préciser que le Time To Interactive n'est pas un indicateur standardisé. Il peut donc être amené à évoluer (suivez les évolutions de cet indicateur, et plus généralement de la webperf, en vous abonnant à notre newsletter mensuelle). Notez aussi que, bien que Google ait inclus cette métrique dans le calcul du score Lighthouse et PageSpeed Insights, son poids a baissé au cours de évolutions récentes du calcul du score, au point qu'il semble être amené à disparaître à terme.

La métrique TTI (Time To Interactive) donne une mesure du temps nécessaire à une page pour devenir interactive pour l’utilisateur, c'est-à-dire pour qu'elle réagisse au clic. Elle dépend du moment où :

  • la page affiche un contenu utile (défini par le First Contentful Paint)
  • les éléments les plus visibles de la page sont interactifs (cliquables, actifs au survol de la souris...)
  • la page répond aux interactions de l'utilisateur dans un délai maximum de 50 millisecondes.

source : dev.to

En pratique, l'algorithme pour calculer le TTI combine l'observation du waterfall et l'activité du réseau. Les trois étapes pour définir le Time To Interactive sont :

  • définir un point de départ pertinent, tel que le First Contentful Paint ou le Dom Content Loaded End ;
  • à partir de ce point, rechercher une fenêtre pendant laquelle le réseau est stable pendant 5 secondes (et ne contenant pas de tâches longues) ;
  • une fois trouvée, regarder en arrière et rechercher la fin de la dernière tâche longue et y reporter le Time To Interactive.

Nous ne pouvons donc pas estimer le TTI avant la fin de l'analyse du document.

Voici une illustration, pour mieux saisir le Time To Interactive :

Image source : Medium, Leonardo Zizzamia

Quelques précisions :

  • il n’est pas recommandé d’utiliser le First Meaningful Paint comme marqueur de départ, car cette métrique n’est pas standardisée ;
  • le TTI ne peut pas être détecté tant que le réseau n’est pas stable, mais la valeur réelle du TTI se situe toujours à la fin d'une tâche longue ;
  • il est nécessaire d’attendre au moins 5 secondes pour considérer une page comme interactive et signaler le TTI;
  • la mesure ne considère en effet pas une page comme interactive tant que la construction du DOM n’est pas terminée. Ainsi, le TTI attendra le DOMContentLoadedEnd, quand bien même celui-ci interviendrait après les 5 secondes de stabilité du réseau mentionné plus haut.

Time To Interactive : comment le mesurer ?

Certains sites optimisent la vitesse d’affichage du contenu et ne pensent pas à optimiser l'interactivité. Cela peut créer une expérience utilisateur frustrante : le site semble chargé, mais lorsque les utilisateurs tentent d'interagir, rien ne se produit. Quel dommage ! Pensez à mesurer et optimiser votre TTI, tout en sachant que c'est une métrique est à interpréter avec précaution.

Vous pourrez la monitorer notamment avec l’extension Lighthouse (disponible uniquement sur Chrome), via PageSpeed Insights ou encore WebPageTest.

Les outils de RUM ne peuvent pas, quant à eux, mesurer simplement le Time To Interactive.
Pour mesurer la capacité de vos pages à réagir aux interactions de vos utilisateurs avec des outils de RUM, vous pouvez vous appuyer sur le First Input Delay (qui fait partie des Core Web Vitals de Google).

Time To Interactive : comment l’améliorer ?

Le Time to Interactive est directement influencé par les scripts JavaScript qui peuvent bloquer le rendu de la page. Plus il y a de scripts, plus le TTI sera retardé. C'est d’autant plus vrai selon les devices puisque les performances matérielles varient considérablement d'un appareil à l'autre. Plus un processeur est lent, plus il prendra du temps à analyser et à compiler les scripts, et plus il faudra attendre pour que le navigateur réagisse suite à une interaction. Sur mobile par exemple, le CPU est bien plus limité que sur desktop : les sites chargés sur mobile sont donc d’autant plus impactés par ces JavaScript, et le Time To Interactive augmente alors considérablement.

La meilleure façon d'optimiser votre code pour améliorer votre TTI est donc de supprimer ou différer vos JavaScript, et pour y parvenir rapidement et efficacement, notre moteur propose une fonctionnalité prévue exactement pour ça : le DeferJS.

Envie de tester et de challenger votre web performance ?

Demandez une démo


Hello SMX Paris !