Time To Interactive

La perception de vitesse de chargement d’un site web est une expérience qu'aucune métrique ne peut pleinement saisir. Au cours de l'expérience de chargement, plusieurs étapes peuvent avoir une incidence sur celle-ci. Alors pour comprendre si votre site est lent ou rapide, plusieurs métriques sont à challenger. Parmi elles, le Start Render et le Speed Index. Mais si elles permettent de mesurer la vitesse d’affichage d’une page, elles ne permettent pas d’évaluer l’interactivité d’une page, qui est un élément déterminant en matière d’expérience utilisateur. Voilà pourquoi nous vous présentons aujourd’hui : le Time To Interactive. 

Certains sites optimisent la vitesse d’affichage du contenu au détriment de l'interactivité. Cela peut créer une expérience utilisateur frustrante : le site semble chargé, mais lorsque l'utilisateur tente d'interagir avec lui, rien ne se produit.

Il est important de préciser que le Time To Interactive est une nouvelle métrique. Elle n’est donc pas standardisée et doit encore faire ses preuves. Elle peut donc être amenée à évoluer. Mais bien qu’elle soit à analyser avec précaution, le Time To Interactive est la métrique la plus proche de la notion d’interactivité. Or, nous pensons que l’interactivité est à l’heure actuelle indissociable de l’expérience utilisateur et doit être prise en compte dès maintenant dans le monitoring de votre webperf. C’est pourquoi nous avons fait le choix de l’intégrer dans le classement webperf que nous publions chaque mois en partenariat avec le Journal Du Net. Désormais, le classement intégrera la moyenne du Speed Index et du Time To Interactive.

Time To Interactive : kesako ?

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 encore 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 intéractive 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 ?

Le Time To Interactive est une nouvelle métrique. Elle n’est donc pas encore disponible sur la totalité des outils de mesure et elle est à interpréter avec précaution. Vous pourrez cependant la mesurer avec l’extension lighthouse (disponible uniquement sur Chrome), via le nouveau Page speed insight ou encore via webpagetest.
Les outils de RUM ne peuvent pas, quant à eux, mesurer simplement le Time to interactive. Une autre métrique RUM complémentaire émerge donc : le First Input Delay.

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é. Cela est d’autant plus impactant selon les devices puisque les performances des scripts varient considérablement d'un device à l'autre. Plus un processeur est lent, plus il prendra du temps à analyser et à compiler les scripts. 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 JS et le Time To Interactive augmente alors considérablement.

La meilleure façon donc d’améliorer votre TTI est de supprimer ou différer vos JavaScripts et pour y parvenir rapidement et efficacement, nous vous recommandons évidemment de vous appuyer sur Fasterize qui propose cette fonctionnalité.
L’heure est au nettoyage de printemps !

Envie de challenger votre web performance ?

Demandez une analyse gratuite

VOUS AIMEREZ PEUT-ÊTRE AUSSI...

4 pièges à éviter pour optimiser efficacement votr... Par manque de temps ou de ressources, la webperf ou l'amélioration des temps de chargement des pages web sont parfois reléguées au second plan. Dom...
CMS et temps de chargement des pages web Quel système de gestion des contenus (CMS, Content Management System) choisir pour garantir un temps de chargement optimal des pages de votre site ...
Le Early Hint ou comment précharger les assets d’u... Peut-être avez-vous déjà entendu parler du Early Hint ? Ou peut-être du code HTTP 103 ? Cette fonctionnalité, en cours de standardisation pa...
Traffic Limiter : pour activer le système de déles... En période de soldes ou pendant le Black Friday / Cyber Monday, une page de débordement - ou système de délestage - permet de définir un nom...