Optimisation du temps de chargement d’un site internet

powered by WordPress Multibox Plugin v1.3.5

Lors de la réalisation d’un site internet les étapes sont nombreuses pour arriver à attirer des visiteurs mais quand le visiteur vous trouve il faut savoir le retenir.
Un beau site fonctionnel et ergonomique avec une offre produits bien construite c’est indispensable mais si celui-ci mais des plombes a s’afficher le gentil visiteur aura vite fait de passer à la concurrence et voir son taux de rebond grimper en flèche. Et oui l’internaute n’aime pas attendre.

Pourtant il existe quelques petits trucs pour diminuer considérablement le temps de chargement de votre site internet sans trop d’effort.
Optimisation des images

Sans conteste les images sont les éléments les plus lourds d’un site internet. Le poids des images utilisée dans la création d’un site internet et dans ses contenus est encore souvent négligé, alors qu’il est très simple de réduire leur poids sans rien sacrifier à leur qualité. On peut facilement influer sur le taux de compression d’un fichier jpeg sans dégrader son rendu et ainsi réduire son poids de façon importante.

powered by WordPress Multibox Plugin v1.3.5

Fichier JPEG 300px x 400px traité sous The GIMP qualité d'exportation 100% -> 57,3 Ko

powered by WordPress Multibox Plugin v1.3.5

Même image Fichier JPEG 300px x 400px traité sous The GIMP qualité d'exportation 70% -> 12,5 Ko

Dans cette exemple on peut voir qu’il est très simple de réduire la taille d’un fichier jpeg sans influer sur son rendu. Si on multiplie cette optimisation à chaque élément graphique du site le gain sera forcement au rendez-vous.
Dans une réalisation récente l’optimisation des fichiers graphiques de l’interface du site a fait passer le volume de données de 560 Ko à 98 Ko sans trop forcer sur le taux de compression. Il faut noter que ces Ko économisés feront plaisir à votre bande passante et a votre limite de trafic si vous y êtes soumis. Les jpeg ne sont pas les seuls fichiers graphiques a pouvoir être optimiser ainsi les fichiers PNG peuvent l’être également mais pas directement grâce à votre logiciel d’imagerie comme Photoshop ou The Gimp . Cette optimisation étant un peu particulière, elle fera l’objet d’une note dédiée.
Concernant les fichiers GIF, l’optimisation consiste essentiellement a réduire la palette du fichier au nombre de couleurs utilisées par l’image. Ça ne sert a rien d’enregistrer l’image d’un bouton qui comporte 16 couleurs en 256 couleurs.

Limiter le nombre de requêtes sur le serveur

Plus le navigateur du visiteur du site aura de fichiers a télécharger plus il y aura de requêtes a effectuer sur votre serveur. Chaque requête étant soumise a un délai de latence plus ou moins long, l’idée est de ne pas multiplier les requêtes quand celle-ci ne sont pas nécessaires.

Exemple : Sur votre site vous utilisez des feuilles de styles pour la mise en forme générale, pour les menus, etc.
Trois d’entre elles sont utilisées sur quasiment toutes les pages du site.  Rien ne vous empêche de les regrouper dans un seul et même fichier. Au lieu d’avoir 3 requêtes vous n’avez plus qu’une requête pour le même résultat et le même volume de données (Observation perso: pas tout a fait juste car le fichier aura même tendance a être plus petit que la somme des trois fichiers initiaux).Pareil pour vos scripts Javascript qui ont tendances a se multiplier.

Donc pour résumer: A volume de données égale, moins de requête = moins de latence au téléchargement = chargement plus rapide

Minimiser la tailles de vos feuilles de style et vos scripts

En phase de développement, on aime bien avoir des javascripts ou des feuilles de style bien aérés et bien commenté et c’est normal mais voila chaque caractère c’est un octet en plus pour nos fichiers JS ou CSS . Avant de passer en production, utiliser un outils pour « virer » les caractères inutiles (retour à la ligne, tabulation, commentaires) de vos fichiers et c’est quelques Ko a plusieurs dizaines d’économisés.

Une petite recherche sur Google et vous trouverez votre vie ou du moins plein de soft pour vous aider dans cette tâche.

Activer la compression de données sur votre site

Au delà des optimisations propre au site, il est nécessaire de se pencher sur le comportement du serveur web.
La première des choses est d’activer la compression des données émises par le serveur. Ça prend 5 minutes et c’est plus qu’efficace. Il n’est pas nécessaire de tout compresser car certains types de fichiers le sont déjà comme les jpeg.

Comment faire ?

Il suffit d’ajouter dans le fichier .htaccess le code suivant :

AddOutputFilterByType DEFLATE text/ico text/html text/plain text/xml text/css application/javascript application/x-javascript application/x-httpd-php application/rss+xml application/atom_xml text/javascript

Traduction on indique a notre serveur qu’il faut compresser les fichier html, ico, xml, css, javascript.

Et c’est tout ? Oui, du moins si votre serveur est paramétré correctement et dispose des extensions nécessaires sinon c’est l’erreur 500 assurée.

Si vous êtes en hébergement mutualisé, rapproché vous de votre hébergeur pour savoir si il est possible d’activer le mode deflate ou gzip.  Si ce n’est pas possible il serait intéressant de changer de prestataire.

Si vous êtes en dédié voici la procédure d’installation pour Ubuntu et Apache 2.

Ouvrez un terminal ou via ssh:
sudo a2enmod headers
sudo a2enmod deflate

sudo /etc/init.d/apache2 restart

Et voilou !

Activation du cache navigateur

Encore un truc très simple à mettre en place car on va encore utiliser le fichier .htaccess de la racine du site et lui ajouter le code suivant:

<FilesMatch « \.(jpg|jpeg|png|gif|swf|js|css|png|ico)$ »>
Header set Cache-Control « max-age=604800, public »
</FilesMatch>

A vous d’adapter en fonction de vos besoins sachant que la valeur max-age est exprimée en secondes.

Il n’y a pas d’impact sur le temps de chargement de la première page mais dès la deuxième page vue tout les éléments déjà chargés une fois seront lus depuis le cache du navigateur diminuant d’autant le nombre de requêtes et le volume de données transmises rendant l’affichage des pages instantané lors de la navigation du visiteur.

Conclusion

Une conclusion en forme de relevé de temps de chargement sur l’un de mes projets en cours. Afin de rendre les écarts de temps significatifs les relevés ont été effectués depuis la ligne ADSL de mon domicile perdu au fin fond du Morvan plafonnant à un joli petit 1024 kb/s. Les temps indiqués sont une moyenne sur 10 relevés sous Page Speed.

Temps de chargement hors optimisation: 7,65 secondes

Temps de chargement  après optimisation des images, diminution du nombre des requêtes, optimisation des CSS et JS : 3,25 secondes

Temps de chargement après activation de la compression gzip : 2,31 secondes

Temps de chargement après activation du cache navigateur: 2,29 secondes puis 0,32 secondes pour les pages suivantes.

Ces relevés parlent d’eux même. Ces optimisations permettent un gain en vitesse de chargement non négligeable rendant la navigation et le chargement des pages instantané au delà de la première page.

Laisser un commentaire