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

Pour rendre compte de la performance globale de vos pages web, il est nécessaire de s’appuyer sur plusieurs indicateurs. Certains se montrent plus révélateurs que d’autres ; d’autres apportent une vision plus globale à un problème complexe.

Prenez la vitesse d’affichage. L’angle choisi par Google depuis plusieurs années est d’utiliser un indicateur assez précis : le Largest Contentful Paint, c’est-à-dire le délai nécessaire avant l’affichage de la plus large portion de contenu de la page à l’écran. C’est un très bon indicateur, facile à collecter, mais il simplifie la question de la vitesse de rendu à un élément unique. Comment mesurer la vitesse de rendu de toute une page ?

Et à ce jour, nous considérons que le Speed Index est l’un des indicateurs les plus utiles pour répondre à cette question. 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 et dans quels pièges ne faut-il pas tomber ?

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 beaucoup d’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, créateur du Speed Index.

Concrètement, la mesure du Speed Index se base sur la partie de la page directement visible par le visiteur (le viewport, la zone 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é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 Speed Analysis 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 Speed Analysis a détecté la fin du trafic réseau associé au chargement. L’analyse de la vidéo permet ensuite à Speed Analysis 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.

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).

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.

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) :

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 recommandait, il y a quelques années, 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 consultation… 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é !

L’une des premières –et meilleure– 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é…

Mais attention aux modales de consentement, qui parce qu’elles changent l’état visuel des dernières images de la vidéo, peuvent totalement perturber l’indicateur !

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 modales de consentement, des carrousels 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 pallier ce problème, Speed Analysis propose 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 ou sa stabilité.

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 !