Performance Web – Outils de mesure

On ne peut gèrer que ce qu’on sait mesurer. Nous avons vu dans la 1re partie les effets tant positifs que négatifs que peuvent avoir des variations en terme de performance. Mais comment mesure-t-on la performance d’un site Web ? C’est l’objet de ce 2e billet.

<- Partie 1 : Introduction Partie 3 : Indicateurs de mesure ->

Outils de mesure

De nombreux outils sont à la disposition du développeur pour mesurer la performance de son site. En ligne, sous forme d’extensions, à vous de choisir !

Outils en ligne

WebpageTest

WebPageTest.org est un projet open source, développé initialement par AOL pour un usage interne en 2008, repris et maintenu principalement par Google dans son optique de rendre le Web plus rapide.

Très complet, le site propose de nombreuses options, parmi lesquelles :

  • Environ 40 serveurs de test répartis dans le monde. Paris, Dallas, Montreal, Dublin, Londres, Moscou, Israël… De quoi tester son site dans des conditions de visites mondiales, et constater rapidement l’utilité potentielle de la mise en place d’un CDN (plus d’explications dans un prochain billet)

 

  • De nombreux browsers disponibles selon les serveurs (IE 8 à 11, Chrome, Safari, Firefox, Canary), dont des navigateurs mobiles (Android 4.4, iOS)

 

  • Plusieurs configurations réseau sont utilisables, afin de tester les performances de son site dans les conditions réseau d’un utilisateur final. De la 3G à la connection calbe 5Mbs, le choix est important. Un mode custom permet également de configurer une connection de bout en bout : vitesse montante et descendante, temps de latence et pourcentage de perte de paquets.

 

  • Désactivation Javascript. Même si le nombre d’utilisateurs avec Javascript désactivé est assez faible (2% en 2010, moins encore à ce jour -source JS Pixel-), il peut toujours être utile de voir la repercussion d’une telle configuration en terme de performance
  • Capture vidéo. Cette fonctionnalité est très pratique. Elle permet de se rendre compte étape par étape du rendu visuel de son site, à intervalles réguliers. Le test s’exécute à partir de Dulles (USA) sur la connection Cable. Plusieurs options sont disponibles, y compris celle d’exporter le test sous forme de film, ou encore de comparer plusieurs URL entre elles (particulièrement utile pour comparer une pré-prod avec une prod).
comparaison visuelle à intervalles régulier sur Webpagetest.org

Comparaison visuelle à intervalles réguliers sur Webpagetest.org

 

  • Comparaison possible avec (ou entre) une cinquantaine de sites dit « industriels », parmi lesquels on retrouve notamment Google, Yahoo, AOL, Linkedin, etc. Les sites sont classés par catégorie, de quoi comparer facilement son site aux grands du secteur concerné.

 

  • Recommandations PageSpeed. Car oui, WebPageTest fournit aussi des données essentielles sur le site Web testé. Waterfalls, nombre de requêtes, poids de la page, etc. Si nous étudierons plus en détails les indicateurs de mesure dans le prochain billet, WebPageTest aide le développeur en lui offrant des conseils de performance, appuyé sur le système PageSpeed.

Vous pouvez retrouver l’ensemble de la documentation WebPageTest.org sur cette page.

GtMetrix

GtMetrix semble au 1er abord moins complet que WebPageTest, mais il n’est en pas moins très utile, et mieux présenté. Après le test, l’utilisateur a tout de suite une vision claire de la performance de son site, ainsi qu’une liste de score par catégorie :

Score GtMetrix.com

Score GtMetrix.com

Chose intéressante à noter, GtMetrix se base à la fois sur PageSpeed et YSlow, offrant donc les recommandations et les scores des 2 services. De plus, GtMetrix détecte si vous tournez sur un WordPress, et offre des conseils adaptés. Enfin, une liste exhaustive des recommandations classées par thème est disponible (voir cette page).

GtMetrix offre également le service de capture vidéo, et permet de monitorer les performances d’un site Web, avec un compte gratuit. Autre option intéressante de GtMetrix, dans la même veine que la désactivation Javascript de WebPageTest : l’activation d’Adblock, qui peut jouer sur la performance de votre site.

Comme WebPageTest, GtMetrix offre une vue sur les performances des principaux sites. Les top 1000 sites sont répertoriés, et on peut voir leurs scores PageSpeed / YSlow, leur nombre de requêtes, le poids de la page, etc.

Petit bémol cependant : GtMetrix n’offre que 7 serveurs différents (plutôt bien répartis dans le monde), 3 browsers (Firefox, Chrome et Chrome Android), et ne permet pas de customiser la connection réseau.

Dareboost

A la différence des 2 précédents, Dareboost.com offre assez peu d’options avec un compte gratuit. On ne peut monitorer qu’un seul site, ne tester que les homepages, et on ne dispose pas d’options avancées lors des tests. Seuls sont disponibles Chrome 35, Firefox 28 et le navigateur du Nexus 5, sur des serveurs à Paris ou New-York.

Malgré cela, le site offre  une visualisation claire et efficace sur score global de sa page, et propose des informations intéressantes que n’ont pas les 2 autres sites : la validation W3C pour HTML et CSS, ainsi que des recommandations en accessibilité et en SEO.

Score dareboost.com

Score dareboost.com

Un score sur 100 est attribué à chaque domaine (performance, cache, SEO…) avec les « best practices » correspondantes, plutôt complètes, pour améliorer ce score.

Les comptes payants (à partir de 14€/mois) disposent de plus de fonctionnalités.

A noter que Dareboost propose un blog très complet (en Français et en Anglais) dédié à la performance Web.

UPDATE : D’autres liens

Merci à Nicolas Hoffmann (@Nico3333fr) qui signale 2 autres liens utiles : http://www.yottaa.com et http://zoompf.com

Extensions navigateurs

A côté des outils en ligne, il existe plusieurs extensions pour les navigateurs, dédiés à la performance.

YSlow

L’extension YSlow existe pour Chrome, Firefox, et même mobile. Elle est assez répandue, comptant plus de 146.000 installations sur Firefox. Là encore, l’utilisateur peut analyser son site d’un simple clic, voir le score global de la page, et accéder à tout un ensemble de conseil visant à améliorer la performance du site.

PageSpeed

Dans la même veine, PageSpeed est disponible sur Chrome et Firefox, et apparaît sous la forme d’un onglet dans les Dev Tools. Un score est calculé, et un ensemble de suggestions d’amélioration est proposé à l’utilisateur. Un peu plus utilisée que YSlow, l’extension PageSpeed compte 411.000 utilisateurs sur Chrome.

PagePerformance

Extension Chrome, PagePerformance s’insère dans la barre d’outils, et analyse d’un simple clic l’onglet en cours. Dès que la page est chargée, l’icône indique le temps « first paint ». Des diagnostics de performance sont également disponibles.

Conclusion

Avec tous ces outils, vous êtes parés pour analyser la performance de votre site dans les moindres aspects. Pour le prochain billet, nous verrons comment utiliser tous les indicateurs de mesures et tous les chiffres mis à disposition par ces outils.

A bientôt !

<- Partie 1 : Introduction Partie 3 : Indicateurs de mesure ->

10 comments

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *