26 août 2016

Méthode d’analyse des performances web – Partie 2 (website monitoring)

Design & Code

Grow

Together

26 août 2016

Méthode d’analyse des performances web – Partie 2 (website monitoring)

Design & Code

Grow

Together

26 août 2016

Méthode d’analyse des performances web – Partie 2 (website monitoring)

Design & Code

Grow

Together

Avant de consulter cette deuxième partie, n’hésitez pas à lire la première « Méthode d’analyse des performances web – Partie 1 ». Cette dernière traite des bases de la performance web qui vous permettront, j’espère, de mieux comprendre quelques notions décrites ci-dessous sur le website monitoring.

II. 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 website monitoring, c’est la surveillance et le fait de mesurer une activité informatique. Le website monitoring ne nous sert pas qu’à tester mais aussi à expliquer les éventuels incidents.

Je vais vous présenter deux outils : Dynatrace et WebPageTest. A travers ces derniers, on retrouvera le principe de waterfall mais surtout des métriques comme celles évoquées plus haut.

II.1 « 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) ! Le temps de chaque métrique est représenté sur des par des courbes. Voici un exemple avec des métriques évoquées plus haut :

1 : Partie « First View »
2 : Partie « Repeat View »
3 : Légende Dynatrace avec couleur de chaque courbe, moyenne, etc.
« Réf version 7 » : Nom de la page sans la fonctionnalité à tester.
« Test Version 7 » : Nom de la page avec la fonctionnalité à tester.

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. Néanmoins si vous avez besoin d'un accompagnement particulier, vous pouvez vous renseigner sur notre expertise Front End et nous contacter.

II.2 « Active monitoring » : WebPageTest

Nous avons vu que dans la 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.

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

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.

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

La waterfall générée 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 (métrique servant à mesurer l’expérience utilisateur sur un site), 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).

II.3 La complémentarité des deux outils

Vous vous demandez sûrement pourquoi je vous parle de ces deux outils et pas d’un seul. Chaque outil propose une méthode d’analyse différente très utile : Dynatrace via des métriques sous forme de courbes et WebPageTest via des métriques et une waterfall détaillée plus exploitable. Mais je parle de ces deux-là 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 website monitoring et sur quels éléments vous pouvez vous baser pour faire votre choix. Je ne dis pas que ces deux méthodes d’analyse sont obligatoires mais que les avoir offre des perspectives d’analyse plus complètes pour aller plus loin que de simples résultats. Selon moi, se contenter de faire le meilleur score possible sur les outils de website 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 ;)