Testez et optimisez l'affichage de votre site web

Votre site web est lent et vous ne savez pas par où commencer pour l'optimiser? Il existe de nombreux outils sur le web pour vous aider

Je ne les listerai pas tous, mais une petite sélection que j'affectionne : 

1) L'outil du géant Google : PageSpeed

L'outil vous attribue une notre sur 100, et vous donne des pistes d'optimisation classées par criticité

De plus, une extension pour Firefox est disponible, elle nécessite l'installation d'une autre extension "must-have" : Firebug.

2) Pingdom

Ergonomique et visuellement très "eye-candy", il n'est pas en reste sur les détails, permettant ainsi de connaitre les temps des différentes phases (connect / wait / download / ...) pour chaque élément de la page.

3) WebpageTest

Un peu moins sexy que Pingdom, mais il a l'avantage de proposer une sélection de points de mesures géographiquement différents ainsi que plusieurs types de navigateurs

4) GTMetrix

Rien de spécial concernant celui-ci, si ce n'est qu'il permet en réalité de comparer 2 autres outils que sont PageSpeed (présenté plus haut) et YSlow, l'outil de Yahoo.

Une fois tous ces résultats en tête, vous pouvez passer à la phase d'optimisation

Optimisation time!

Pour illustrer quelques pistes, je vais prendre l'exemple d'un de mes sites sous Joomla et qui est parti d'un score de 62/100 selon PageSpeed, ce qui est très moyen.

Activer la compression (Gzip via Dflate)

Parfois dans la configuration du site (section administrateur de Joomla) l'activation de la compression Gzip ne suffit pas à l'activer réellement (c'était mon cas).

Si vous êtes sou Apache2, vous pouvez simplement copier les lignes suivantes dans votre fichier .htaccess  :

# ACTIVER GZIP
# MOD_DEFLATE COMPRESSION
SetOutputFilter DEFLATE
AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/x-javascript application/x-httpd-php
#Pour les navigateurs incompatibles
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
#ne pas mettre en cache si ces fichiers le sont déjà
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip
#les proxies doivent donner le bon contenu
Header append Vary User-Agent env=!dont-vary

Rien qu'avec cette manip, le site est passé à un score de 74/100. Plutôt pas mal mais allons plus loin.

Expire Header

Le Expire Header va indiquer que certains objets peuvent rester en cache, évitant ainsi de les recharger systématiquement ce qui limitera les requêtes sur le serveur

Rajoutez le bloc suivant toujours dans votre .htaccess :

# BEGIN Expire headers
<IfModule mod_expires.c>
 ExpiresActive On
 ExpiresDefault "access plus 7200 seconds"
 ExpiresByType image/jpg "access plus 2592000 seconds"
 ExpiresByType image/jpeg "access plus 2592000 seconds"
 ExpiresByType image/png "access plus 2592000 seconds"
 ExpiresByType image/gif "access plus 2592000 seconds"
 AddType image/x-icon .ico
 ExpiresByType image/ico "access plus 2592000 seconds"
 ExpiresByType image/icon "access plus 2592000 seconds"
 ExpiresByType image/x-icon "access plus 2592000 seconds"
 ExpiresByType text/css "access plus 2592000 seconds"
 ExpiresByType text/javascript "access plus 2592000 seconds"
 ExpiresByType text/html "access plus 7200 seconds"
 ExpiresByType application/xhtml+xml "access plus 7200 seconds"
 ExpiresByType application/javascript A259200
 ExpiresByType application/x-javascript "access plus 2592000 seconds"
 ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
</IfModule>
# END Expire headers

2592000 secondes, soit 30 jours.

Cache Control

Le Cache Control vient en complément du Expire Header, puisqu'il permet d'optimiser la gestion du cache en fonction des types de fichiers.

Section correspondante à rajouter dans votre .htaccess :

# BEGIN Cache-Control Headers
<IfModule mod_headers.c>
 <FilesMatch "\\.(ico|jpe?g|png|gif|swf|css|gz)$">
 Header set Cache-Control "max-age=2592000, public"
 </FilesMatch>
 <FilesMatch "\\.(js)$">
 Header set Cache-Control "max-age=2592000, private"
 </FilesMatch>
<filesMatch "\\.(html|htm)$">
 Header set Cache-Control "max-age=7200, public"
</filesMatch>
# Disable caching for scripts and other dynamic files
<FilesMatch "\.(pl|php|cgi|spl|scgi|fcgi)$">
Header unset Cache-Control
</FilesMatch>
</IfModule>
# END Cache-Control Headers

La combinaison de ces 2 options m'a permis d'obtenir un score de 85/100

Pour le reste, un peu de conversion/redimensionnement d'images (adieu les png, adieu les redimensionnements dynamique) et on chatouille les 90/100