Optimiser les performances d'un site avec YSlow

Samedi 22 novembre 2008

YSlow Il y avait une conférence à Parisweb 2008 qui m’a beaucoup intéressé. C’était sur des techniques d’optimisations d’un site pour le rendre plus rapide. Il y a une extension Firefox qui s’appelle YSlow qui permet d’analyser une page web.

Une extension Firefox

Bon, comme YSlow est une extension Firefox, il faut Firefox … mais aussi Firebug parce que c’est une extension d’extension :)

Optimisations faciles

Je ne vais pas faire un didactitiel de comment YSlow fonctionne, c’est vraiment simple et il y a de la documentation sur le site officiel.

Par contre, je vais vous dire ce que j’ai simplement ajouté comme optimisation, sans rien toucher au site. J’ai fait mes tests sur mon site de référence HTML que je suis en train de faire (c’est pas fini quoi :) ) et qui est hébergé sur OVH en mutualisé. D’ailleurs, c’est un hébergement gratuit avec 1Mo d’espace disque, largement suffisant.

Dates d’expiration

Première optimisation, ajouter des dates d’expiration aux fichiers pour que le navigateur n’ait pas à les chercher trop souvent. Je fais ça dans un .htaccess :

ExpiresActive On
ExpiresByType image/gif "access plus 10 years"
ExpiresByType image/jpeg "access plus 10 years"
ExpiresByType image/png "access plus 10 years"
ExpiresByType text/css "access plus 10 years"
ExpiresByType application/javascript "access plus 10 years"
ExpiresByType text/javascript "access plus 10 years"

Les informations ETag

Les informations ETag, c’est bien mais ça faisait doublon avec ce que j’ai fait avant avec la date d’expiration. Et puis d’ailleurs, j’ai même pas compris comment ça marchait. J’ai donc désactivé l’envoi de ces informations dans le .htaccess :

FileETag none

Compression des fichiers

Pour les navigateurs qui le supporte, il est possible d’envoyer les fichiers en compressé. Ensuite, le navigateur les décompresse.

AddOutputFilterByType DEFLATE text/javascript application/javascript text/css application/xhtml+xml text/html

J’ai fait le test en désactivant le header "Accept-Encoding: gzip,deflate" de Firefox pour voir, et ça marche, les fichiers ne sont plus envoyés en compressés.

Les fichiers javascript

Une des recommentations de YSlow est de ne pas mettre les fichiers javascripts dans le <head>, je les ai donc mis à la fin. C’est parce que les scripts bloquent les téléchargements en parallèle.

Conclusion

Et avec tout ça, mon site a une note de performance A, et je suis trop content … :)

A part la dernière astuce avec les javascripts, j’ai simplement modifié mon .htaccess, fastoche! Bon, vérifiez quand même votre configuration serveur pour savoir si vous pouvez le faire.

neolao