Retour d'expérience YSlow et Page Speed

J'ai beaucoup utilisé YSlow ces temps ci, en particulier parce pour la première fois j'ai reçu des exigences de performance incluant le grade YSlow.

Je ne reviendrai pas sur la présentation de ces deux outils. Il existe de nombreux commentaires listant la mise en oeuvre et décrivant les règles.

• Yahoo's YSlow
• Google's Page Speed
  

Je voudrais simplement faire un retour d'expérience sur YSlow et Page Speed. C'est un retour QA plus que développeur, car j'interviens sur un projet dans la phase d'optimisation juste avant les tests de performance.

Les deux sont des plugins Firebug et s'installent très facilement. Ils apparaissent ensuite comme onglets dans Firebug. Bien sûr, l'utilisation de Firebug implique que l'application tourne sur Firefox. Pour IE, il existe AOL Page Test, que je n'ai pas testé, vu qu'il a obstinément refusé de fonctionner.

Même s'ils apparaissent très similaires et sont basés en gros sur les mêmes Best Practices, les deux outils ne sont pas positionnés de la même manière.



YSlow

YSlow facilite la communication sur les performances :

• Le grade général permet d'avoir une appréciation globale du niveau de performance, et par conséquent de communiquer sur l'évolution de ce niveau
• Un rapport HTML peut être généré très facilement et diffusé
• Ces rapports peuvent aussi être stockés pour comparer les résultats dans le temps
  

YSlow a permis de déterminer rapidement le besoin de configurer les modules Apache mod_expires et mod_deflate.
Une fois cette opération faite YSlow a permis de vérifier facilement que les dates d'expiration de cache sont maintenant correctes et que les contenus sont compressés.

En revanche, YSlow est assez général sur les recommandations. La règle a appliquer est présentée de manière très claire mais elle n'est pas appliquée au cas particulier. La conséquence est qu'il faut plus d'effort pour estimer le gain que l'on peut espérer de la correction et donc motiver une correction rapide.

C'est là qu'intervient Page Speed.



Page Speed

Page Speed fourni un état très complet, des propositions de correction et une évaluation du gain. Je ne suis pas vraiment la cible car je ne développe pas les pages sur ce projet. Il m'a tout de même servi pour plusieurs choses :

• Evaluer la minification des JavaScripts : le gain de la minification des JavaScript est de 150Ko par page sur les pages testées et une action pour mettre en place Dojo's ShrinkSafe est "rentable". Or cet outil est disponible mais personne n'a jamais eu le temps d'insérer le script dans le build
• inspecter les headers facilement : Les pages sont en HTTPS et les headers ne sont pas disponibles dans Fiddler. L'onglet resources de Page Speed affiche les headers requête et réponse et le texte ou contenu de chaque resource.
  
• "Smusher" les images : YSlow fournit aussi ce service mais en passant les URLs des images au site smushit.com. Or le site en développement n'est pas accessible depuis Internet. Page Speed génère automatiquement la version "smushée" de chaque image. Cela a permis de traiter rapidement 5 images sur lesquelles il y avait un gain de plus de 1Ko.
  
• Evaluer le CSS : constater que certaines maladresses sur le CSS sont classées "très mauvais" et nécessitent une action.
  

Avant de conclure, quelques conseils tirés de mon expérience YSlow.



Les jeux de règles YSlow

YSlow permet de créer des jeux de règles spécifiques. C'est utile lorsque certaines règles ne sont pas applicables :

• Le support des navigateurs interdit la mise en oeuvre de certaines règles
• L'application n'est pas dans un environnement permettant l'évaluation de la règle. C'est le cas en particulier de la règle "Use a CDN"souvent difficile à vérifier en développement (un CDN est un Content Delivery Network, c'est à dire un service de cache tel qu'Akamaï ou Limelight)

Les jeux de règles sont accessibles via le bouton Edit à côté du nom de règle.

• Une fois définies les règles via les cases à cocher, sauvez le ruleset. Il apparaitra dans les Custom Sets sur la gauche
• Redémarrez Firefox ! : les mises à jour ne sont sauvées qu'au moment de l'arrêt de Firefox. J'ai refait le ruleset 2 ou 3 fois suite à des plantages Firefox ;-)
  

La gestion du cache

YSlow se base sur le comportement de Firefox. Il est important que tous les contenus soient rechargés pour que leur statut soit mis à jour.

C'est particulièrement visible sur les dates de cache :

• Juste après la mise en place des directives pour mod_expires, les données sont affichées à jour. La date est dans plus de 48h et satisfait la règles "Add expire headers".
  
• Le lendemain, la règle est violée car la date d'expiration n'étant pas atteinte Firefox n'a pas rechargé les contenus statiques. Et les contenus en cache sont maintenant valides pour moins de 48h.
• Forcer le rechargement marche dans une certaine mesure, mais n'agit pas sur toutes les ressources. Le plus fiable est de vider le cache pour avoir les fichiers à jour.
  

En conclusion

Les deux outils sont très utiles pour améliorer la qualité des pages Web.

• YSlow s'adresse plutôt aux personnes qui valident l'application et au suivi qualité
  
• Page Speed est plutôt destiné aux développeurs qui vont optimiser les pages.

Posts similaires :

• Velocity 2009