Time to interactive, Speed Index : Quelles sont les nouvelles mesures de l’expérience utilisateur ?

25 février 2019 Par Posté dans Expertise
Le web est dynamique. A tel point que chacun (agence web, hébergeur, équipe digitale) vous jure que votre nouveau site est rapide comme l’éclair… même si personne n’est d’accord ni sur la mesure, ni sur les chiffres ! Il est temps de faire le point sur les différentes métriques qui s’offrent à vous et ce qu’elles vous disent de la performance de votre site.

 

Rapide ou pas rapide mon site ?

Depuis les années 2000, la mesure de la rapidité d’un site web fait partie des indicateurs clés de performance. On peut ainsi dire qu’aujourd’hui, la totalité des sites institutionnels à enjeux mesure d’une manière ou d’une autre la rapidité d’affichage de leur page d’accueil ou pour les sites web marchands la vitesse d’affichage du “tunnel d’achat” qui conduit de la page d’accueil jusqu’au paiement.

Dans un monde de plus en plus technologique et de plus en plus instantané, il est intéressant de voir que l’échelle de valeur n’a jamais changé : les valeurs de temps de réponse que recommandent les experts de l’expérience utilisateur sont les mêmes qu’il y a 30 ans ! La perception humaine de ce qui est “rapide” reste invariante et la règle 0.1 s – 1 s – 10 s promue par Jacob Nielsen en 1993 tient toujours (1). S’agissant des sites web, la mesure des temps de réponse de milliers de sites en France, en Europe et dans le monde par des solutions commerciales (dont ip-label) a permis de valider cette règle théorique de la seconde par l’exemple. Il est ainsi généralement admis aujourd’hui encore qu’une page simple devrait toujours se charger en moins de 2 secondes.

 

Le temps de chargement complet, toujours pertinent depuis 20 ans

LoadingVu du navigateur web, la mesure des temps de réponse se base sur la seule valeur disponible (et normée) par le W3C depuis 20 ans : le temps de chargement complet de la page est le temps nécessaire pour recevoir l’ensemble de tous ses éléments (images, code, contenu externe) (2). Cette métrique a été très utile initialement pour les pages simples du web 1.0.

Elle a depuis montré ses limites avec la généralisation dans les années 2010 des pages responsives et au chargement progressif Single-Page-App, lazy-loading généralisées maintenant avec les frameworks javascripts (Angularjs, Reactjs, Vuejs). Les progrès techniques aidant, plusieurs technologies sont en effet apparues, qui permettent de prioriser le chargement du contenu critique d’une page et de ne charger le reste que dans un deuxième temps. Ce principe de priorisation est même devenu avec le temps une bonne pratique soutenue entre autres par Google au travers de ses outils pour développeurs. GMail en est un bon exemple. La boite de réception n’est actualisée (dynamiquement) qu’après le chargement complet de la page (3). Conséquence de cette évolution vers des sites plus dynamiques, le temps de chargement complet de la page est petit à petit devenu obsolète, puisque ne reflétant plus du tout le vécu de l’utilisateur. Plusieurs solutions sont alors apparues pour proposer à nouveau une mesure pertinente du temps d’attente de l’utilisateur. Nous allons maintenant faire le point sur les options les plus intéressantes.

 

Le temps de chargement du contenu visible

Première critique du temps de chargement page complète : il est rare qu’une page tienne totalement dans la fenêtre de navigation. Elle est le plus souvent coupée en deux : d’une part la moitié qui est visible directement dans le navigateur et d’autre part la deuxième moitié qui, elle, ne devient visible qu’après scrolling. C’est la première partie qui est dite “au-dessus de la ligne de flottaison” ou “above the fold” en anglais.Iceberg

Dans la mesure où la partie « above the fold » marque un arrêt visuel et suffit à l’utilisateur pour réagir, il est tentant de se baser sur ce seul temps d’affichage “above the fold” pour mieux cerner l’expérience utilisateur. Cette mesure, parce qu’elle varie selon le contexte utilisateur (résolution écran, taille de la fenêtre, …), n’est pas calculable simplement. Elle ne peut être qu’estimée par des algorithmes plus ou moins précis. C’est pour dépasser ces limitations que les équipes techniques de Google ont souhaité définir une version améliorée du temps « above the fold ».

C’est ce projet qui a donné naissance en 2012 à la création du premier ‘speed-index’ (4). Le speed index est devenu, avec le temps et grâce au support actif de Google, l’un des candidats majeurs au remplacement du temps page complète. En pratique, le speed index est donc un indicateur calculé qui estime au mieux le temps nécessaire à l’affichage de la seule partie visible d’une page web. Il est possible de mesurer le speed index d’une page via des extensions de Google Chrome ou plus simplement en utilisant un service en ligne. Si vous souhaitez faire le test, nous vous proposons de tester notre service gratuit sur https://tools.ip-label.io (5).

 

Le temps d’interactivité de la page

Deuxième critique du temps de chargement complet : il est souvent possible de naviguer sur une page sans attendre la fin du chargement. Le temps d’attente utilisateur est donc souvent inférieur au temps de chargement complet. C’est en partant de ce constat que la communauté technique internet a cherché à mieux mesurer le vécu de l’internaute. Grace à cet effort mondial, le standard web (W3C) s’est enrichi fin 2012 de nouveaux indicateurs de performance : “Les navigations timings” (6).

Parmi les nouveaux chronos, la plupart ont une utilité technique. L’un d’eux nous intéresse particulièrement puisqu’il concerne directement le rendu utilisateur. Il porte le nom de temps d’interactivité (‘time to interact’). Qu’est-ce que le temps d’interactivité ? C’est le temps d’attente nécessaire avant qu’un utilisateur puisse cliquer dans la page, passer à la page suivante, … en bref interagir avec le site. Ce temps est donc là encore un temps intermédiaire, à mi-chemin entre le début de l’affichage de la page et le temps de chargement complet.

 

Que valent les nouveaux indicateurs en pratique ?

Faut-il privilégier le time to interactive ou se fier à Google et sa mesure de speed index ? Qu’est-ce-que ces métriques nous disent de notre site ? Faut-il abandonner le temps de chargement complet, survivance préhistorique des années 2000 ? C’est ce que nous avons voulu savoir en effectuant des mesures concrètes sur quelques sites web significatifs.

Premier cas : les temps sont dans le « bon ordre »

Intuitivement, on peut s’attendre à la hiérarchie de temps suivante : First byte (début de réponse du site web) – Start render (début d’affichage dans le navigateur) – Speed Index (affichage de toute la page visible du navigateur) – Time to interactive (la page est navigable par l’internaute) – On Load (le chargement est terminé)

Baume et Mercier : Les valeurs collectées pour Baume et Mercier respectent cet ordre intuitif.

Baume et Mercier load time

L’affichage du contenu de la page est réalisé en premier lieu et cela de manière extrêmement rapide en moins de 1 s (speed index = 0,8 s) (voir ci-contre). Les Baume et Mercierjavascripts arrivent ensuite (sans influence sur le rendu). Et la page devient utilisable en environ 2 s. La page se charge donc vite (2,3 s au total) avec une impression utilisateur encore plus rapide (1 s seulement pour l’affichage).

 

Deuxième cas : le temps de chargement qui triche !

La hiérarchie de temps théorique n’est pas toujours respectée en pratique. Dans le cas de Rolex.com (ci-dessous), le temps de chargement (0,9 s) est inférieur au temps d’affichage (speed index= 2,2 s).

Rolex load time

En suivi image par image, on comprend mieux pourquoi : la page est totalement chargée en moins de 1 s (image) mais compte tenu de la technologie utilisée l’affichage est encore vide ! Rolex - Rendu à 1s Figure 2 : Rendu à T=1s

Il faut attendre encore la deuxième seconde pour avoir un rendu conforme au résultat final.

Rolex - Speed Index Figure 3: Rendu à T=Speed Index

Dans cet exemple, le speed index montre bien son intérêt : c’est lui qui mesure le mieux le moment ou la page web est correctement affichée. Le temps de chargement complet est lui très flatteur mais clairement peu pertinent.

 

Quel temps choisir comme temps de référence ?

Compte tenu de la nature dynamique des sites internet modernes, la mesure du speed index et du time to interactive apparait aujourd’hui comme un complément indispensable au seul temps de chargement complet. Ces mesures, même si elles sont parfois divergentes, permettent de préciser l’expérience utilisateur et de relativiser dans un sens ou dans l’autre une simple mesure de chargement complet. Comme on l’a vu plus haut, les cas réels ne permettent pas de privilégier l’une ou l’autre des mesures comme la meilleure mesure de l’expérience utilisateur. On est obligé de décider au cas par cas pour choisir la bonne mesure de l’expérience utilisateur.

 

Et chez ip-label?

Time to interact (TTI)

L’offre cloud Datametrie ip-label intègre la mesure des navigations timings depuis 2015. Cette métrique est disponible pour tous les clients sur l’ensemble des pages web mesurées. Il vous suffit de le demander à vos interlocuteurs habituels. Et cela sans surcoût ! Une fois mise en place, elle est visible simplement dans l’onglet ‘métrique client’. (7) Time to Interact Figure 4: Exemple de rendu métrique client pour le TTI

L’offre Real User Monitoring prévoit également la collecte des navigations timings et donc du TTI.

Speed-Index

L’offre Datametrie proposera bientôt la mesure du Speed Index.  Cette nouvelle mesure fera l’objet d’un menu dédié aux indicateurs « web performance » dans l’interface. Speed Index

Sources: (1) https://www.nngroup.com/articles/response-times-3-important-limits/
(2) https://www.w3.org/TR/navigation-timing/
(3) Beyond onload de Steve Souders : https://www.stevesouders.com/blog/2013/05/13/moving-beyond-window-onload/
(4) https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index
(5) https://www.ip-label.co.uk/performance-wire/ip-label-tools-the-new-toolbox-for-accurate-web-optimizations/
(6) https://www.w3.org/TR/navigation-timing/
(7) Données internes Datametrie 2018

Laisser un commentaire

Votre adresse email ne sera pas publié