Speed Index UX

Le nerf de la guerre aujourd’hui : c’est le clic. Et c’est d’ailleurs pour ça que l’utilisateur (et l’expérience utilisateur) est au coeur des stratégies.
Or l’une des premières barrières à la bonne expérience de l’internaute est le temps de chargement des pages. Nous l’avons tous connu cette page blanche interminable qui refuse de se charger… Combien de temps avez-vous attendu, vous ?
Et bien, sachez qu’en moyenne, un internaute s’impatiente à partir de seulement 2 secondes. Il est donc clair que le temps de chargement est un enjeu primordial de l’expérience utilisateur !

Voici quelques métriques clés qui ont, au fil des ans, permis de mesurer le temps de chargement :

Le loading time : l’ancêtre de la métrique webperf

La 1ère métrique a été le loading time (à savoir le temps de chargement global d’une page).
Elle a longtemps été la valeur de référence de la webperf. Toutefois, le loading time n’est pas représentatif de l’expérience utilisateur car l’attention de l’internaute est saisie dès l’apparition des premiers éléments. Un internaute n’attendra donc pas le chargement de la totalité de la page pour commencer à interagir avec le site. Le loading time ne rend donc pas compte de la perception de la vitesse du site pour un internaute.

Le Start Render et le Time To Interact : 2 métriques UX ?

Sont ensuite arrivés le Start Render et le Time to Interact.

  • Le Start Render est le moment où la page blanche laisse place aux premiers éléments de la page web.
  • Le Time to Interact est le moment où le contenu principal est affiché et pour lequel l’utilisateur peut commencer à s’engager de façon significative.

Si le Start Render et le Time to Interact sont des métriques qui illustrent déjà mieux l’expérience utilisateur, elles ne suffisent pas pour illustrer la réalité de l’internaute. Elles permettent toutes les deux de mesurer des moments clés de l’expérience utilisateur mais ne mesurent cependant pas l’intégralité de cette expérience. (voir exemple de la partie suivante)

C’est pourquoi, la métrique de référence aujourd’hui est le Speed Index.

Le Speed Index : la métrique de référence

Concrétement qu’est ce que le Speed Index ?

Le Speed Index met en lumière le rythme auquel les élements au-dessus de la ligne de flottaison s’affichent (comme le démontre l’image ci-dessous).
Vignette chargement page - Speed Index

Il s’exprime via un score global : plus le score est bas, plus la page s’est affichée rapidement. (Nous en reparlerons tout à l’heure).
Voici un exemple pour mieux comprendre le fonctionnement du Speed Index :
On illustre ici la progression visuelle du chargement des pages A et B en exemple ci-dessus.

Courbe du Speed Index

On constate que les pages A et B ont des temps de chargement total identiques d’environ 12 secondes et des Start Render identiques d’environ 300ms. Cependant, on peut voir que plus de 90% de la page A est chargée en environ 1 seconde. Au contraire, seul 20% de la page B est affichée lors de la 1ère seconde et il faut attendre près de 10 secondes pour obtenir un rendu visuel proche de la page A.

Cet exemple est très intéressant car sans le Speed Index, le propriétaire du site ne pourrait pas perçevoir que la page A se charge mieux que la page B puisque les deux pages ont des Start Render et loading time identiques.

Comment se calcule le Speed Index ?

Reprenons l’exemple de nos pages A et B ci-dessus.
Pour calculer le Speed Index, il faut mesurer la surface au-dessus de la courbe comme indiqué dans les graphiques ci-dessous :

Courbe du Speed Index
Méthode de calcul du Speed Index

Dans cet exemple nous pouvons voir que le Speed Index calculé de la page A est 1219 alors que celui de la page B est 9022.
Le Speed Index montre ici clairement ce que nous pouvions voir sur les screenshot de la 1ère partie : la page A est mieux optimisée (score le plus bas) que la page B (score le plus haut).

Pour les plus matheux, voici la formule à suivre :
formule math Speed Index

Et si on met les mathématiques de côté, on peut simplement se poser la question suivante : aurez-vous une meilleure sensation de vitesse :

    • sur un site qui se charge entièrement en 6 secondes mais dont les éléments commencent à s’afficher dès la 1ère seconde ?

ou

  • sur un site qui ne met que 5 secondes à se charger intégralement mais dont les premiers éléments ne s’affichent qu’au bout de 3 secondes ?

Notez que cette métrique est aujourd’hui uniquement disponible sur Webpagetest, bien que certains navigateurs implémentent des métriques similaires (msFirstPaint sur IE9+, firstPaintTime sur Chrome).

Pour plus d’information sur le calcul du score, je vous invite à consulter la documentation de webagetest.

Pour en savoir plus sur les métriques clés de la Webperf :

Emilie, Fasterize.

VOUS AIMEREZ PEUT-ÊTRE AUSSI...

Black Friday et Cyber Monday 2018 : analyse d’un e... Le top départ des achats de Noël a officiellement été lancé le 23 novembre dernier. A 9h00, les sites que nous optimisons connaissaient déjà...
Insight, pour évaluer la rapidité de votre site, e... Connaissez-vous Insight, l’outil de Fasterize qui vous permet d’analyser gratuitement et en quelques instants la rapidité de votre site web ...
Classement webperf : le top 20 des sites e-commerc... Peut-être connaissez-vous déjà le classement que nous publions en partenariat avec le JDN chaque mois : nous y décortiquons la webperf mobil...
Web performance : arrêtons de parler des 100 milli... Fasterize a co-organisé We Love Speed 2018, le premier événement national dédié à la performance web au cours duquel Stéphane Rios a remis l...