Par Worm

1) Introduction

Bonjour

Il existe plusieurs bonnes raisons d'optimiser le temps de chargement des pages de votre site.

Si votre site se charge trop lentement, la majorité des visiteurs ferment celui-ci sans avoir consulté son contenu... La fluidité de la navigation est tout aussi importante.

De plus, si votre site est hébergé sur un hébergeur limitant la bande passante utilisée, il est bon d'optimiser le poids de vos pages et de vos images.

Cependant, la compression augmente la charge du processeur, donc cela peut augmenter l'affichage de vos pages si la machine sur laquelle est hébergée votre site n'est pas très puissante.

1.1) La bande passante

Dans le domaine de l'informatique, la bande passante indique - par abus de langage - un débit d'informations. Le terme exact est le débit binaire.

L'origine du terme est une analogie avec la bande passante en électronique. La bande passante d'un cable mesurant le nombre maximal d'oscillations par seconde qu'un signal peut y prendre sans être trop atténué, si le signal est celui d'une liaison informatique comme une liaison série, le nombre d'oscillations va refléter le nombre d'informations que l'on peut transférer durant une seconde.

La bande passante peut concerner le débit d'un périphérique (tel qu'une mémoire, un disque dur, etc.) ou d'un medium de communication (réseau, bus, etc.) ou de manière générale n'importe quel débit d'information comme entre le processeur et la mémoire cache.

On mesure généralement cette bande passante en octets (byte en anglais) par seconde (o/s, ou en Anglais « Byte per second », B/s) ou en bits par secondes (bit/s ou bps), plus généralement utilisée par les fournisseurs d'accès internet pour donner le débit maximum d'un abonnement.

Citation de http://fr.wikipedia.org/wiki/Bande_passante

2) Coder proprement

C'est la première chose à faire !
Si votre site est entièrement codé à l'aide de <table>, qui je vous rappele ne doivent en aucun cas servir à la mise en page, mais à la structuration de données tabulaires (comme une commande de produits, ou un relevé bancaire par exemple), il mettra plus de temps à se charger qu'un site utilisant CSS et XHTML.

Du fait que chaque requete consomme de la bande passante, essayez de limiter celles-ci en essayant de réduire le nombre d'éléments extérieurs à télécharger tels que les fichiers javascript, les images, etc...

Une petite astuce, pensez à mettre vos images d'arrière-plan grâce à la propriété CSS background-image plutôt qu'avec <img>. L'affichage du texte en sera plus rapide et les visiteurs pourront d'ores et déjà commencer à lire le contenu, pendant que les images se chargent.

Pensez qu'un seul fichier se charge plus rapidement que deux de la moitié de sa taille

3) Compression

3.1) Avec PHP

Si votre site utilise PHP, il existe une méthode de compression, permettant de compresser (GZIP) la page avant de l'envoyer au navigateur. Attention, ceci ne marche qu'avec les version de PHP supérieures ou égales à 4.0.2.

Il faut se servir de la fonction ob_start avec comme argument ob_gzhandler, avant toute sortie html, les entêtes étant envoyés avant le html. Quelques vérifications et le tour est joué

Puisqu'un exemple vaut mieux qu'un long discours :

<?php

// Si les entêtes ne sont pas envoyés, et que la compression n'a pas commencée

if (!headers_sent() && ob_get_length() == 0)

{

	// On vérifie la version de PHP

	if (ini_get('output_handler') == 'ob_gzhandler' || version_compare(PHP_VERSION, '4.2.0') == -1)

		$compression = false;

	// On compresse !

	else

		ob_start('ob_gzhandler');

}



// Si on a pas réussi à compresser, il faut quand même envoyer les headers

if ($compression == false)

	ob_start();

?>

html...

Cette compression permet de faire d'importants gains au niveau de la vitesse de chargement de vos pages

Attention Il peut survenir une erreur lorsque vous placez la compression après session_start()

3.2) Compresser le Javascript

Il est possible de compresser vos scripts javascript :
- soit à la main à l'aide de Notepad++, en supprimant toutes les indentations, les lignes et en enlevant le retour à la ligne

- soit à l'aide d'un outil comme Shrinksafe qui fait la même chose, mais renomme aussi les variables pour diminuer encore plus la taille du script.

4) Optimiser les images

Dans le cas d'images d'arrières-plans, il est préférable d'utiliser le format JPG qui est réputé pour être le plus optimisé pour le web. Si vous souhaitez utiliser des petites images, ou des images gérant la transparence, tournez vous vers le PNG qui est à préférer au GIF, celui-ci étant soumit à une license.

Si vous travailler avec vos Photoshop ou avec Gimp et que vous enregistrez vos images en qualité maximale, il arrive souvent qu'elles dépassent les 100ko

Les pages deviennent assez longue à charger en particulier pour les utilisateurs du 56K et ces images utilisent une grande partie de la bande passante.

Donc essayez d'optimiser ces images, en sélectionnant enregistrer pour le web sur photoshop par exemple, et essayer de régler la qualité de ces images d'une façon plus appropriée.

5) Conclusion

Pensez que plus vos pages se chargeront vite, plus les visiteurs apprécieront de visiter votre site, et vous réaliserez certainement quelques économies de bande passante au niveau de votre hébergeur