Développement, annonces, mises à jour, insolite : le Blog.

Accueil / Blog / Développement / YSlow analyse et note vos pages

lun.		YSlow analyse et note vos pages  Catégorie : Développement.  Tags : Performances, Web.
12	/01
	09

"Précédemment dans la série des performances sur le Web" : je vous avais parlé de YSlow, outil développé par Yahoo qui se trouve être un ajout pour le plugin Firebug lui-même ajout pour le navigateur Firefox. Eh bien même si je pars du principe que vous avez installé au moins Firefox - voire Firebug - je le redis, allez de ce pas télécharger ces trois trésors pour développeur Web, vous n’avez aucune excuse je viens de vous redonner tous les liens ! Bien, maintenant que chacun est régularisé, jouons un peu avec YSlow (pour des captures d’écran, consulter la page de téléchargement de YSlow) ...

Une fois installé, YSlow s’ajoute dans la barre d’état, en bas à droite de chaque fenêtre ouverte de Firefox. L’outil est symbolisé par un compteur de type "je roule à combien ?" bleu avec une aiguille rouge suivi du nom "YSlow". Pour chaque page que vous visiterez, le temps mis pour un chargement complet (exprimé en secondes) viendra s’ajouter aux compteur et nom, après quoi vous pourrez lancer une analyse poussée de la page en cliquant simplement sur le nom "YSlow". Cette action aura pour effet de dérouler Firebug sous son onglet Yslow dans son sous-menu "Performance" ; chaque composant de la page va alors être détecté (CSS, images, JavaScript, etc.) et analysé. Une fois cette étape terminée (ceci peut prendre plus ou moins longtemps en fonction de votre connexion et du nombre total de composants de la page en question), un rapport vous sera affiché. Ce fameux rapport se base sur les 13 règles d’optimisation suivantes afin de décerner des notes pour chacune (comme à l’école aux USA : de "A" à "F", "F" étant la moins bonne) ainsi qu’une note globale :

1) Make fewer HTTP requests
2) Use a CDN
3) Add an Expires header
4) Gzip components
5) Put CSS at the top
6) Put JS at the bottom
7) Avoid CSS expressions
8) Make JS and CSS external
9) Reduce DNS lookups
10) Minimify JS
11) Avoid redirects
12) Remove duplicate scripts
13) Configure ETags

Je reprendrai chacune de ces règles en détail dans les billets suivants (à partir de demain) mais je dois d’abord terminer de vous exposer les fonctionnalités offertes par ce merveilleux outil qu’est YSlow. Admettons que vous n’obtenez qu’une petite note de "D" à la règle numéro 1, vous avez alors deux possibilités (trois en fait) : soit vous cliquez sur la flèche qui suit le nom de la règle dans YSlow et cela vous donnera des explications sur votre "D", soit vous cliquez sur le nom de la règle dans YSlow et cela vous redirigera vers le site de Yahoo où vous aurez plus d’explications sur la règle concernée (en anglais cependant) ou enfin vous pouvez attendre mes explications qui arriveront dès demain. Voilà pour ce qui est du sous-menu "Performance".

Le sous-menu "Stats" est tout aussi intéressant et utile, il vous propose deux graphiques en camembert selon deux entrées, le premier traduit le poids de la page analysée et la répartition de ce poids entre les différents composants, le tout dans le cas d’un cache client vide (le cache du navigateur ou cache HTTP, vous en saurez plus si vous suivez au moins mes deux prochains billets) autrement dit, dans le cas d’une première visite ; le second camembert traduit exactement la même chose mais dans le cas hypothétique d’une seconde visite et - si vous avez fait correctement votre travail d’optimisation - d’un cache client plein. En d’autres termes, si les deux graphiques sont exactement les mêmes pour une même page c’est qu’il y a un problème. Enfin, juste en-dessous des camemberts, vous trouverez des informations complémentaires sur les cookies envoyés par la page en question.

Le sous-menu "Components" s’occupe de lister dans un tableau tous les composants de la page analysée. Vous pourrez alors y retrouver très rapidement un certain nombre d’informations importantes telles que le type du composant (doc, flash, js, css, image, cssimage, ...), son URL, si le composant contient des données d’expiration (pour la durée de stockage dans le cache client), si il est compressé via la méthode Gzip, son temps de réponse au chargement de la page (exprimé en millisecondes), son poids compressé (si Gzip) et non compressé, si il est associé à un ETag (j’en reparlerai), et enfin toutes les données contenues dans son en-tête HTTP (ou Header) en cliquant sur l’icône représentant une petite loupe dans la colonne URL.

Vous détenez maintenant toutes les clés pour une utilisation productive de YSlow et pourrez alors très prochainement constater par vous-même chaque centaine de millisecondes gagnée sur le temps de chargement de vos pages ainsi que votre progression rapide quant à la note que l’outil vous a attribué lors de votre première analyse. Sachez qu’encore trop peu de sites Web se soucient de cette question des performances mais ceci devrait être amené à changer, et pourquoi pas grâce à vous ?! On se retrouve demain pour réduire le nombre de vos requêtes HTTP.

Cordialement.

0 commentaire.

Billet lu 0 fois.   Écrit par : Sebastien P.

< Billet précédent | Haut de la page | Billet suivant >

Le module de commentaires est temporairement désactivé.
Merci de votre compréhension.