Hier, il y a eu quelques ralentissement du serveur (Dreamhost) dont je fais l’éloge dans mes derniers billets. Et donc j’ai décidé de m’attaquer à l’optimisation de Webdesign-tutoriaux. Donc voici tout d’abord les outils que j’ai utilisé :

pingdom.jpg

  • PingDom tool est un outil permettant de mesurer le temps de chargement de chaque éléments d’une page web et ainsi de voir les images ou les Javascripts qui peuvent ralentir.
  • Yslow qui est une extension Firefox pour FireBug et développé par Yahoo. Yslow mesure à peu près la même chose que PingDom mais depuis votre navigateur et en vous donnant des conseils d’optimisation.

En gros pour diminuer le temps de chargement d’une page il faut :

  • Eviter d’avoir trop de requêtes http sachant qu’il y a une requête pour chaque fichier Css et Js à charger.
  • Avoir des images de poids faible (généralement préférer les Gif au Jpeg) le découpage du design joue.
  • Lancer les scripts Javascript à la fin de la page quand c’est possible.

La solution si vous ne souhaitez pas rentrer dans les détails est un script PHP d’aciddrop qui permet en 3 lignes de :

  • Regrouper les fichiers CSS et Js en un seul pour avoir moins de requêtes Http
  • Ajouter des entêtes qui expirent
  • Compresser des composant de la page avec Gzip
  • Minifier (de minify en anglais) les Css, Javascript et html : en gros on supprime les espaces, les tabulations et les retour à la ligne afin que les fichiers soit moins gros et donc moins long à charger

Enjoy !