Optimiser les performances d'un site avec 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.

Commentaires

2. Le dimanche, novembre 23 2008, 16:38 par Rik

Si tu étais venu aux ateliers en 2007, tu l'aurais déjà fait tout ça. Vaut mieux tard que jamais ;)

Sinon, les Etag ne font pas doublon avec Expires. Avec Expires (ou Cache-Control), il n'y aura pas de requête HTTP du tout. Avec les Etag (ou Last-modified) il y a une requête pour vérifier que le fichier n'a pas changé. Le serveur répondra avec un code 304 et pas de contenu.

Les notions sont différentes et complémentaires.

3. Le mardi, décembre 23 2008, 03:45 par castor.toma

Je ne comprends rien à tout ces truc... Tu aurais 2 minute pour te pencher sur me site et me dire ce qui ne va pas / ce que je dois y faire ?