Analyser les performances d’un site internet passe par l’utilisation d’outils de mesure de la performance. Nous avons pu voir déjà sur le sujet les indicateurs principaux aux yeux par Google, et ensuite les différents outils de mesure qui véhiculent ces indicateurs. Ces outils google sont dit de “terrain” car ils collectent de la vraie data utilisateurs, d’autres sont dit de “laboratoire” car ils scorent localement et selon des benchmarks, le chargement d’une page web. Mais il en existe d’autres, que l’on peut qualifier d’hybrides indépendants en libre-service qui délivrent des scoring, reliés aux outils natifs de google. Je vous propose d’ausculter Gtmetrix, Webpagestest, et Pingdom.
Comment utiliser GTmetrix pour scorer une page web ?
Cet outil a fêté ses 10 ans en 2019. Originalement cette plateforme indiquait sur un site en difficulté, si le problème venait du serveur ou du navigateur, c’est tout. Vu le succès, l’outil s’est enrichi de fonctionnalité pour en faire un outil grand public plugué sur 2 bases données : google page speed (un outil de “terrain” lancé en 2013, mais aussi de “labo » avec des statistiques de ‘labo’), et Yahoo!slow . Cet outil donc utilise une vraie connexion navigateur (au détriment d’émulateur comme Pingdom) depuis différents points géographiques selon son choix de départ, le navigateur et le type de connexion. Les données de performance sont ensuite comparées aux bases de données de bonnes pratiques PageSpeed et YSlow. Il ne mesure pas réellement le temps de chargement de la page, mais l’évalue. Il faudra se tourner plus sur des outils comme pingdom ou webpagetest pour juger du bon chargement d’une page web. Ou alors tout simplement aller voir les rapports de google Analytics, qui collectent les données sur l’utilisateur du site internet.
Gt metrix une vieil outil
Les avantages incontestables de cet outil déporté néanmoins sont les services qui tournent autour de l’analyse et notamment le monitoring qui en fait un service de surveillance au service de la performance.
une fois logué, il est possible de sauvegarder le scan des pages pour avoir un historique :
- De suivre 3 urls, d’en archiver 20
- De tester depuis 7 régions dans le monde
- De fournir la taille totale de la page et le nombre total de requêtes du navigateur pour l’afficher
- De Benchmark les performances de votre page par rapport à la moyenne de tous les sites analysés sur GTmetrix durant les 30 derniers jours
- De fournir en cascade, le film du chargement de la page (waterfall que donne aussi les dev tools des navigateurs) et une sauvegarde éventuelle pour archivage.
- D’utiliser des plugins comme la désactivation de l’adblock le plus connu, des paramétrages personnalisés en mode pro. comme l’envoi régulier de rapports sur les pages suivies pour analyser les tendances
img pro
Les inconvénients Pourquoi le Pagespeed de GTmetrix diffère de celui de google ?
GTMetrix utilise le Sdk, la librairie open source de google. Mais il y a longtemps que Google a mis à jour ce SDK et la version en ligne sur le site de développer de google est sa propre version propriétaire, pas open source, d’où le décalage de scoring. De même les recommandations d’optimisation diffèrent, mais Gtmetrix cependant a fait des mises à jour, mais qui datent de 2016.
gtmetrix outil de monitoring global de la performance
Vingt trois règles aux bonnes pratiques
Yslow est basé sur la même base de données de bonnes pratiques web .
YSlow consulte le site web et le compare avec une liste de 23 règles et le compare avec des sites web performants, YSlow note ensuite le site. L’inconvénient de Yslow est qui ne donne pas de préconisations pour les mobiles, un des atouts de pagespeed !
- Minimize HTTP Requests -> Réduire les demandes HTTP
- Use a Content Delivery Network -> Utiliser un réseau de diffusion de contenus
- Avoid empty src or href ->Éviter les src ou href vides
- Add an Expires or a Cache-Control Header -> Ajouter un en-tête Expires ou Cache-Control
- Gzip Components -> utiliser les Composants Gzip
- Put StyleSheets at the Top -> Mettre les feuilles de style au début de la page
- Put Scripts at the Bottom -> Mettre l’ajout de bout de code en bas de page
- Avoid CSS Expressions -> Eviter les CSS en dur dans la page
- Make JavaScript and CSS External -> Externaliser les script Js et les CSS.
- Reduce DNS Lookups -> Réduire les consultations DNS
- Minify JavaScript and CSS -> Minimiser le JavaScript et le CSS
- Avoid Redirects -> Eviter les redirections
- Remove Duplicate Scripts -> retirer les scripts dupliqués
- Configure ETags -> configuer les etag (attention pas cool, fait des appels serveurs inutiles, à manier avec des pincettes)
- Make AJAX Cacheable -> mettre en cache le code javascript asynchrone
- Use GET for AJAX Requests -> utiliser la méthode Get pour les appels Ajax
- Reduce the Number of DOM Elements -> réduire, alléger le DOM (Document Object Model)
- No 404s -> pas de 404
- Reduce Cookie Size -> réduire la taille des cookies
- Use Cookie-Free Domains for Components -> Usage des domaines sans cookie
- Avoid Filters -> éviter les filtres
- Do Not Scale Images in HTML -> ne pas mettre à l’échelle les images dans l’html (sous-entendu mettre une dimension)
- Make favicon.ico Small and Cacheable -> rendre la petite icône de la barre d’adresse réduite et en cache.
Chacune de ces 23 règles a une pondération différente selon leur importance dans le chargement de la page. Réduire le poids d’une image est plus important que de réduire la taille d’un cookie :). Le site Yottaa a publié en 2010 une étude sur Yslow. On peut y lire que sur 5000 websites testé, le score moyen était de 69. Donc pas de quoi paniqué…
Retenons que Yslow comme PagesSpeed d’ailleurs, se focalise sur une analyse front, donc rien sur la qualité serveur, la réactivité de la base de données.
Notons enfin, que gtmetrix possède une version android, superpratique pour scorer à la volée une url si on n’est pas au bureau, l’ux est cool !
WebpageTest.org un bel outil de mesure de la performance, made by google !
WebPagetest est un outil qui a été développé à l’origine par AOL pour une utilisation interne et qui a été ouvert en 2008 sous une licence BSD. La plate-forme est en cours de développement sur GitHub.Cet outil d permet de comparer les performances d’une ou plusieurs pages dans un environnement de laboratoire, et de tester les performances sur un appareil réel. Il est possible également exécuter Lighthouse sur WebPageTest.
Le WebPageTest effectue par défaut trois tests consécutifs et fait la moyenne des résultats, un des atouts uniques parmi les autres services de test.
WebPagetest utilisent un vrai navigateur, avec Chrome par défaut. Les navigateurs réels donnent une meilleure indication des performances d’un site, et les résultats ressemblent à celui d’un visiteur réel selon l’appareil (17 de disponibles).
Bien que basé sur l’open-source Google PageSpeed library, comme Gtmetrix, et autre pingdom, il en ressort uniquement 6 recommandations essentielles dont :
- Security score : mesure la vulnérabilité des entêtes de pages et des scripts Js.
- First Byte Time : score le temps de réponse du serveur pour commencer à charger l’html dans le navigateur
- Keep-alive Enabled : indique la Réutilisation des connexion existantes pour charger le contenu d’une page, peut réduire le temps de chargement d’une page de 40 à 50 %
- Compress Transfer : signifie l’activation de la compression gzip, cela peut réduire la taille du temps de réponse de 90%
- Compress Images : repère la façon dont sont compressées les images (jpeg)sur la page
- Cache static content : mesure la façon (durée et) dont sont mise en cache les objets de la page, cela évite les allez retours incessants entre le navigateur et le serveur pour charger des éléments déjà connus du navigateur. Difficile d’avoir la lettre “A” ici, car certains éléments ne sont pas gérés par le serveur du site mais sont des parties tierces où il est impossible d’avoir la main.
- Effective Use of Cdn : Pour content delivery network, dont le but est de delivrer les objets d’une page le plus rapidement possible, en les stockant proche des internautes. Cela réduit les coûts de bande passante, et améliore l’expérience utilisateur,
webpagetest scoring
Commencez à suivre cette vidéo, suivie d’une autre, de la personne qui gère cette plateforme.
Pingdom tool un outil utile par son côté pratique
Il est pratique car facile d’usage, car possède moins de fonctionnalités que Webpagetest et Gtmetrix, du moins en mode gratuit. Il se base sur la librairie pagespeed sinon. Il possède 7 régions géolocalisation comme gtmetrix et 38 pour webpagetest. Il ne mesure pas la performance mobile en revanche.
pindom tool , pratique
Pour finir, bon à savoir, faire attention au mode de calcul de chargement de la page !
Il existe 2 modes pour évaluer le temps de chargement. Onload time est celui qui mesure le chargement de toutes les ressources de la page mais ignorent les chargements sous-jacents qui peuvent intervenir. Le “fully loaded time” mesure depuis le chargement de la page jusqu’à 2 secondes d’inactivité du réseau.
Que ce soit Gtmetrix (avec option onload activable), webpagetest, sont sur le temps de chargement complet et Pingdom sur dirons-nous du “partiel”. On dira donc que le plus “proche de la réalité” reste les outils qui utilise le “fully loaded time”.
