Mesure de vitesse de vos pages : Start Render, Visually Complete et SpeedIndex

Il y a quelques jours, nous évoquions sur ce blog les différentes mesures auxquelles l’API Performance Timing permet d’accéder.

Je vous propose aujourd’hui de découvrir d’autres données essentielles pour évaluer la performance web, davantage centrées sur le ressenti utilisateur plutôt que sur la couche technique.
Nous allons parler de 3 mesures différentes, qui sont toutes liées à la manière dont s’affichent vos pages web.
Start Render, Visually Complete et SpeedIndex qui sont depuis peu disponibles dans les tests de performance de dareboost.com.

Start Render (ou Début de l’affichage)

Le syndrome de la page blanche ne s’applique pas uniquement aux écrivains. Trop souvent, le chargement d’une page web y fait également face, avec un délai important avant que quoi que ce soit ne s’affiche.

Le Start Render (ou Début de l’affichage) indique le temps nécessaire à ce qu’un premier élément s’affiche sur la page, quelque soit sa taille ou son importance pour l’internaute.

Cela peut-être une couleur de fond, un texte ou autre, mais dans tous les cas, un signe important est envoyé au visiteur : la page est bien en train de s’afficher, des opérations sont en cours et le reste du contenu devrait arriver.

C’est un point qui doit attirer votre vigilance. En effet, avant cet affichage, le visiteur n’a aucune certitude sur le fait de réussir à charger votre page, et si cela se prolonge, il pourrait abandonner avant même d’avoir visualisé la moindre information !

Technique : comment améliorer le Start Render ?

Le premier point, critique pour le Start Render, va être le temps de réponse de votre serveur (pensez par exemple à mettre en place un cache sur celui-ci).
Une fois que le code source sera reçu, le navigateur interprétra la source et pourra être pénalisé par le code Javascript bloquant que contiendrait votre page ! Pour rappel, il est impératif de déporter votre JavaScript, voire de le charger en asynchrone lorsque c’est possible.

Rappelons également que la récupération du CSS est bloquante. Pour accélérer le Start Render, vous devez inliner les CSS qui concernent la partie immédiatement visible de votre page (au dessus de la ligne de flottaison) et charger le reste en asynchrone. Si cela ne vous est pas possible, veillez à réduire le nombre de fichiers CSS, et à accélérer leur chargement grâce à un CDN si votre public est international.

Visually Complete (ou Affichage complet)

Le Visually Complete s’insère dans la continuité du Start Render, chronologiquement mais aussi sémantiquement.

Vos visiteurs ne demandent pas à ce que l’intégralité de votre page web se charge à la vitesse de l’éclair, ils veulent un chargement rapide pour les contenus et les actions qui comptent pour eux.

C’est exactement dans cette optique qu’on va considérer le Visually Complete, qui va mesurer le délai nécessaire à ce que la zone au-dessus de la ligne de flottaison soit affichée sous sa forme finale. On s’intéresse donc ici à ce qui est immédiatement nécessaire à l’internaute, à savoir la partie de la page disponible sans que ce dernier n’ait besoin de scroller.

Technique : comment améliorer le Visually Complete?

Nous venons de l’évoquer plus haut, le Visually Complete est dépendant du Start Render, il va donc falloir commencer par là.

Puisque l’idée n’est plus uniquement de favoriser le début de l’affichage, mais bien l’intégralité de la zone immédiatement visible, il va falloir identifier ces contenus et les privilégier pour accélérer leur affichage (inliner votre logo en base64 par exemple). Attention à ce propos : le Visually Complete est dépendant de la résolution de l’internaute, puisque le placement de la ligne de flottaison y est associé !

NB : le Visually Complete peut dans certains cas être biaisé, par exemple avec une vidéo déclenchée automatiquement ou d’une animation en haut de page.

Enfin, dans certains cas, il est tout à fait cohérent de ne pas chercher à absolument réduire le Visually Complete, puisque cela pourrait finalement porter préjudice à l’expérience utilisateur. Par exemple il serait aberrant dans la plupart des cas de bloquer le reste de l’affichage de la page pour charger un widget de partage sur les réseaux sociaux, même si celui-ci est situé au-dessus de la ligne de flottaison.

Le SpeedIndex vient en renfort notamment pour minimiser ce genre d’effets.

SpeedIndex (indice de performance)

Nous avons jusqu’à présent évoqué l’importance de commencer rapidement à afficher la page, et d’afficher en priorité la partie au dessus de la ligne de flottaison.

Mais prenons l’exemple de ces 2  filmstrips :
filmstrip

Évidemment, bien que les Start Render et Visually Complete soient sensiblement identiques,  il est très juste de penser que la première version est bien meilleure en terme d’expérience utilisateur.

Ces 2 temps sont importants, mais il manque une information majeure : comment se comporte la page durant la période qui les sépare ? Est-ce que la majorité des contenus est affichée juste après le Start Render, ou bien au contraire, est-elle affichée juste avant le Visually Complete ?
Le speedindex est un indice qui va nous permettre de résumer ces comportements.

Voici un graphique représentant la proportion affichée de chaque page à travers le temps. Start Render et Visually Complete ont des valeurs identiques mais entre les deux, la situation n’est pas comparable !

Visual Progress

Au bout d’une seconde, la page A est affichée à 90% alors que moins de 20% de la page B l’est au même instant !

Le calcul du SpeedIndex s’appuie sur cette représentation pour justement traduire cette différence majeure (il se calcule à partir d’une intégrale sur la proportion de la page restée blanche à travers le temps, vous pouvez consulter cet article pour une explication détaillée en anglais)

Petit repère à avoir : pour suivre la recommandation Google d’un Visually Complete inférieur à 1 seconde, votre speedindex doit être inférieur à 1000. Plus l’affichage est rapide, plus le SpeedIndex sera petit.

Technique : comment améliorer le Speedindex ?

Le speedindex étant dépendant du Start Render et du Visually Complete, il vous faudra donc faire les optimisations évoquées plus haut. Vous devrez également veiller à optimiser la priorité des chargements dans la période qui sépare ces valeurs. On parle d’optimisation du chemin critique de rendu.

D’autres actions sont possibles pour améliorer le SpeedIndex et l’expérience utilisateur : vous pouvez par exemple mettre en arrière-plan la couleur dominante des composants les plus lents à charger avec vos CSS inline. Par exemple, vous pouvez mettre un fond noir en arrière plan d’une image dont c’est la couleur dominante, afin de “réserver” visuellement l’espace pendant qu’elle se charge. Ainsi, vous construisez le template de la page avant même le téléchargement des ressources, et l’affichage sera plus agréable pour l’internaute.

Pour conclure, ces 3 métriques de performance doivent être au coeur de vos préoccupations, et sont des indicateurs pertinents pour intégrer vos budgets de performance. Grâce à dareboost.com, vous pourrez identifier facilement les optimisations possibles en analysant votre site !