Optimiser le temps de chargement de son site web

Le temps de chargement d’une page web est un facteur qui depuis peu à une influence de le référencement d’un site internet. En effet, Google a indiqué qu’il prenait en compte le temps de chargement des pages dans ses critères de classement. Mais le temps de chargement d’une page a une influence encore plus importante sur l’expérience utilisateur. Qui n’a pas déjà pesté contre un site web dont la page mettait 20 secondes à charger (une éternité !).
Je vous propose de voir quelques aspects techniques qui vous permettront d’accélérer le chargement de vos pages.

Les outils.

Tout d’abord, avant d’agir il faut savoir sur quoi agir.
Voici donc quelques sites internet qui vous donneront un aperçu de la tache à accomplir.
http://www.site-perf.com/
http://gtmetrix.com
http://www.webpagetest.org/

Pour infos, Google donne aussi une indication sur le temps de chargement de vos sites. Dans votre compte Google « Outils pour webmaster », rendez-vous dans le menu « Labo » puis « Performance de site ». Cette information n’est pas forcément à jour et ne donne quasiment aucun détail.

Les images

C’est sans doute le facteur le plus important. Les images peuvent avoir un poids important (en Ko). Donc, il convient de les optimiser pour votre site internet. Il faut pour cela :
Les dimensionner à la taille où elles doivent s’afficher à l’écran,
Avoir un format fait pour le web : le JPEG et le PNG si on veut des effets de transparence.

Vous pouvez utiliser des outils de retouche photos comme Photoshop ou The Gimp voire même PhotoFiltre Free pour un travail simple.
Le site web Yahoo Smush.it™ vous permettra également de gagner quelques Ko.

Enfin maintenant, le CSS3 permet de donner des effets visuels sans avoir à utiliser des images. Cela est très utile pour la mise en page des sites web. On pense notamment aux boutons à bords arrondis (border-radius) ou avec des effets d’ombre (box-shadow). Vous pourrez vous rendre sur le site Alsacréation pour plus d’infos quant à leurs utilisations.
Attention tous les navigateurs ne comprennent pas ces instructions et il faut parfois savamment ruser pour obtenir les mêmes effets sur les navigateurs anciens (comme internet Explorer 6, 7 et 8).

La feuille de style CSS

La feuille de style, fichier .css, donne l’aspect visuel à votre site internet. Pour la rendre moins lourde à charger, vous pouvez supprimer tous les caractères inutiles comme les commentaires, les retours à la ligne et les tabulations. En faisant ceci pour pourrez facilement gagner 20 à 30 % du poids.
Avec NotePad++, rendez-vous dans « Edition » et le menu « Blank Opération ».

Attention après cette opération, votre code sera quasiment illisible ; grader donc une copie commentée de ce denier.

Un autre facteur important est l’appel à d’autre feuille de styles. Ces appels sont notés :
@import url(feuille-annexe.css);

Exemple issu d’une feuille de style Morphogenesis pour Xoops

@import url(reset.css); /* reset css for web browsers*/
@import url(baradmin.css); /* administration access in footer */
@import url(globalnav.css); /* horizontal menu in header */
@import url(homepage.css); /* style for specific content in mainpage */
@import url(blocks.css); /* style for blocks */
@import url(content.css); /* style for content */
@import url(module.css); /* style for content menu */
@import url(content-data.css); /* style for files include in header or bottom page content */
@import url(socialbookmark.css); /* style for socialbookmark in end content zone */
@import url(blockfooter.css); /* style for blocks in footer */
@import url(forms.css); /* style for forms */
@import url(extras.css); /* extras style for perzonalisation templates */
@import url(iconize.css); /* style for icone in specific link */
@import url(tplsystem.css); /* style for templates system : siteclosed, redirection, debug mode, core messages, … */
/* insert specific font */
@font-face { font-family: BakerSignet BT; font-style:  normal; font-weight: normal; src: url(../fonts/BAKERSI3.eot);}

On voit ici que la feuille de style principale appelle 14 feuilles de styles annexes. Cela est pratique quand on veut travailler et modifier l’aspect de son site mais en production ceci a pour effet d’obliger le serveur à donner plusieurs fichiers.
Vous aurez tout intérêt à récupérer tout ces styles et à les incorporer dans votre feuille de style première : vous n’aurez plus ainsi qu’un seul fichier à télécharger et non pas plusieurs.

N’hésitez pas non plus à supprimer tous les ordres CSS qui ne vous sont pas utiles.

Les scripts

Les scripts permettent de donner un aspect visuel à votre site web comme les slideShow ou diaporama. Il faut cependant en user avec modération.
Tout comme les feuilles de style vous aurez intérêt à compresser vos scripts.
Plusieurs sites web, vous permettent de le faire en ligne, mais vous pourrez vous rendre sur celui-ci qui est simple et efficace :
http://javascriptcompressor.com/

D’autres optimisations

Ce que nous venons de voir est vraiment la base pour rendre votre site plus rapide. Vous pouvez également activer la compression Gzip si votre serveur le permet, gérer le cache de vos pages web…

Conclusion

Naturellement, tous ceci pourra vous permettre de gagner de précieuses millisecondes, mais rien ne sera plus utile qu’un hébergement de qualité : un bon serveur mutualisé, ou un serveur virtuel ou dédié pour les sites web ayant un trafic conséquent.