Optimiser son site web
Amazon indique que si le temps de chargement de la page augmente de 0,1 seconde, les ventes chutent de 1%. Vous qui n’avez pas optimisé votre site, IMAGINEZ CE QUE VOUS PERDEZ !
Pour une fois, arrêtez de vous demander si vous transformerez mieux en utilisant un bouton rouge pâle ou orange foncé, lancez-vous plutôt dans l’optimisation technique de votre site !
Voici une check-list simple ainsi que des explications pour optimiser votre site :
1. RÉDUIRE LE NOMBRE DE FICHIERS
- Limiter le nombre de fichiers CSS et JS : il est possible de regrouper les fichiers CSS ou JS en un seul.
- Regrouper les images – Sprite : il s’agit ici de regrouper les images qui sont fréquemment utiliseés dans le site en une seule. Cette technique s’appelle « Sprite ». En revanche, il faudra, via une feuille de style, afficher l’image en background et la positionner.
2. RÉDUIRE LA TAILLE DES FICHIERS
- Réduire la taille des images : il est préférable de réduire la taille des images ou d’utiliser des mécanismes automatiques de mise à l’échelle. Des outils en ligne permettent de compresser un peu plus vos images sans détériorer la qualité (par exemple www.smushit.com).
- Limiter le poids des fichiers – Compression Gzip : les fichiers Html, Css et Javascript sont des fichiers texte. Ils sont donc particulièrement adaptés à une compression ZIP importante. Le temps nécessaire à cette décompression est négligeable pour le visiteur.
- Limiter le poids des fichiers – Minimify : une autre possibilité pour limiter le poids de vos fichiers CSS et JavaScript est de les minimiser. La minimisation supprime les retours à la ligne, les tabulations ainsi que les commentaires. La plupart des bibliothèques Javascript sont disponibles en version « minimisée ».
3. … ET NE RIEN ENVOYER DU TOUT !
- Date d’expiration d’une ressource : il existe, pour le serveur Apache, le mod_expire. Il ajoute un en‐tête HTTP «Expires» qui indique la date d’expiration d’une ressource au navigateur. Tant que cette date n’est pas atteinte, le navigateur utilisera directement les données qu’il a en cache. Il n’y a donc plus aucun temps d’attente. La stratégie la plus efficace est donc de mettre une durée de vie illimitée et de renommer la ressource lorsqu’elle est modifiée.
- Gestion Etag : Par défaut, la balise HTTP ETag (entity tag) est activée, elle permet de ne pas télécharger 2 fois les mêmes fichiers. Chaque ressource statique (image, Css, Js…) possède un identifiant unique pour une date de modification donnée. Ainsi, lors d’un second chargement de la page, le navigateur enverra l’ETag au serveur qui répondra soit par un code 302 Found (trouvé donc non modifié) soit par un 200 OK (envoi du fichier). Ce système n’évite pas les allers‐retours client‐serveur mais il évite de renvoyer le contenu des fichiers, donc réduit la consommation de bande passante ainsi que les traitements effectués par le serveur.
ATTENTION : Si vous avez une architecture avec plusieurs serveurs, vous devez utiliser cette option avec précaution. Dans ce cas, l’Etag est différent pour chaque serveur. Il est possible que cette balise augmente la bande passante plutôt que la réduise. C’est pourquoi certains outils de mesures vous conseillent de la désactiver.
