Un régime Dukan pour vos pages avec l’extension YSlow

regimeImgArticle2 Dernière mise à jour le 2 mai 2013 à 11h43

Bien que classé dans la catégorie référencement, cet article aurait également pu être dans la rubrique webdesign. En effet, l’optimisation des pages web fait partie du travail d’intégration, mais la finalité réside dans l’amélioration de l’accessibilité et du référencement.

De nos jours, les internautes sont pressés. Il est donc primordial de créer des pages rapides à charger et à s’afficher. Cela relève de l’optimisation et peut s’avérer fastidieux. C’est pourquoi il est important d’utiliser des outils spécifiques, qui permettent des optimisations de haut niveau et à moindre effort.

YSlow c’est quoi ?

YSlow est une extension Firefox fonctionnant avec FireBug, l’outil de débogage le plus chouchouté de la toile. Développé par les équipes de Yahoo, il s’agit d’un analyseur de pages web qui liste différents points d’amélioration à propos de vos pages. Ces suggestions sont basées sur un ensemble de règles de bonnes pratiques ayant fait leurs preuves dans les pages web de haute performance.

Cette extension s’articule autour de trois onglets de base :

  • Les performances
  • Les composants
  • Les statistiques

Trois outils complémentaires pour une optimisation de qualité

La performance

Lorsque vous cliquez sur cet onglet, YSlow lance une analyse.

Analyse de la page web par Yslow

A l’issue de cette analyse, vous constaterez une note globale en lettre comprise entre A et F. Elle résulte d’un calcul de moyenne effectué sur 23 critères qui affectent directement la vitesse de chargement de votre site Internet.

Chaque critère comprend également une note allant de A à F et un code couleur associé. Vous obtiendrez des informations supplémentaires et des conseils d’optimisation pour chacun d’eux en cliquant simplement dessus.

Le tableau recensant les notes des 23 critères

Les composants

Comme son nom l’indique, cet outil réunit dans un tableau l’intégralité des composants de votre page web. Vous y trouverez des informations sur leur comportement vis-à-vis des cookies, leur taille avant et après traitement par compression Gzip, leur temps de réponse, leur date d’expiration, leur Etag, etc…

Certaines données ne seront d’ailleurs visibles qu’après avoir ouvert chaque type de composant en cliquant sur le bouton (+).

Outil composant de l'extension Yslow

Les statistiques

Cet onglet illustre par un graphique en camembert la différence qu’il y a entre le cache vide et le cache contenant des données. Autrement dit, entre un visiteur qui accède à la page pour la première fois et celui qui l’a déjà visité.

On peut ainsi comparer le nombre de requêtes HTTP effectuées sur la page dans les deux cas. Vous comprendrez alors toute l’importance du cache et d’une meilleure gestion des cookies dans l’optimisation de votre page.

Les graphiques avec l'outil Statistique de Yslow

Des outils supplémentaires qui vous facilitent la vie

Mais l’utilité de YSlow ne s’arrête pas là, bien au contraire ! Il existe un dernier onglet nommé “Tools” contenant un panel d’outils très puissants qui vont vous permettre de diminuer le poids de votre site.

Les autres outils de Yslow

Visualiser le code avec “All JS Beautified & All CSS”

All JS Beautified et All CSS sont deux outils fonctionnant de la même façon. Vous aurez accès à une nouvelle fenêtre dans laquelle se trouve en en-tête les liens pointant vers un fichier où se trouve du JavaScript / CSS.

En effet, ces outils parcourent l’arborescence de votre site et récupèrent tout le JavaScript et le CSS qu’ils trouvent pour vous les restituer dans une seule et même page, le tout classé par ordre d’appel.

Compresser le code avec “All JS Minified & YUI CSS Compressor”

All JS Minified et YUI CSS Compressor fonctionnent de la même façon que les deux outils précédents, excepté que cette fois, il ne s’agit pas de vous restituer en l’état votre JavaScript et votre CSS, mais de vous le compresser !

Et oui, ces deux outils vous permettent donc de compresser votre JavaScript et votre CSS !

Note : La compression améliore le temps de chargement car elle réduit radicalement le poids des fichiers. Cependant faites très attention à toujours garder votre JavaScript/CSS non compressé en backup car une fois ceux-ci compressés il sera très difficile voire impossible de travailler dessus ! A moins d’utiliser un unminifier performant.

Méthodologie pour les débutants :

  • Travaillez en local en faisant vos modifications depuis vos fichiers de backup.
  • Uploadez-les normalement sur votre FTP.
  • Utilisez les outils de compression de YSlow.
  • Éditez vos fichiers depuis le FTP directement dans votre éditeur de texte.
  • Collez les scripts condensés fournis par les outils dans les fichiers adéquats avant de les enregistrer.
  • Lorsque vous aurez des corrections à apporter, réitérer l’opération depuis le point n°1.

Méthodologie pour les intermédiaires/initiés :
 
Contrairement aux débutants, les initiés évitent d’effectuer des modifications directement sur le FTP. D’autant plus qu’ils utilisent généralement un logiciel de versioning, type SVN. De plus, il n’est pas envisageable de minifier les scripts après chaque correction/update. Pour ces raisons, ils utilisent d’autres techniques bien plus simples et efficaces afin de minifier dynamiquement leurs scripts :

  • Un minifier automatique, aussi appelé JS ou CSS Packer.
  • Un plugin de gestion de cache, tel que W3 Total Cache sur WordPress. Ces plugins possèdent énormément d’options d’optimisation, notamment la compression, et même le regroupement, des scripts.

 

Réduire le poids des images avec “All Smush.it”

All Smush.it est un outil qui utilise des techniques d’optimisation en retirant les octets inutiles de vos images. Considéré comme un outil “lossless”, Smush.it optimise vos images sans en altérer la qualité visuelle. Il ne s’agit donc pas de compression d’image, par conséquent la perte de poids reste relativement basse (de l’ordre de 5 à 10%).

Compresser ses images avec Smush.It

Pour compresser vos images, tournez-vous vers d’autres outils comme WebResizer. Celui-ci intègre quelques fonctionnalités intéressantes notamment un aperçu du rendu de vos images. Vous pourrez jauger votre compression de façon à garder un bon ratio poids/qualité.

Conclusion

YSlow a tout pour plaire, il conviendra parfaitement aux novices et aux intermédiaires dans le domaine de l’optimisation et de l’accessibilité. Utiliser cette extension est une première approche pour alléger rapidement, simplement et efficacement vos pages web.

Sachez par ailleurs que bien que le régime Dukan soit plutôt controversé, l’optimisation de vos pages avec YSlow est sûre à 100% !

Télécharger l’extension YSlow

Nécessite le navigateur Firefox et l’addon FireBug

Commentaires

#1
Morgan Fabre

J’aime particulièrement l’outil Smush It de YSlow qui est vraiment puissant.

Réagissez à cet article

Données obligatoires