Speed Index : tout savoir sur cet indicateur majeur de la performance web

C’est un credo chez Dareboost : pour rendre compte de la performance globale de vos pages web, il est nécessaire de s’appuyer sur plusieurs indicateurs. Toutefois, certains se montrent plus synthétiques et révélateurs que d’autres. Et à ce jour, nous considérons le Speed Index comme l’un des indicateurs les plus importants à analyser. Revenons sur les raisons qui font du Speed Index une mesure essentielle : que retranscrit cet indice ? Comment le calcule-t-on ? Comment interpréter correctement les valeurs obtenues ?

Vos visiteurs trouvent-ils votre site web assez rapide ? C’est certainement l’une des principales informations que vous cherchez à connaître en mesurant votre performance web. Pour autant, répondre correctement à cette question n’est pas si simple !

En effet, aucun des indicateurs traditionnels (le temps de chargement complet en premier lieu) ne permet d’obtenir des résultats fiables et révélateurs concernant l’expérience utilisateur. Ce qui explique l’émergence, au cours des dernières années, de nouveaux indicateurs tels que le Speed Index, conçus pour apporter des résultats plus pertinents sur le sujet. Examinons en détail les principales caractéristiques du Speed Index, faisant de lui un bon moyen d’évaluer l’expérience utilisateur en matière de vitesse.

Le Speed Index ne marque pas un instant T

Voilà une toute première caractéristique, qui fait du Speed Index un cas à part dans la panoplie des indicateurs de performance web : à l’inverse de toutes les autres mesures que vous pourrez rencontrer, le Speed Index n’est pas un nouveau jalon à poser sur la timeline du chargement de vos pages web. Bien que généralement exprimé en millisecondes, c’est le résultat d’un calcul. Avec un objectif : retranscrire la vitesse moyenne d’affichage de la page web dans toute sa progressivité.

Avant d’aborder cette notion de progressivité d’affichage, arrêtons-nous un moment sur cette première particularité : le Speed Index se conçoit comme un score évaluant globalement la rapidité d’affichage de la page web. À ce titre, il s’agit davantage d’une mesure de vitesse que de temps à proprement parler. Ce qui en fait un outil synthétique particulièrement pratique pour comparer et surveiller les performances des pages web, telles que perçues par les internautes.

Le Speed Index est centré sur la perception des utilisateurs

Le Speed Index se base sur ce que voit l’utilisateur et pas sur ce que fait techniquement le navigateur web. Cette caractéristique unique fait du Speed Index un indicateur bien plus révélateur de l’expérience utilisateur que, par exemple, le temps de chargement complet.

Plus les pages web se complexifient et chargent des éléments invisibles pour l’utilisateur, ou situés sous la ligne de flottaison, plus le délai de chargement total se prolonge au-delà du moment où tout le contenu directement visible par l’utilisateur est effectivement affiché.
Patrick Meenan, traduit de « Introducing the Speed Index »

Concrètement, la mesure du Speed Index se base sur la partie de la page directement visible par le visiteur (au dessus de la ligne de flottaison). Conséquence logique : cet indicateur est très sensible à la taille du viewport. Illustration avec l’exemple ci-dessous indiquant le Speed Index d’une seule et même page, testée avec une connexion web identique, mais avec deux tailles de viewport différentes :

Différentes tailles de viewport = différents Speed Index

Différentes tailles de viewport = Différentes valeurs de Speed Index !

Gardez donc en tête qu’il vous faudra mesurer le Speed Index d’une page avec différentes tailles de viewport, correspondant aux configurations les plus souvent utilisées par vos utilisateurs.

Bien entendu, il ne s’agit pas là du seul et unique facteur modifiant la mesure du Speed Index. Comme les autres indicateurs de performance web, il dépend aussi de la connexion web du visiteur (débit et latence).

Mesurer la progressivité de l’affichage

La progressivité d’affichage, sur laquelle se base le calcul du Speed Index, est mesurée à partir d’un enregistrement vidéo du chargement de la page web. Cet enregistrement étant réalisé par l’outil de mesure que vous utilisez (comme le service de test Dareboost par exemple).

D’autres indicateurs se basent également sur l’analyse de cette vidéo. Examinons-les rapidement pour mieux comprendre ensuite comment le Speed Index est calculé et quelles informations complémentaires il apporte :

  • Le délai avant début d’affichage (Start Render) indique le moment où le tout premier élément s’affiche sur l’écran de l’utilisateur – dans le viewport du visiteur pour être plus précis, puisque l’analyse vidéo ne concerne que la partie directement visible de la page, au dessus de la ligne de flottaison.
    Cet indicateur, particulièrement intéressant d’un point de vue UX, marque donc l’instant où le visiteur ne fait plus face à un écran totalement vierge. Attention toutefois : le premier élément qui s’affiche n’est pas obligatoirement significatif pour l’utilisateur (cela peut être une couleur de fond ou n’importe quel élément visuel mineur).
  • Le délai avant fin d’affichage (Visually Complete) mesure le temps nécessaire pour que la partie visible de la page web soit affichée sous sa forme finale. Voici quelques explications complémentaires, issues de notre documentation : « L’état final de la page est capturé à la fin de l’analyse, c’est à dire quand Dareboost a détecté la fin du trafic réseau associé au chargement. L’analyse de la vidéo permet ensuite à Dareboost d’identifier à quel moment cet état final a pu être atteint ».

Voilà donc deux marqueurs intéressants pour analyser l’expérience utilisateur : à quelle vitesse l’affichage de la page démarre et se termine. Néanmoins, il nous manque encore une information capitale : comment les choses se passent-elles entre ces deux jalons ? Prenons un exemple caricatural pour mettre en exergue ce manque d’information : deux pages web enregistrant strictement les mêmes délais avant début (500 ms) et fin d’affichage (2 secondes) :

  • la page A s’affiche progressivement et 75 % de son contenu est visible moins de 300 ms après le début d’affichage. Puis, le reste apparaît plus lentement;
  • la page B demeure quasiment vierge de contenu un long moment avant d’afficher brusquement tous ses éléments à l’approche des 2 s.

Progressivité d'affichage exemples de filmstrip

Sans aucun doute, le visiteur trouvera la page A nettement plus rapide à l’affichage que la page B. Alors qu’il est impossible d’identifier le moindre écart de vitesse avec les deux seuls indicateurs Start Render et Visually Complete. C’est exactement ce manque que le Speed Index vient combler !

Comment le Speed Index est calculé ?

En premier lieu, l’enregistrement vidéo du chargement de la page est décomposé en une séquence d’images. Chacune de ces images est alors analysée pour lui attribuer un ratio de progression de l’affichage, déterminé en comparant chaque image/séquence à l’état final de la page.

On récupère ainsi l’évolution, image par image, du ratio de progression de l’affichage de la page web testée. Une évolution qui est d’ailleurs restituée dans tous les rapports de test Dareboost, au travers du « filmstrip » image par image du chargement de la page (cf. l’illustration ci-dessous).

Mesurer la progression d'affichage

Cette progression de l’affichage peut aussi être représentée sous la forme d’un graphe en plaçant le temps en abscisses et le ratio de progression en ordonnées.

Speed Index : représentation sur le graphe de la progression d'affichage

Dans cette configuration, le Speed Index représente alors la surface située au dessus du graphe – matérialisant l’évolution de la part encore non-affichée de la page web à travers le temps. De fait, on comprendra aisément que plus cette surface est petite, plus la page web s’affiche vite. En conséquence, plus le Speed Index est petit, plus la page web est rapide !

La formule du calcul du Speed Index se retranscrit de la manière suivante (source : WebPageTest) :

Formule du calcul Speed Index

Comment interpréter le Speed Index ?

Maintenant que nous connaissons le mode de calcul du Speed Index, venons-en à la bonne interprétation des résultats, avec le principe de base suivant : plus le Speed Index est faible, plus la page web est perçue comme rapide à l’affichage pour l’utilisateur. Détaillons encore une fois ce « raccourci » pour en saisir tous les tenants et aboutissants :

Speed Index faible → la surface au dessus du graphe de la progression de l’affichage est réduite → le taux d’achèvement de l’affichage s'accroît dans un délai court → la grande majorité des éléments graphiques au dessus de la ligne de flottaison s’affichent rapidement → l’utilisateur constate l’affichage rapide de ces éléments importants pour la suite de sa visite.

Quid de la valeur du Speed Index dans l’absolu ? À partir de quel niveau peut-on considérer qu’un Speed Index est « bon » ? Du côté de l’équipe développement de Google Chrome, Paul Irish recommande de ne pas excéder les 1000 ms. Un objectif qui peut s’avérer difficile à atteindre suivant le type de page web et les conditions de consultations… Pour exemple, attendez-vous à enregistrer un Speed Index significativement plus élevé si vous testez le chargement de la page d’accueil d’un site de presse avec une connexion web de mauvaise qualité !

Benchmark Speed Index DiG Lisbon 2017

Autre exemple, beaucoup moins théorique, avec les résultats de notre comparatif des performances de plus de 60 leaders européens de l’édition web, mené à l’occasion de l’événement DiG Lisbon 2017 (cf. l’illustration ci-dessus). Pour mémoire, ces valeurs de Speed Index ont été obtenues avec des tests desktop réalisés depuis Paris avec une connexion web moyenne de type ADSL (8 Mbps de débit descendant et une latence réseau de 50ms).

En conclusion, l’une des premières – et meilleures – manières d’interpréter vos résultats en termes de Speed Index consiste à le faire dans le cadre de comparaisons et de benchmarks avec les pages de vos concurrents. Si vous enregistrez un Speed Index plus élevé que ces derniers, vous pourrez considérer que votre site web est handicapé par une expérience utilisateur de moindre qualité…

Quelques limites au Speed Index

Aussi pertinent et utile soit-il pour évaluer la rapidité d’affichage de vos pages dans les navigateurs de vos visiteurs, le Speed Index comporte néanmoins quelques limites.

  • En tout premier lieu, gardez bien à l’esprit que le Speed Index est sensible à la taille du viewport du visiteur. Aussi vous faut-il définir un panel de configurations pour vos tests, correspondant à celles utilisées les plus fréquemment par vos visiteurs.
  • Le calcul du Speed Index se base – entre autres – sur l’état final d’affichage de la page web (le ratio de progression de l’affichage étant obtenu par comparaison avec cet état final). Ceci peut induire quelques problèmes dans certaines circonstances : des animations (telles que des carrousels, des diaporamas automatisés ou des vidéos) peuvent venir perturber la détection de l’état final, en provoquant des modifications visuelles importantes alors que la page semble totalement chargée pour l’utilisateur.
    Pour palier ce problème, Dareboost a conçu une option permettant de bloquer ces animations et donc de stabiliser les résultats dans la plupart des cas.

Pour en finir avec ces quelques limites propres au Speed Index, revenons aux premières phrases de ce billet : tous les aspects de votre performance web ne peuvent être résumés avec un seul indicateur. Le Speed Index, même s’il est un excellent outil de synthèse, ne donne par exemple aucune indication sur l’interactivité de votre interface. Or, sur certaines pages, le délai avant interactivité de la page peut se révéler tout aussi critique que son affichage ! (formulaires par exemple).

Gardez ainsi à l’esprit que, même si le Speed Index offre des bénéfices exclusifs, vous devriez l’utiliser en combinaison avec d’autres indicateurs. Pour une compréhension globale de votre performance web d’abord… Mais aussi pour identifier les moyens les plus efficaces pour l’optimiser !

A propos Philippe Guilbert

Responsable marketing et communication pour Dareboost. Journaliste, rédacteur-en-chef ou startuper dans des vies antérieures. Besoin d'infos sur Dareboost ? Des idées de partenariat ? Voilà des sujets que vous pouvez m'adresser !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*