Blog des Webmasters et Bloggueurs

Nous allons vous prodiguer quelques conseils pour vous aider à optimiser le chargement de votre site internet mais aussi faire des économies de bande passante

1. Activer le Mod_Deflate pour Apache 2

Vous avez un serveur dédié ou virtuel pour votre site internet et on vous limite la bande passante ? voici un petit module qui vous permettra de servir un peu plus de visiteurs au détriment de consommer un peu plus de processeur

Le module mod_deflate est le remplaçant de mod_gzip sorti avec Apache 1.3.

Petit tutorial pour l’installer et l’activer (valable pour Debian et Ubuntu ):

Il faut rajouter à la fin de votre fichier de configuration principal d’Apache (/etc/apache2/apache2.conf par exemple) cette portion :

C’est cette portion de code qui contrôle tout, on demande de ne pas compresser ce qui est images, archives zip ou bien encore vidéos au format flv
A noter également qu’on demande à Apache de ne pas envoyer d’Etag, ceux-ci sont inutiles et vous évite de consommer de la bande passante pour rien (les échanges clients / serveurs consomment de la bande passante, il ne faut pas l’oublier)

Il ne faut pas oublier de recharger la configuration de votre serveur par la commande suivante :

Sur Forum-Webmaster, cela nous permet d’économiser 78 Ko environ sur la page d’accueil.
Avec des pages non compressées : 89.06 Ko; Avec compression : 11.86 Ko, ce qui est énorme !

En utilisant cette technique vous accélérerez la navigation pour les utilisateurs du 56k et des clés 3G et en plus vous consommerez moins de bande passante donc vous pourrez accueillir plus de visiteurs en simultané ou bien ne plus vous faire limiter par votre hébergeur.

Si vous ne disposez pas d’un serveur et que vous êtes sur un hébergement mutualisé alors il faut compresser vos fichiers CSS et vos scripts Javascripts, vous n’économiserez pas autant qu’avec le mod_deflate (celui-ci compresse aussi la source HTML) mais cela vous permettra d’accueillir un peu plus de visiteurs qu’en temps normal (même une petite optimisation peut vous faire gagner quelque chose)

2. Optimisez vos fichiers CSS

L’optimisation de fichiers CSS ça existe aussi !

Exemple de code non optimisé :

Niveau écriture ce n’est pas ce que l’on fait de mieux, voici ce que l’on peut écrire :

Notre ancien code tenait sur 6 lignes, celui là tient sur 2 lignes, je vous laisse calculer l’économie réalisée. Cette économie se traduit aussi sur la vitesse d’affichage car le navigateur aura moins de lignes à lire et affichera donc plus rapidement votre page (bien sur c’est invisible pour l’utilisateur …) mais en gros il est strictement inutile d’alourdir vos fichiers CSS, mais cela est valable pour tous vos fichiers, même votre source HTML.

L’outil vous permettant d’optimiser quelque peu vos CSS : Clean CSS

3. Découpez correctement vos designs

Ca se voit assez régulièrement … il est inutile d’utiliser une image en background d’un calque pour représenter une seule couleur, il faut utiliser la propriété background qui vous permettra de mettre une couleur à votre calque. Il est donc important de découper intelligemment vos designs pour n’intégrer que LES IMAGES NECESSAIRES

A noter qu’une image se charge en principe dans le cache du navigateur de l’internaute, sauf si vous avez fait le nécessaire pour éviter ce comportement donc ce n’est pas une grosse perte en soit d’envoyer des images inutilement sauf que cela vous pénalise sur votre bande passante … vous pourriez accueillir plus de visiteurs

4. Utilisez le cache du navigateur

Il est fortement déconseillé d’éviter de mettre en cache les pages, vous perdez en tout. Vous faîtes retélécharger les images, CSS qui sont déjà stockées dans la mémoire de l’ordinateur du visiteur, le navigateur ne recharge que le strict nécessaire : le code HTML, on économise en bande passante une nouvelle fois et en rapidité d’affichage par le fait qu’il ne soit pas nécessaire de tout retélécharger.

Je vous souhaite une bonne optimisation de votre site internet en tout cas le sujet n’est pas clos et fera très certainement l’objet d’une suite dans un prochain billet mais sachez qu’optimiser, c’est gagner de l’argent, des visiteurs et économiser.