Qu’est-ce que YSlow?
YSlow c’est une extension pour Firebug (oui FireBug et non pas Firefox! C’est une extension d’une extension!) qui aide les développeurs à optimiser les performances des sites qu’ils développent. YSlow donne une note de A à F à une page, A étant très fort et F étant moins optimisé. Les règles d’optimisation utilisées pour décider de la note sont celles de Yahoo, développeur de l’extension. C’est un outil qui était à la base utilisé à l’interne chez Yahoo et qui est maintenant disponible au grand public.
L’évaluation
Voici l’évaluation YSlow de Go-Referencement, 59%, mais n’allez pas croire qu’il s’agit d’une mauvaise note, il est très difficile d’obtenir une note au dessus de 90!
On peut voir sur la saisie d’écran que YSlow est simplement un autre onglet à l’intérieur de Firebug. En plus de l’évaluation détaillée de la performance que l’on voit sur l’image ci-dessus, YSlow offre :
- Des statistiques de gourmandise de la page
Empty Cache Full Cache
69.5K 1 HTML document (est)
15.4K 1 Style Sheet File
19.1K 6 JavaScript Files
1702.9K 87 Images
13.1K 3 CSS Images
1820.3K Total size
98 HTTP requests
69.5K 1 HTML document (est)
0.0K 1 Style Sheet File
6.7K 6 JavaScript Files
2.0K 86 Images
0.0K 3 CSS Images
78.3K Total size
97 HTTP requests
Cookies: 1046 bytes
- Liste des requêtes HTTP de la page
Type URL Expires Gzip RespTime Size(Ungzip) ETag
css [HTTP headers] http://www.go-referencement.org/.../style.css 74 15.4K "a180de-3c4b-463f865c"
Pour ce qui est de l’évaluation de performance, c’est une évaluation en 13 points, chaque point se voit assigner une note de A à F et un total est calculer pour le résultat final. Les points évalués sont :
- Faire moins de requêtes HTTP.
- Utiliser un CDN (Content Delivery Network)… Technologie réservée aux gros joueurs de l’industrie visant à offrir une connexion à un serveur géographiquement plus proche du visiteur… Google et compagnie offre ce genre de solutions.
- Mettre une date d’expiration dans les entêtes HTTP. L’objectif étant de permettre au navigateur de mettre en mémoire cache le maximum. Dans un tel cas, si vous faites des modifications sur vos fichiers, les navigateurs ne s’en rendront pas compte ce qui implique qu’il faut ajouter une version à nos noms de fichiers Ex : styles_1.1.2.css pour que le navigateur télécharge la nouvelle version.
- Supporter et offrir la compression Gzip pour que le serveur envoie de façon compressée les données au navigateur qui lui les décompresse.
- Charger les feuilles de styles dans l’entête de la page… J’espère que vous aurez A pour ce point là !
- Mettre les scripts dans le bas de la page. Le JavaScript lourd peut bloquer le rendu progressif de la page.
- Éviter les Expressions CSS Ex : background-color: expression( (new Date()).getHours()%2 ? “#B8D4FF” : “#F08A00″ ); pour changer le fond d’écran à chaque 2 heures…
- Mettre le CSS et le Javascript dans des fichiers externes.
- Diminuer le temps utiliser pour les requêtes DNS… rien n’est téléchargé tant que la requête DNS n’est pas complète.
- Compresser vos fichiers Javascript, et j’ajouterais, compresser vos fichiers CSS. C’est très mauvais pour la compréhension du code mais enlever les espaces superflus (tout mettre sur une ligne) augmente la rapidité.
- Éviter les redirections.
- Éviter d’inclure les mêmes fichiers externes à plusieurs reprises dans la même page…
- Utilisation des Etags. Permet de mettre une version sur chaque élément d’une page pour faciliter l’utilisation ou non de la cache.
Plusieurs s’entendent pour dire que YSlow est un outil intéressant dont l’évaluation de la note est favorable à Yahoo. Je vois dans les 13 points des éléments intéressants à considérer et d’autres plus difficiles à atteindre. L’important à mon avis est d’être au courant de l’existence de ces éléments et de les appliquer selon nos besoins en performance et budget!
Et oui c'etait le but de l'article 