Améliorer les perf de vos sites sans toucher au codebelles-performances-formule-1-sur-tf1-L-1.jpeg

Introduction

Ce billet n'a pas la prétention d'inventer quoi que ce soit , mais juste informer sur des petites parades pour améliorer les choses . Aprés avoir utilisé YSlow , j'ai remarqué que pour la majorité des sites que je gère , les résultats n'étaient pas vraiment bon .

Grade C ou D et un score de 63 à 74 sur 100 ...

Je décide donc d'optimiser le tout ..

Que toucher ?

Les modifs apportées sont ( pour le moment ) uniquement au niveau d'apache , donc soit dans la configuration global , ou des vhosts ou encore dans un .htaccess . Ce qui permet de gérer ces modifs comme vous le souhaitez .

Les mod_x à activer

Pour mener à bien l'opération , j'ai activer 3 mod supplémentaires , à la compilation d'apache . Pour ceux qui utilisent les paquets de leurs distrib , utiliser a2enmod pour les activer . Pour ceux qui compilent eux même apache , il faut ajouter les options suivantes , au moment du configure :

--enable-expires \
--enable-deflate \
--enable-headers \

Je vous laisse lire dans la documentation d'apache2 , à quoi correspondent ces mod .

Compilé apache et redémarrer celui-ci

make
make install
/usr/local/bin apachectl restart

Les modifs à apporter

Ces lignes de configurations sont à ajouter entre des balises location ou directory , que ce soit dans un .htaccess ou vhost ( pour cibler un site en particulier ) ou dans la configuration globale d'apache2 ( pour l'ensemble des sites ).

Expires headers

Commençons par gérer l'expiration des données statiques , celà permet au navigateur d'utiliser au mieux son cache , on peut donc jouer sur le temps de validité de ces données , ce qui évite au navigateur de demander à ravoir ces données depuis la source ( sauf si le délai mis en place est dépassé ).

commandes:
ExpiresActive On
ExpiresByType text/css "access plus 30 days"
ExpiresByType text/javascript "access plus 7 days"
ExpiresByType application/x-javascript "access plus 7 days"
ExpiresByType application/javascript "access plus 7 days"
ExpiresByType image/x-icon "access plus 7 days"
ExpiresByType image/vnd.microsoft.icon "access plus 7 days"
ExpiresByType image/png "access plus 30 days"
ExpiresByType image/gif "access plus 30 days"
ExpiresByType image/jpeg "access plus 30 days"
ExpiresByType image/jpg "access plus 30 days"
ExpiresByType application/x-shockwave-flash "access plus 60 days"

Compression des données

Nous allons ici activer la compression des données , principalement les données textes , xml , js et css . Les images étant déjà compressés , il n'y a pas d'intérêt ici à essayer de le re-compresser , si ce n'est prendre de la ressource serveur pour rien !

commandes:
#Ajoute / active le mode deflate 
SetOutputFilter DEFLATE

# Pas de compression avec Netscape 4.x qui a de nombreux problémes avec 
BrowserMatch ^Mozilla/4 gzip-only-text/html

#idem avec Netscape 4.06-4.08 .. voir pire
BrowserMatch ^Mozilla/4\.0[678] no-gzip

# Régles plus précises pour MSIE comme Netscape
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

#pas de compression des images
SetEnvIfNoCase Request_URI \
\.(?:gif|jpe?g|png)$ no-gzip dont-vary

# Afin d'être certain que les proxy ne délivrent pas de mauvais contenus 
Header append Vary User-Agent env=!dont-vary
/// 

!!!Fin 

Nous voilà avec notre nouvelle configuration .. 

Commençons par vider les cache du navigateur et redémarrons apache pour prendre en compte ce que nous venons de faire .

/etc/init.d/apache2 restart ///

Résultats

Avant

gradeD.jpeg

Aprés

gradeB.jpeg

Bonne continuation ...

Ch.