Le weblog de Vanaryon

Vous avez réalisé un site tout beau, tout propre, mais le seul problème c'est qu'il est lourd, lent à l'accès, et votre serveur tient très mal la charge si vous recevez de nombreuses visites. Voyons comment améliorer tout ça, avec 6 règles d'or si simples, que, même votre grand-mère qui ne connait rien à l'informatique pourrait les appliquer (enfin, presque...) !

Commençons par installer l'extension Firebug sur Mozilla Firefox. Une fois ceci en place, ajoutez l'extension YSlow qui vous fera un joli compte rendu des performances de votre site et de ce qui ne va pas. Redémarrez votre navigateur, puis rendez-vous sur votre site à optimiser. Lancez Firebug en allant dans Affichage/Firebug, puis, ceci fait, cliquez sur l'onglet YSlow et lancez le test. Si vous avez déjà le grade B ou A, ce tutoriel ne vous servira à rien, c'est que vos pages sont déjà bien rapides. Cependant, il y a peut-être quelques détails qui vous ont échappés et que vous pourrez retrouver ci-dessous ! Dans le cas contraire, c'est à dire un grade supérieur ou égal à C, ça urge de faire quelque-chose !

1. Activez la compression GZip

À chaque fois que votre serveur web doit servir des éléments contenant du texte (vous pensez tout de suite aux fichiers HTML, mais il y en a bien d'autres comme les CSS, les JS ou encore les XML), il envoie ce texte directement, sans traitement, sans réduire leur taille.

Ainsi, un fichier HTML pesant, prenons, 50Kio sera envoyé directement au visiteur. 50Kio, avec le bas débit, c'est à peu près 10 secondes de chargement. Sans compter tous les éléments additionnels comme les images. Mais une solution à cela existe, une solution qui va vous permettre de diviser par 5 (en général), la taille de tout fichier texte.

Prenons l'exemple de mon weblog, la feuille de style CSS pèse 10Kio sans compression GZip, alors que lorsque celle-ci est appliquée, son poids descend à 2Kio ! Magnifique non ?

La solution ultime pour activer GZip simplement est d'avoir un hébergement sur un serveur Apache prenant en charge les fichiers htaccess. Si vous utilisez Lighttpd, il va falloir modifier le fichier de configuration. Bon, prenons le cas du serveur Apache, il vous suffira de créer un fichier nommé .htaccess à la racine de votre espace web (attention, le point au début est très important !).

Ajoutez ce code dans votre fichier .htaccess :

# BEGIN Compression
<IfModule mod_deflate.c>
<FilesMatch "\.(js|css|php|svg|html|htm|txt|xml)$">
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>
# END Compression

Et c'est tout ! Enregistrez, puis testez avec l'outil réseau de Firebug que vos fichiers texte sont bien compressés (un header Content-Encoding: gzip sera envoyé par fichier compressé). Si cela ne fonctionne pas, essayez avec l'autre module de compression de Apache nommé mod_gzip (ici nous avons utilisé le mod_deflate, qui fait à peu près la même chose).

2. Diminuez la taille de vos images

Le principal problème des sites modernes est qu'ils contiennent un nombre impressionnant d'images, certaines plus ou moins lourdes. Ici nous allons voir comment réduire la taille de nos images, quelles soient en JPG, en PNG ou en GIF.

YSlow possède un sous-menu nommé Tools. Cliquez dessus lorsque vous êtes sur une page de votre site. Puis cliquez sur All Smush.it, le lien va envoyer vos images à Smush.it, un outil de compression d'images sans perte en ligne. Ceci fait, vous n'aurez plus qu'à récupérer l'archive contenant toutes vos images compressées ! Sympa non ?

Si vous souhaitez, par la suite, compresser petit à petit vos images PNG lorsque vous écrivez, par exemple, un article pour votre blog, vous pouvez installer le programme OptiPNG (aide ici pour Linux), qui se lance et s'utilise en ligne de commande. Qui veut dire ligne de commande ne veut pas dire compliqué ! Voici, pas à pas, comment installer, lancer puis compresser une image avec OptiPNG :

1. Installez OptiPNG, sur Ubuntu en cliquant directement sur ce lien ;
2. Ouvrez un terminal (Applications/Accessoires/Terminal sous Gnome) ;
3. Allez au répertoire contenant votre image en tapant cd /chemin/ (exemple cd /home/vanaryon/Bureau/) ;
4. Tapez la commande optipng -o7 votrefichier.png ;
5. Patientez (ça peut être long si les dimensions de votre image sont grandes) ;
6. Et admirez le résultat ! OptiPNG vous donnera le pourcentage de la réduction de la taille de votre image.

Et voilà, avec OptiPNG, vos PNG peuvent perdre jusqu'à 70% de leur poids d'avant, et cela sans aucune perte de qualité ! Impressionant non ?

3. Minifiez vos JavaScript

Marre de voir des fichiers JavaScript énormes squatter votre site, malgré le fait que vous les trouvez géniaux et donc indispensables ? En "minifiant" vos JavaScript, vous les ferez perdre jusqu'à 50% de leur poid total d'avant, et un fichier "minifié" avec GZip sera encore plus petit (de 30% environ) que le même sans "minification" avec GZip !

Rendez-vous sur le site du "minifieur" YUI Compressor Online, puis envoyez-lui le fichier JS à traiter. Ne changez rien aux paramètres par défaut, c'est très bien comme ça. Le site vous donnera alors le résultat que vous n'aurez qu'à télécharger, et à appliquer sur votre site.

Notez qu'avant d'envoyer vos JavaScript à "minifier", il serait bien de regrouper, si vous avez plusieurs JS séparés, le tout dans un seul gros fichier JS. Ça réduira le nombre de requêtes HTTP de votre site !

4. Appliquez une Favicon et un fichier Robots

De plus en plus de sites utilisent des CMS, comme Wordpress, Dotclear, SPIP, etc. Et sur des serveurs Apache, une requête provoquant une erreur 404 va demander au serveur de générer une page 404 personnalisée, qui va, dans certains cas (je pense particulièrement à Wordpress), induire à de multiples requêtes SQL et à une utilisation du moteur PHP, ce qui va provoquer une charge serveur inutile.

Oui mais vous devez vous demander, pourquoi ajouter une favicon à la racine de mon site et un fichier robots.txt ? Si je n'ai donné de lien pointant vers eux nulle part, alors pourquoi ils provoqueraient des erreurs 404 ? Tout simplement parce-que les navigateurs modernes et les robots d'indexation comme Google-Bot requêtent automatiquement ces deux fichiers à la racine de votre site, sans "réfléchir", parce-qu'ils sont standards à tous les sites.

Alors appliquez ces deux fichiers (même s'ils sont vides parce-que vous n'en avez pas besoin), et votre serveur sera un peu plus soulagé ! Cependant, si vos pages d'erreur 404 ne sont pas générées par un système quelconque et que ce sont les pages 404 classiques de votre serveur web qui sont envoyées, alors cette astuce ne sert pas à grand chose !

5. Regroupez vos images dans un sprite

Outre la taille totale de votre site, il y a aussi le nombre de requêtes HTTP qui importe ! Vu que ce sont souvent les images à charger qui provoquent la plus grande charge à ce niveau là, la solution ultime est de regrouper toutes vos images d'un même format (PNG et GIF dans un sprite en PNG et les JPG dans un sprite JPG).

Bon, la technique est, au début, assez difficile à assimiler, mais une fois qu'on la maîtrise, on ne s'en passe plus ! Tout d'abord, sachez que vos images appelées par du code HTML seront maintenant appelées par du code CSS, depuis un background.

Inutile de faire du blabla superflu, un site propose de créer des sprites automatiquement et sans aucune connaissance avancée ! Il vous donne toutes les étapes pour appliquer le sprite généré, très simplement.

Avant d'envoyer votre archive contenant toutes les images séparées, cochez la case Compresser l'image avec OptiPNG, le serveur vous compressera donc votre image finale avec le fameux outil cité plus haut. Ensuite, appliquez le code CSS donné. Cependant, je vous conseille de définir un background par classe CSS définissant une image, ça marchera toujours, alors que lorsque vous appliquez la méthode donnée par le générateur, c'est moins fiable (appliquer une classe parente avec le background et les classes enfants avec chaque image).

6. Installez un plugin de cache sur Wordpress

Si vous utilisez Wordpress, système de publication de contenu sous forme de blog, et que vous recevez de très (trop ?) nombreuses visites qui ralentissent votre serveur, la solution ultime est d'installer un plugin de cache.

Mais qu'est-ce que le cache ? C'est un système qui, au lieu de générer à chaque fois la page à servir aux visiteurs, va la mettre en cache dans un fichier statique pour servir le fichier généré et éviter tout le lourd processus de génération (requêtes SQL, moteur PHP).

Installez donc WP-SuperCache, le meilleur plugin du moment pour optimiser son Wordpress (sur les serveurs Apache seulement). Ceci fait, paramétrons-le. Tout est assisté, laissez-vous guider. Cependant, il reste quelques options à modifier, comme le temps d'expiration que vous pouvez régler à plus longtemps, comme 31536000 secondes (1 an), et activer la compression de vos pages.

Ceci fait, allez sur votre blog, puis affichez le code source de la page. Si, tout en bas, vous voyez un code ressemblant à ceci :

<!-- Dynamic page generated in 0.219 seconds. -->
<!-- Cached page generated by WP-Super-Cache on 2009-11-07 13:20:32 -->

C'est que votre plugin est actif. Dans le cas contraire, essayez de fouiller sur les forums pour chercher la "faille" !

Et voilà, après ça, repassez le test de YSlow et vérifiez le nouveau grade que l'outil vous donne. C'est pas déjà mieux ?