COMPRENDRE ET ANALYSER LES PERFORMANCES D’UN SITE INTERNET

Avant de vous attaquer à cette partie 2, retrouvez la partie 1 ici. Dans cette partie 1, je vous parle des bases de la performance web !

Partie 2 – Les outils

Outils de monitoring et de tests

Différents types de tests de performance

Quand on parle de tests de performance, on peut parler de plusieurs choses, mais en général, de deux notions en particulier :

Test de charge : sert en général à vérifier que le système peut tenir des temps de réponse cibles pour un volume d’utilisateurs donné, généralement important. Pour ce test, on se préoccupe davantage des performances des machines au lieu de ce que perçoit le client.

Test d’impact (ou test A/B) : proche du test de charge, sert à mesurer les performances (côté client) d’une fonctionnalité en comparant deux pages web (l’une avec la fonctionnalité et l’autre sans). L’application est soumise à une charge d’utilisateurs pendant qu’une moyenne de certaines métriques est faite (temps de réponse utilisateurs, temps de réponse réseau et les temps de traitement d’une requête sur le(s) serveur(s)).

Nous reviendrons sur ces deux points plus bas avec les outils de monitoring 😉

Utilisation de différents types de monitoring

Pour analyser une page web, on peut utiliser différents outils qui exécutent la page via des bots (active monitoring) comme WebPageTest ou qui simulent de vrais utilisateurs (passive monitoring) comme Dynatrace. Si vous ne voyez pas ce qu’est le monitoring, c’est la surveillance et le fait de mesurer une activité informatique. Le monitoring ne nous sert pas qu’à tester mais aussi à expliquer les éventuels incidents.

Je vais vous présenter deux outils : Dynatrace et WebPageTest

« Passive monitoring » : Dynatrace

Il s’agit d’une solution Application Performance Management (APM) qui aide à gérer les applications web. Cette solution permet notamment de poser des agents (des sortes de “mouchards”) dans des pages pour suivre leurs évolutions, d’enregistrer le déroulement complet (appels AJAX, identification des procédures stockées, etc.) des pages web qu’on affiche dans un certain laps de temps et bien d’autres choses. Le but final ? Améliorer l’expérience utilisateur bien sûr ! C’est en atteignant ce but que l’entreprise pourra continuer à se démarquer dans le monde digital. Le monitoring de l’expérience digitale de Dynatrace combine à la fois un monitoring des utilisateurs réels, des contrôles synthétiques, un monitoring des applications mobiles et des analyses Big Data, afin de fournir une visibilité totale sur l’expérience digitale de chaque client. Dynatrace détaille la navigation de chaque client (si besoin) en donnant la possibilité d’afficher une stacktrace complète avec les différents appels de diverses procédures stockées utilisées durant la navigation.

De cette façon, nous pouvons, par exemple, déterminer s’il existe des procédures redondantes ou non dans le code source utilisé :

Utile pour des tests côté back-end (tests de charge) !

C’est possible d’avoir un exemple avec les métriques dont tu nous as parlé plus haut ?

Oui bien sûr, j’en profite aussi pour vous dire que cet outil est également utile pour des tests A/B (comme évoqué au-dessus) :

En appelant un grand nombre de fois deux pages identiques avec pour seule différence une nouvelle fonctionnalité à tester, nous pouvons tracer les appels et observer les temps de réponse pour chaque métrique choisie via un Dashboard créé au préalable. On remarque deux phases distinctes dans les graphiques :

• First View : Le premier affichage de la page avec un cache navigateur et DNS vide. Comme le navigateur fait des appels sans cache à utiliser, les temps de réponse sont plus élevés
• Repeat View : Le deuxième affichage de la page avec un cache navigateur et DNS. Très intéressant pour mesurer la performance de navigation sur un site déjà parcouru par l’utilisateur.

En faisant la moyenne de chaque métrique, on peut établir un diagnostic complet. Une des faiblesses de Dynatrace est qu’il trace parfois des résultats très variables (pour toutes sortes de raisons) qui peuvent fausser les résultats (contrairement à l’exemple du dashboard ci-dessus).

Dynatrace est payant et difficile à prendre en main au début mais reste un outil très complet et efficace.

« Active Monitoring » : WebPageTest

Nous avons vu que dans le waterfall obtenu avec ChromeDevTools ne permettait pas de distinguer facilement les ressources qui se chargent très vite. WebPageTest est une solution !

Il s’agit d’un outil servant à mesurer et analyser les performances d’une page web quelconque en utilisant différents navigateurs et qui simule des connexions à la même vitesse qu’un internaute moyen avec des recommandations d’optimisation détaillées. Quand on teste une page avec les réglages par défaut, WebPageTest teste la page en question trois fois pour en établir une moyenne. Nous pouvons y tester deux autres paramètres : les devices (supports sur lequel on lance le test) impactés et les navigateurs utilisés.

Un exemple, un exemple, un exemple !

Rendez-vous sur https://www.webpagetest.org/ où nous allons préciser la page à tester avec une URL, le(s) navigateur(s) et le(s) support(s) sur lequel/lesquels nous voulons voir s’afficher la page en question. Voici un exemple avec le site Alltech :

Quand la simulation arrive à son terme, le site nous retourne toutes sortes de résultats : des métriques, des waterfalls avec toutes les ressources utilisées pour chaque page, leurs temps de chargement, etc. Comme pour Dynatrace, on retrouvera même les concepts de First View et Repeat View.

On retrouve ci-dessous les métriques évoquées plus haut quand je vous parlais du rôle des métriques, y compris le Speed Index :

Les ressources d’une page web se chargent extrêmement vite (de l’ordre de quelques millisecondes la plupart du temps). Avec cet outil, nous avons une meilleure vue d’ensemble sur les performances web des pages qui nous intéressent. Ainsi, très utile pour faire des tests A/B !

Remarque : Les données dans WebPageTest sont supprimées au fur et à mesure alors tardez pas trop à les récupérer 😉

Le waterfall généré par WebPageTest ne bouge pas contrairement à celui de ChromeDevTools et on peut prendre le temps de l’analyser, voici un schéma comparant le site côté client et ses ressources analysées par WebPageTest :

Contrairement à Dynatrace, WebPageTest est gratuit. En plus de calculer quelques métriques comme le Speed Index, il a le mérite de proposer une interface assez claire et d’expliquer ce qui est calculé contrairement à d’autres outils. Mais, son utilisation reste à chaque fois la même, on ne s’en sert pas pour faire des tests côté back et les résultats sont libres d’accès par n’importe qui (sauf si vous avez un compte payant).

Complémentarité des deux outils

Vous vous demandez sûrement pourquoi je vous parle de ces deux outils et pas d’un seul. Avant tout, parce que je les ai déjà utilisés 😉 Mais aussi parce que ces outils, en plus d’être assez puissants, ont des inconvénients qui se complètent par les avantages de l’autre. Voici un tableau qui résume bien ce que je veux dire :

Il est utile d’avoir plusieurs outils pour couvrir les différents types de monitoring afin de bénéficier d’une analyse complète.

Conclusion

La performance web est profitable aussi bien pour le client que pour l’entreprise. Le client accède plus rapidement à la page voulue et l’entreprise fidélise mieux ses clients. De plus, le scoring de performance participe au référencement SEO d’un site.

Avec cet article, j’espère vous avoir aidé à mieux comprendre que la performance web est un domaine vaste et qu’il existe beaucoup de notions à connaître contrairement à ce qu’on pourrait penser. On ne peut pas résumer ce
domaine à quelques conseils ou bonnes pratiques à avoir. Il existe aujourd’hui beaucoup d’outils pour mesurer les performances web mais, dorénavant, j’espère que vous savez mieux comment choisir votre outil de monitoring et sur quels
éléments vous pouvez vous baser pour faire votre choix. Selon moi, se contenter de faire le meilleur score possible sur les outils de monitoring, sans comprendre en détails ce qui est testé derrière, n’a pas vraiment de sens. Du coup, j’espère vous l’avoir bien expliqué !

Rappelons-nous aussi qu’il existe bien d’autres sujets et qu’il m’est impossible de tous les aborder dans cet article (systèmes de cache, tests côté back-end, etc.). Mais cela pourrait peut-être donner lieu à d’autres articles sur l’amélioration des performances web, qui sait 😉

CET ARTICLE A ÉTÉ RÉDIGÉ PAR :

MARCO LUGUSTIANO
INGÉNIEUR INFORMATIQUE
ALLTECH BORDEAUX

sources

Top 15 de l’e-commerce français en audience au deuxième trimestre 2019 : https://www.journaldunet.com/ebusiness/commerce/1154421-top-15-de-l-e-commerce-francais-en-audience/
Définition WPO : http://glossaire.infowebmaster.fr/wpo/
Conséquences d’une mauvaise performance web : https://datadome.co/fr/bot-management-protection/performance-de-votre-siteweb-comment-ameliorer-lexperience-utilisateur-et-votre-business/
Waterfall expliqué par Fasterize : https://www.fasterize.com/fr/blog/waterfall/#more-881
Test A/B expliqué par Fasterize : https://www.fasterize.com/fr/blog/a-b-testing-incontournable-en-marketing-a-manier-avec-prudence-pour-la-webperf/
Explications de quelques métriques par Dynatrace : https://www.dynatrace.com/support/doc/synthetic/reference-information/w3c-metrics/
Explication du Speed Index : https://www.fasterize.com/fr/blog/speed-index-metrique-incontournable-lexperie
nce-utilisateur/