04
Accélérer et optimiser le chargement de son site internet
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 ):
a2enmod deflate
Il faut rajouter à la fin de votre fichier de configuration principal d’Apache (/etc/apache2/apache2.conf par exemple) cette portion :
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-httpd-fastphp
AddOutputFilterByType DEFLATE application/x-httpd-eruby
AddOutputFilterByType DEFLATE text/html
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
# Don't compress images
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|zip|rar|flv|pdf|wmv)$ no-gzip dont-vary
# Make sure proxies don't deliver the wrong content
Header append Vary User-Agent env=!dont-vary
Header unset ETag
FileETag None
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é :
background-image:url();
background-color: #ffffff;
padding-left:5px;
padding-right:5px;
padding-top:5px
padding-bottom:5px;
}
Niveau écriture ce n’est pas ce que l’on fait de mieux, voici ce que l’on peut écrire :
background: url() #fff;
padding:5px;
}
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.
Accélérer et optimiser le chargement de son site internet…
Nous allons vous prodiguer quelques conseils pour vous aider à optimiser le chargement de votre site internet mais aussi faire des économies de bande passante…
Posté le 5 mai 2009 à 11:49Retrouvez cet article sur Blogasty …
Vous aimez cet article? Votez pour lui sur Blogasty …
Posté le 5 mai 2009 à 11:50