7 outils gratuits pour analyser vos temps de chargement

Avez-vous déjà essayé d’analyser la performance de votre site web ? On peut vite se perdre dans les méandres des données et d’une multitude d’outils. Pour mieux vous guider, nous vous ouvrons la boîte à outils de nos experts webperf. Nous partageons avec vous nos méthodes d’analyse webperf fétiches (et gratuits).

1. Les navigateurs

Les Dev Tools de Firefox et Chrome sont bien sûr des outils incontournables pour débugger ce que fait le navigateur lorsqu’il charge une page. Ils permettent :

• de voir le code source initial ainsi que le code source généré,
• d’inspecter chaque requête et de filtrer par type de requête,
• de faire des audits simples de performances (voire des audits complexes avec Lighthouse intégré dans Chrome)
• de voir les problèmes de painting et de framerate, ce qui est particulièrement utile dans le cas de grosses applications web.

Dans les dernières versions, les Dev Tools permettent également de modifier le code source de la page même en faisant un reload (cf. Chrome Dev tools – Local overrides)

Ils vous seront donc des alliés incontestables pour analyser la performance de votre site web.

2. Webpagetest

Webpagetest est un outil open source qui s’est imposé comme référence en matière d’analyse webperf. Il permet de lancer des tests de performance sur n’importe quel site et de faire varier les conditions des tests : le device, le type de connexion, le lieu ou encore le navigateur.

Webpagetest génère principalement des waterfalls très détaillés. Il s’agit d’une représentation du chargement des éléments par le navigateur au cours du temps.

Grâce aux waterfalls, nous sommes en mesure de voir tous les éléments qui se chargent et leur comportement. On peut ainsi voir très facilement les éléments bloquants pour le Start Render, le temps de connexion, etc …. C’est une véritable mine d’or !
Enfin, l’outil donne des informations annexes, mais essentielles :

• le site utilise-t-il HTTP/2 ?
• un CDN est-il branché ?
• est-ce que les images sont compressées ?
• à quoi ressemble la timeline CPU ?
• quel JS est exécuté ?
• à quel moment la page devient-elle interactive ?

3. Yellow Lab Tools

Yellow Lab est lui aussi un outil open source. Celui-ci permet d’évaluer la complexité de la page. Nous pourrions appeler cela la web performance “in page” : comment est-elle construite ? Est-elle composée de beaucoup de CSS ou JS ? Les JS sont-ils bien configurés ? etc. Les points remontés sont extrêmement nombreux et très bien documentés. Certains ne sont d’ailleurs disponibles que via cet outil : chargement de jQuery, media-queries mal configurées, etc.

Yellow Lab propose par ailleurs une timeline JS et a l’avantage d’intégrer la notion d’interactivité avec l’utilisateur.

L’outil est disponible en ligne mais il est aussi possible de le faire tourner en local.

4. Les lignes de commande

Les lignes de commande donnent elles aussi, leur lot d’information complémentaires en terme de performance. Elles permettent d’en savoir plus sur la configuration d’un site donné.

• curl, par exemple, permet de lancer une requête avec certains paramètres et d’analyser ce que répond le serveur. Par défaut, les informations retournées dans les headers sont déjà intéressantes mais elles le deviennent encore plus quand on sait envoyer les headers de debug de certains CDN.
  
• whois, traceroute, host donnent quant à eux des informations sur l’hébergement (par qui et où ?) et le(s) CDN (quel sont les CDN branchés ? comment sont-ils configurés ? etc.). Vous pouvez par exemple détecter une possible mauvaise configuration du mapping des CDN du site.

5. SSL Labs

SSL Labs (qui devrait plutôt s’appeler TLS Labs) permet de faire une vérification de la couche TLS et de savoir si les optimisations TLS “classiques” sont activées : Session Resume, OCSP Stapling, TLS False Start, TLS 1.3 …
Au delà de la performance, la note attribuée par l’outil est un bon indicateur sur la sécurité de cette couche (les failles SSL/TLS connues sont prises en compte dans la note).

6. La Google Search Console

Il est toujours intéressant de jeter un oeil à la Google Search Console pour voir comment se comporte le crawler de Google sur le site.

En général, plus le site est rapide, plus GoogleBot crawle de pages.

Cela donne une bonne indication sur le temps de réponse des serveurs (qui peut être optimisé pour les bots d’ailleurs).

7. Le Requestmap.webperf.tools

Cet outil est parfait pour réaliser un mapping des Third Parties :

Ce mapping rend visuel le chargement de toutes les Third Parties. Il illustre l’ensemble des Third Parties chargées, qui elles-mêmes en appellent d’autres. On se rend ainsi mieux compte de la chaîne de chargement non-maîtrisée et de la fuite de données.
Vous pouvez ainsi faire l’inventaire de vos Third Parties et commencer le grand ménage de printemps !

Bonus : Test My Site with Google

Nous vous proposons celui-ci en bonus, puisqu’il ne permet pas de faire un audit technique à proprement parler. Test My Site est un outil proposé par Google qui permet d’évaluer l’impact business de votre webperf. Nous avons exploré son fonctionnement que nous expliquons dans cet article détaillé.