Les outils : Yslow

Aujourd’hui je fais réviser les bases avec Yslow. Il s’agit d’un outil développé par Yahoo! pour vérifier de façon automatisée l’application des règles de performances web internes. Il offre une vue rapide du poids et du temps de rendu de la page, une notation après vérification une à une de 13 des règles de performance web Yahoo!, des graphiques statistiques sur la gestion du cache, et des informations détaillées sur tous les composants de la page

Si vous travaillez sur les performances c’est un des outils de base, indispensable pour ses résultats concis et son côté pratique.

Bien entendu je ne vous donne ici qu’un tour d’horizon, en cas de questions sur l’utilisation l’aide en ligne vous sera plus utile que la zone de commentaires. Vous y trouverez des captures d’écrans et même une vidéo explicative. Du coup j’en profite pour m’abstenir de les reproduire ici.

Installation et utilisation

Yslow se greffe en tant qu’extension du navigateur sur Mozilla Firefox, par dessus l’extension Firebug. Il vous faudra donc d’abord faire un tour pour installer ce dernier si ce n’est pas déjà fait (ce qui serait limite une faute professionnelle pour un intégrateur web). La version 0.9.5b2 de Yslow supporte Firefox 2 comme Firefox 3 ainsi que Firebug jusqu’aux dernières versions de développement de la branche 1.2.

Après installation vous aurez un onglet de plus dans Firebug et une icône de plus dans la barre de statut en bas du navigateur.

Indicateurs de performance

Si vous faites tourner Yslow automatiquement sur toutes les pages que vous visitez, trois indicateurs apparaissent automatiquement à ôté de cette icône dans la barre de statut : une note de A à F (A étant la meilleure), le poids total des composants téléchargés pour la page (avant décompression), et le temps total nécessaire pour finir le rendu et ces téléchargement (sauf erreur de ma part on attend l’événement « load » de la page). 

Simple, concis. Si ça vous affiche « F 750ko 7s » vous avez un gros problème. C’est à vous de définir vos objectifs pour les deux derniers indicateurs, mais si vous n’avez pas A sur le premier certaines actions correctrices vous seront proposée pour améliorer les performances. 

Détail des règles de performance

Ouvrez Firebug, sélectionnez l’onglet de Yslow puis la section performance, c’est une note de A à F que vous aurez pour chacune des 13 règles de performance initialement publiées par Yahoo!.

On vous donne la règle concernée en face de chaque note. Un simple clic vous envoie sur une page de l’équipe performance de Yahoo! où on détaille la règle en question et l’action à entreprendre. Si la note n’est pas A, une petite flèche vous permet d’accéder à plus de détails sur ce qui pose problème sur votre page : généralement les liens vers les composants concernés.

Statistiques de cache

La section suivante est plus là pour gérer les questions de cache. On vous propose deux graphiques en camembert qui vous donnent le nombre et le poids des composants répartis par type : HTML, CSS, images, etc. Il y en a un qui représente ce qu’un utilisateur avec un cache vide télécharge, et un qui représente ce même visiteur dans une hypothétique seconde visite avec le maximum d’informations en cache.

Juste en dessous vous avez le poids et le détail de tous les cookies échangés. J’en reparlerai mais gardez à l’esprit que le poids des cookies influe sur les performances, et pas toujours dans des proportions négligeables.

Statistiques détaillées

La dernière section est plus classique. Elle inventorie tous les composants de la page avec le poids avec et sans gzip, le type, l’url, la présence ou non d’une directive de cache, la présence ou non d’une compression gzip, et bien sur le temps de réponse. Pour chaque composants vous pouvez accéder au détail des entêtes envoyées par le navigateurs puis reçues en provenance du serveur.

C’est là dedans qu’il faudra fouiller pour voir si quelque chose choque : trop de javascript, des images trop lourdes, des compressions gzip inefficaces, etc.

Limitations et raisonnement

Seules 13 règles de base sont vérifiées, et elles le sont de manière aveugle. Comme tous les outils c’est à vous de voir si la règle est vraiment pertinente ou prioritaire pour votre cas. Il est fait pour vous aider, pas tout faire à votre place ou remplacer votre cerveau.

Par exemple, si vous n’avez qu’un seul serveur ne vous embêtez pas à désactiver les Etags et oubliez le méchant F que Yslow vous affiche à ce propos.

Malgré cela, Yslow est une brique quasiment indispensable à tout intégrateur concerné par les performances web. Plus haut je vous disais à demi sérieux que ne pas utiliser Firebug était quasiment une faute professionnelle, pour Yslow on n’en est pas loin non plus.

Quand vous aurez un beau A dans Yslow vous aurez déjà fait le principal. À partir de là vous ne serez plus guidés dans les optimisations à faire et gagner en performance deviendra plus complexe. D’ici là, gardez Yslow dans votre boîte à outils.