Il y a 8 ans -
Temps de lecture 4 minutes
Mesurer la performance de vos pages web avec Sitespeed.io
Les optimisations de performance ne se font pas que du côté des serveurs. En effet, une grande partie du temps d’affichage se fait au niveau du navigateur. Pour que ce dernier affiche une page rapidement, celle-ci doit respecter un ensemble de bonnes pratiques.
Voulez vous savoir si les pages de votre application web respectent les bonnes pratiques de performance? Oui ? Alors utilisez Sitespeed.io.
Un rapport de performance Web en 2 temps 3 mouvements
Sitespeed.io est écrit en Node.js depuis sa version 3. L’installation peut donc être faite notamment via npm :
[javascript]npm install sitespeed.io -g[/javascript]
A partir d’une URL, Sitespeed va crawler votre site et récupérer diverses informations pour chacune des pages. Par exemple pour l’URL http://monsite.com :
[javascript]sitespeed.io -u http://monsite.com
[/javascript]
Sitespeed va vous générer un rapport au format html :
Par défaut, Sitespeed.io met en avant les critères primordiaux qui vont faire que vos pages Web s’affichent rapidement ou non. En fonction d’un code couleur, rouge, jaune ou vert, vous savez si le critère en question est respectivement mauvais, correct ou bon. Cet outil est donc parfait pour définir des axes d’optimisation de la performance de vos pages. Par exemple, sur le rapport ci-dessus :
- On voit que les 20 pages crawlées ont une moyenne trop élevée de fichiers Javascript et CSS par page, 25 en tout. Le navigateur va donc faire 25 requêtes HTTP pour charger ces fichiers. Pour éviter cela, il est préférable de concaténer le contenu de ces différents fichiers pour réduire le nombre de requêtes HTTP faites par le navigateur.
- De plus il y a 32 requêtes sans header « Expires » ou « Cache-control » et le cache time est nul. Lorsque ces headers sont placés sur une requête HTTP avec une durée de cache élevée, le contenu du fichier peut être caché par un CDN ou par le navigateur dans le but de remonter les données plus rapidement à l’utilisateur.
- 4 requêtes n’ont pas été compressées avec GZip et pourraient donc être téléchargées plus rapidement sur le réseau.
- Enfin, le chemin critique de rendu des pages n’est pas optimal. En général, ceci est lié à des instructions dans la partie <head> du DOM.
A noter que la construction du rapport, tout comme les critères de crawlabilité de l’outil, sont complètement personnalisables.
Quelques rapports annexes
Le rapport HTML généré contient plusieurs sections :
- un résumé plus détaillé que celui présenté ci-dessus
- le détail des informations pour chacune des pages de votre site web
- la liste de tous les assets (images, fichiers CSS, Javascript etc) présents sur vos pages et leurs informations
- une liste des points les plus urgents à régler
- le détail des erreurs HTTP rencontrées lors du crawl
A noter que pour un sujet différent de la performance Web, je me suis déjà servi du détail des erreurs HTTP pour vérifier que les liens des mes différentes pages Web ne dirigeaient pas vers une page inexistante. Une fonctionnalité bien pratique en somme !
Extensions
Depuis sa version 3, Sitespeed.io s’intègre avec WebPageTest et Google PageSpeed Insight, deux outils de référence dans l’analyse des performances Web.
Voici par exemple les critères de WebPageTest mis en avant par défaut dans le rapport Sitespeed.io :
Dans votre usine logicielle
Sitespeed.io peut être lancé en local mais il est conseillé de le lancer à partir de votre usine logicielle, par exemple avant chaque déploiement en production. Ceci vous permet de vous assurer que la performance Web de vos pages n’est pas dégradée lors d’une nouvelle release.
L’outil est parfaitement intégrable dans Jenkins. En profitant notamment des différentes données extraites par Sitespeed.io au format json, vous pouvez par exemple bloquer vos déploiements si certains critères ne vous conviennent pas.
Conclusion
J’ai découvert Sitespeed.io dans le cadre d’un projet réalisé chez Xebia Studio. Nous utilisons l’outil au sein de notre usine logicielle, en l’occurrence Jenkins. Après chaque déploiement sur notre plateforme de recette, un job génère le rapport de Sitespeed.io. Ce job plante si le score général du rapport de performance n’est pas bon, ou si des pages en erreur sont détectées. De plus, nous affichons le rapport généré sur un écran de monitoring présent dans notre espace de développement. L’équipe et le client ont donc de la visibilité tous les jours sur la performance Web du projet.
Je n’ai pas encore eu l’occasion d’utiliser Sitespeed.io sur une Single Page Application ou sur des pages privées. N’hésitez donc pas à partager vos retours d’expérience sur ces cas d’utilisation en commentaire de cet article.
Commentaire