Blog des Webmasters et Bloggueurs

Mai 09
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 headers
a2enmod deflate

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

# Insert filter
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 :

/etc/init.d/apache2 reload

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é :

#exemple {
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 :

#exemple {
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.

2 commentaires pour “Accélérer et optimiser le chargement de son site internet”

  1. www.fuzz.fr dit :

    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…

     
  2. Liliandev sur Blogasty dit :

    Retrouvez cet article sur Blogasty …

    Vous aimez cet article? Votez pour lui sur Blogasty …

     

Laisser un commentaire




Votre statut : Invité
Vous devez être membre pour participer.
 
 
 
 
 
 
 
 
 
 
Let’s Encrypt : le certificat SSL gratuit
Tester votre site internet sur différents navigateurs
[WordPress] Des problèmes avec l’administration ?
Rappel : Mettez à jour vos CMS et vos sites E-commerce
Le .fr fête ses 25 années d’existence !
Mesurer votre audience en temps réel avec BubbleStat
Porter réclamation contre Google Panda ?
Zlio n’est plus …
 
 
 
 
 

Copyright (c) Devclic 2002 - 2019 - Tous droits réservés

creation site internet strasbourg