L'écran "scénarios web" : Suivez la rapidité de votre site

 

Dans cet article

 

data_car.png 

 

Premières observations : la vue d'ensemble

Sur la page "Scénarios web" vous retrouvez tous les scénarios qui ont été créés pour votre site.

Cette première page est une vue d'ensemble de tous vos scénarios. Elle vous permet d'analyser de manière rapide et efficace la performance de votre site. 

Screenshot_2019-09-25_at_16.14.42.png

Vous y trouverez d'abord, la disponibilité (uptime, downtime) ainsi que le nombre incidents par scénario sur la période que vous avez sélectionnée.

Puis on y voit apparaître la moyenne, la variation et le grade pour les 3 métriques de performance suivantes :

Le dernier octet (anciennement "Temps Backend")

Mesure du temps écoulé entre l'émission de la première requête HTTP (demande initiale du d'une page web) par le navigateur et la réception de l'intégralité de la réponse par celui-ci. Le contenu de cette première requête est tout simplement, le code HTML de la page.
Cette étape dans le chargement de la page est critique car elle est bloquante et particulièrement douloureuse pour l'internaute lorsqu'elle est lente. Pourquoi ? Simplement parce que, tant que cette étape n'est pas terminée, le navigateur ne peut rien télécharger d'autre en parallèle, il affiche donc une page blanche (ou un sablier si l'on vient de cliquer sur un lien).
Ce n'est qu'après cette étape, que le navigateur pourra commencer à télécharger les images, les CSS, les javascripts, etc. Ce temps représente donc la capacité de votre applicatif et infrastructure à produire et délivrer rapidement le code HTML de la page demandée.


Le Speed Index

Véritable référence de la Web Performance, le Speed Index est une bonne expression du ressenti utilisateur dans le chargement d'une page. Ce test mesure le temps écoulé entre la demande d'une page web par le navigateur et l'affichage de la partie visible (au dessus de la ligne de flottaison) de celle-ci.

Plus précisément, ce temps est issu d'un calcul mathématique représentant la progression d'affichage des pixels présents à l'écran au fil du temps, en comparaison avec l'image finale du site entièrement chargé. Ce temps, exprimé en millisecondes, va donc être majoritairement bon si une majorité des visuels de la page s'affiche rapidement à l'utilisateur, même s'il manque des petits éléments qui tardent encore plusieurs secondes à arriver pour compléter le chargement total.

C'est cette différence qui fait du Speed Index un indicateur plus proche du ressenti utilisateur, car finalement, si 95% de la page est affichée à l'écran, l'utilisateur a tendance a considérer que la page est chargée. Les derniers 5% peuvent tarder, cela importera généralement peu.

La fin du chargement

Mesure du temps écoulée entre la demande d'une page web par le navigateur et le chargement de l'ensemble des éléments listés dans celle-ci (Code HTML, images, scripts, tag des parties tierces). Cela représente le temps nécessaire à l'obtention, l'affichage et la dynamisation de la totalité d'une page web demandée.

A la différence du Speed Index, la Fin du chargement de la page peut se retrouver extrêmement rallongée par le moindre élément manquant d'une page. Vu le nombre croissant d'éléments présents dans une page d'un site (parfois plusieurs centaines), on voit bien que cette mesure peut facilement "exploser" car pénalisée statistiquement par un tout petit élément ralenti dans la page.

Ce phénomène est d'autant plus probable que de nombreux sous-éléments de la page sont souvent hébergés en dehors de la plateforme d'hébergement du site. Un exemple fréquent est l'ensemble des tags des outils tiers (tags d'ab tasting, de tracking, d'attributation), il suffit donc qu'un seul tag pose problème (suite à un défaut de l'éditeur par exemple) pour que le temps de chargement total de la page monte en flèche.


Les grades
vont de A à F, A étant le plus performant, F le moins performant. Les grades tiennent compte de la bande passante configurée dans vos scénarios. En effet, un utilisateur en 3G sur son smartphone n'a pas les mêmes attentes qu'un utilisateur connecté en fibre sur son ordinateur.

 

Pour aller plus loin

Pour chaque métrique évoquée ci-dessus vous pouvez cliquer sur la loupe en fin de ligne pour ainsi voir plus de détails. Vous entrer donc dans une vue détaillée par scénario qui vous présente celui-ci découpé en étapes dont les points de mesures pris au cours du temps sont regroupés dans un graphique. Vous pouvez naviguer librement d'un onglet à l'autre pour changer de métrique.


Screenshot_2019-09-25_at_17.11.12.png

Screenshot_2019-09-25_at_17.13.27.png

 

Puis pour chacune des étapes vous avez de nouveau un niveau de détail supérieur qui vous permettra d'obtenir des mesures de performance aussi sur l'application, les échanges réseaux, les données de performance de navigation ainsi que le découpage et le poids des resources de vos pages.

Les graphes sont dynamiques, vous pouvez modifier la période affichée en utilisation le Calendrier (en haut à droite, comme dans Google Analytics). La période est appliquée à l'ensemble des graphes de la page et commune à toutes les fonctionnalités de l'app, c'est à dire qu'en changeant de section dans l'app vous gardez toujours la même échelle de temps.

Vous pouvez aussi aisément zoomer et dézoomer en sélectionnant dans les graphes la partie et sélectionnant de gauche à droite pour zoomer ou de droite à gauche pour dézoomer.

Sur l'axe vertical du graphique vous retrouverez le temps total que notre sonde a mis pour parcourir l'ensemble des étapes de votre scénario.

L'axe horizontal vous pourrez retrouver l'heure exacte de chaque anomalie.

En dessous du graphique, vous retrouverez de détail des temps de chargement de chacune de vos pages. Nous vous retranscrivons les temps minimum (min), moyen (moyenne) et maximum (max) que QUANTA aura mesuré durant la période sélectionnée.

Comment analyser vos temps de chargement ? 

Votre objectif est d'avoir des temps de réponse stables et en moyenne en-dessous de seuils définit dans l'application.

- Vous allez voir une barre verte si votre site suit les bonnes pratiques et est optimisé pour une bonne expérience utilisateur

- Une barre orange s'affiche, vous êtes dans la moyenne de la performance acceptable, néanmoins, des optimisations sont possibles pour améliorer le temps de chargement et l'expérience utilisateur

- Si votre barre est rouge votre site n'est pas optimisé pour une bonne expérience utilisateur, impactant la conversion et le SEO !

- Au delà des seuils, vous ne maximisez plus votre conversion et vos visiteurs commencent à s'impatienter.

Aller plus loin dans l'analyse

 

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 0 sur 0
Vous avez d’autres questions ? Envoyer une demande

0 Commentaires

Vous devez vous connecter pour laisser un commentaire.