Ce qui est intéressant quand on fait des tutoriels c’est qu’on s’aperçoit que l’on a soit même mal appliqué les astuces que l’on va énoncer.
Je voulais vous faire un petit tutorial sur comment optimiser un peu les pages en elles-mêmes, et finalement on va commencer par quelque chose de plus basique la compression des pages.
La première étape que je vous propose, c’est de télécharger pour ceux qui ne le connaissent pas encore un plugin pour firefox nommé Yslow qui nous donne de nombreuses informations sur l’optimisation de votre site. Ce plugin développé par Yahoo fait parti d’un ensemble de bonnes pratiques pour optimiser le temps de chargement de vos pages. Vous pouvez en retrouver la liste (en anglais) ici : http://developer.yahoo.com/performance/rules.html#cdn
Et en complément quelques idées supplémentaires sur leur blog de développement:
http://developer.yahoo.net/blog/archives/2008/03/yahoos_latest_p.html
Le premier onglet de ce plugin « Performance » nous donne des indications sur le respect de votre site de ces bonnes pratiques. Chaque élément est noté entre A et F et nous donne une idée des points que l’on a pu oublier, comme par exemple activer la compression gzip sur le serveur (bien que la note totale -souvent F- ne présente pas beaucoup d’intérêt car certaines règles sont difficiles à mettre en pratique).
On observe d’ailleurs que Magento respecte naturellement nombres de ces règles (une bien connue maintenant étant la minification des js).
Ce qui nous amène au deuxième onglet, l’onglet « Stats », celui-ci permet d’obtenir le poids total de votre page, ainsi que la répartition du poids entre les différents éléments (images, css, flash, html) ainsi que le poids de votre page une fois que les éléments ont été chargé une première fois et sont dans le cache du navigateur.
On voit ainsi dans cet exemple la différence de poids que l’on peut avoir entre une page d’accueil avec ou sans la compression gzip. Je pense que je n’ai pas besoin de vous expliquer l’intérêt d’économiser 200Ko de trafic pour chaque internaute qui chargera votre page d’accueil.
Enfin l’onglet « Components » nous permet d’avoir le détail pour chaque élément son poids (avant et après compression gzip), comme l’onglet Net (Réseau en français) du plugin Firebug, on peut voir en rouge les éléments qui n’ont pas été chargés ainsi que le temps de chargement de chaque élément. Cet onglet est intéressant puisqu’on peut classer les éléments par poids. On peut ainsi s’apercevoir qu’on a des images qui mériteraient une compression jpg plus forte, ou qu’un flash mériterait d’être optimisé (voir déplacé ou remplacé par quelque chose de plus léger si par exemple il est sur une la page d’accueil d’un site à fort trafic).
J’arrive à mon deuxième point, la compression gzip. En complément du plugin Yslow ce lien http://www.whatsmyip.org/mod_gzip_test/ permet de vérifier immédiatement que la compression est bien activée pour une url donnée.
Pour activer la compression gzip cela suppose que le module apache adéquat soit chargé (mod_gzip qui se nomme maintenant mod_deflate), je vous laisse vous tourner vers votre hébergeur ou google pour vérifier que ce module est chargé.
Ensuite quand le module est chargé, il faut également que les règles apache correspondantes aient été chargées, chose qui n’aura pas toujours été faite quand on vous livre un serveur. On a alors toutes les règles nécessaires dans le fichier .htaccess de notre bon vieux magento qu’il suffit de décommenter :
############################################
## enable resulting html compression
php_flag zlib.output_compression on
############################################
## enable apache served files compression
## http://developer.yahoo.com/performance/rules.html#gzip
# Insert filter
SetOutputFilter DEFLATE
# Netscape 4.x has some problems…
BrowserMatch ^Mozilla/4 gzip-only-text/html
# Netscape 4.06-4.08 have some more problems
BrowserMatch ^Mozilla/4\.0[678] no-gzip
# MSIE masquerades as Netscape, but it is fine
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
# Don’t compress images
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary
# Make sure proxies don’t deliver the wrong content
Header append Vary User-Agent env=!dont-vary
(On peut évidemment appliquer directement ces règles dans le httpd.conf d’apache quand on sait ce que l’on fait).
Attention, si l’on transfert du Zip, le « php_flag zlib.output_compression on » va poser problème me remonte un lecteur !
Commentaires récents