Laurent Kempé
L'outil pour site web YSlow de Yahoo
Présentation de l'outil YSlow de Yahoo permettant l'analyse des performances de votre site web
Par Laurent Kempé publié le 16/08/2007 à 12:20, lu 19177 fois,
YSlow, un nouvel outil web vient d'être publié par Yahoo. Il permet de tester un total de 13 règles simples en relation avec la vitesse des sites web.
YSlow est une extension à Firefox intégrée à l'outil de développement web Firebug.
La liste des règles et les explications sont disponibles sur la page : Thirteen Simple Rules for Speeding Up Your Web Site. Enfin la documentation est disponible sur la page YSlow User Guide.
YSlow analyse les pages web et génère une note globale et une pour chacune des règles testées.
 
L'interface de YSlow présentant les résultats sur Tech Head Brothers

L'interface de YSlow présentant les résultats sur Tech Head Brothers

 
Par exemple sur l'image précédente on voit la note globale égale à C (ce qui n'est pas trop mal) et les différentes notes par règles avec par exemple un D pour « Make fewer HTTP requests ». On peut bien entendu étendre chaque section afin de voir ce qui peut être amélioré.
 
Détail de l'analyse de YSlow en mode performance view

Détail de l'analyse de YSlow en mode performance view

 
On voit sur cette image qu'YSlow a déterminé que nous avons 11 requêtes HTTP pour des fichiers JavaScript et qu'il considère que c'est trop et bien entendu que cela ralenti le chargement de la page. En cliquant sur le lien de la règle une page web s'ouvre avec la description de la règle. Cette page nous informe que réduire le nombre de requêtes HTTP est la première chose à considérer lors de l'optimisation de la vitesse d'un site web. Il y a quelque temps j'ai fais cette opération sur Tech Head Brothers, qui utilisait à l'époque beaucoup trop de fichier CSS et il est vrai qu'il y a eu un impact assez remarquable sur le temps de chargement de la page.
YSlow calcule la taille totale d'une page web lorsque le browser a le cache vide et lorsqu'il utilise le cache. Il vous donne aussi des informations sur les cookies.
 
L'interface de YSlow en mode stats montrant l'avantage du cache

L'interface de YSlow en mode stats montrant l'avantage du cache

 
Cela permet de voir clairement l'impact du cache sur votre application web. Sur l'image précédente on voit clairement l'impact du cache sur les données téléchargées puisque l'on passe de 127.3 Kb et 21 requêtes HTTP lorsque le cache est vide à 28.2 Kb et 5 requêtes HTTP. Un gain non négligeable.
YSlow liste tous les composants de la page web inclus leur type, URL, date d'expiration, le status gzip de compression, le temps de chargement, la taille et l'ETag.
 
L'interface de YSlow en mode composants

L'interface de YSlow en mode composants

 
Le dernier menu est un menu d'outils permettant d'afficher la totalité des scripts JavaScript de même pour les CSS sur une page web afin d'avoir une vue d'ensemble. Il permet aussi d'afficher sur une page web la totalité des 3 rapports d'YSlow. Le dernier élément est JSLint qui vérifie les codes de convention du langage JavaScript.
 
Le menu Tools

Le menu Tools

 
YSlow est donc un outil de plus à ajouter à votre ensemble d'outils permettant le développement de vos sites web.
 
» Démarrer une discussion
 
 
Discussion démarée par cgodefroy le 07/09/2007 à 19:49, 1 commentaire(s).