Les astuces pour optimiser la rapidité de chargement de votre blog / site web (partie 1)

Vous avez créé un blog et vous l'alimentez souvent ? C'est très bien ! Mais si, en plus de vos superbes articles, vous optimisez sa vitesse de chargement et vous personnalisez son design pour vos visiteurs, vous n'en ressortirez que gagnant !

Grâce aux optimisations que vous découvrirez dans cet article, vous fidéliserez les visiteurs ayant une connexion lente (ou qui téléchargent en même temps ) et vous encouragerez ceux qui visitent déjà votre blog à jeter un coup d'œil dans d'autres pages (Comme elles se chargent rapidement, pourquoi vont-ils se priver de sauter sur tout ce qui les intéresse chez vous ?).

Cet article est la première partie d'une série qui contiendra plusieurs conseils et astuces utiles pour d'améliorer la vitesse de chargement de vos pages. Je ne parlerai que des choses déjà expérimentée dans ce blog, afin de vous donner à chaque fois des chiffres intéressants adaptés aux blogs.

Exemple concret : l'optimisation de la rapidité de chargement de l'Espace d'Asher256 !

Cela faisait longtemps que j'y pensais... Finalement, j'ai mis la main dans le code source du template, le CSS et les images pour optimiser l'Espace d'Asher256 grâce aux astuces que vous découvrirez dans cet article !

L'état des lieux avant les différentes optimisations...

J'ai créé une page vide nommée "test" et je l'ai pesée avant de faire les optimisations, grâce à l'extension Firefox FireBug. La page faisait 324 Ko ! C'est énorme ! Cela veut dire que chaque page contient au minimum cette taille. Si je rajoutais des images, du texte, cela pouvait monter jusqu'à 400 ou 500 Ko dans certaines pages !

En plus de consommer inutilement de la bande passante, le fait de ne pas optimiser votre blog pourrait décourager vos visiteurs à aller plus loin. Attendre 1 à 2 minutes avant qu'une page se charge, on le sait tous, n'est pas une partie de plaisir !

Le résultat après l'optimisation du temps de chargement des pages du blog...

La même page vide, qui faisait 324 Ko avant, fait maintenant 72 Ko ! Presque 78% moins grosse et plus de 250 Ko  gagné !

En plus de la taille, grâce à une astuce Apache que vous verrez plus loin, le chargement se fera presque instantanément une fois que vos visiteurs visiteront plus d'une page.

Les outils gratuits pour diagnostiquer ce qui rend vos pages lourdes et lentes.

Utiliser Firefox et FireBug

Pour "peser" vos pages et savoir exactement quelles sont les choses qui prennent de la place, je vous recommande d'installer le navigateur web Firefox et l'extension FireBug.

Pour aller plus loin, je vous recommande également l'extension Y Slow pour FireBug. Cela dit, elle n'est pas une nécessité pour les astuces de cet article.

Utiliser un site Internet dédié à l'optimisation des pages

Il n'y a pas que Firefox pour diagnostiquer, mais aussi des sites comme cet outil de Pingdom.

Les Astuces pour Optimiser le temps de chargement de votre blog ou site web !

Procédez par élimination pour gagner des Ko !

Sachez avant toute chose qu'il vous faudra faire quelques sacrifices  afin de bien optimiser votre blog. Vous devez vous demander à chaque fois que vous regardez un Widget, une image, un texte, un Javascript : est-il vraiment indispensable ?

La première étape pour optimiser votre blog est finalement une procédure assez simple : procédez par élimination afin d'éliminer tout ce qui est lourd et futile. À chaque fois que vous éliminez quelque chose, pesez votre page une nouvelle fois pour découvrir le nombre d'octets / kilo-octets gagnés, grâce aux outils cités plus haut.

Nous allons découvrir plus bas quelques pistes (avec quelques chiffres à l'appui) afin que vous découvriez les choses à éliminer probablement !

Optimisez ou éliminez les Javascripts : Widgets, publicités, statistiques, etc.

Les codes Javascripts sont à la mode ces derniers temps, que ce soit pour les Widgets ou pour autre chose.

La majorité des blogs les utilisent pour les statistiques (Google Analytics, Wordpress Stats, etc.), pour l'échange de liens automatique (l'Autoroll de Criteo), pour les réseaux sociaux (Twitter, Facebook, MyBlogLog), pour gagner de l'argent avec leur site web (Google Adsense, AD42), etc.

Les codes Javascript, surtout ceux des Widgets, sont parfois être très gourmands ! Posez-vous la question à chaque fois que vous ajoutez un Widget : vaut-il vraiment le coup ? Est-il trop lourd ? Dans le cas de ce blog, j'ai pu gagner beaucoup de place en éliminant :

• AD42 : 11 Ko
• MyBlogLog : 154 Ko (Wow, j'ai été surpris par cette taille ! Je vais peut être le remettre si je trouve un moyen de diminuer ces 154 Ko)
• Criteo Autoroll : 17 Kb (je l'ai remis après avoir désactivé l'affichage des images dans ce dernier. C'est une sorte d'optimisation de Widget, basée sur le peu de contrôle qu'on a sur eux !)
• Paypal : 5 kb
• Twitter : 110 kb
• La vente de livres sur Amazon : 137 ko (pas mal !)

Désactivez quelques extensions de votre moteur de blog Wordpress, Dotclear, etc.

J'ai désactivé environ 5 extensions, qui m'ajoutaient des Javascript, des CSS, etc. inutilement (enfin... Inutilement car je n'utilisais ces extensions que dans 2 à 6 articles ou que j'avais une alternative pour les remplacer).

Je vous donne deux exemples :

• Wordpress Stats : 1 Ko (pas grand chose de gagné, mais j'utilise déjà Google Analytics, qui est plus lourd, 6 à 9 Ko, mais assez puissant en plus de regrouper les statistiques de tous mes sites web ! Wordpress Stats, même avec 1 Ko, est encombrant car il ajoute un Javascript à charger, donc des requêtes en plus)
• Plugin Sociable : 15 Ko (ce plugin consommait pas mal car il affichait des images contenant les logos de Digg, Scoopeo, Fuzz, Delicious, etc.)

Ne sous estimez pas les images !

Éliminez les images inutiles

Les pages de ce blog ont gagnées plus de 41 Ko uniquement grâce à l'élimination de certaines images, comme le gros Rejoignez nous sur Facebook (que je remettrais peut-être quand je l'optimiserai), la mini bannière du W3C, la mini bannière de la licence Creative Commons et bien d'autres images qui sont dans le CSS.

Conseils pour optimiser vos images afin qu'elles prennent moins de place...

Une fois que vous aurez éliminé l'inutile, il vous faudra optimiser l'indispensable !

Optez pour la simplicité. Sachez que les couleurs uniformes, sans dégradé, s'optimisent bien (comme celle du header qui m'a fait gagner dans les 10 Ko grâce à l'optimisation et l'élimination de quelques dégradés et détails).

Si votre image ne comporte pas beaucoup de couleurs, transformez la d'image RGB à image indexée en 32 couleurs ou 256 couleurs, selon votre convenance. Cela pourrait, dans certains cas, valoir son pesant d'or ^_^ .

N'oubliez pas aussi de faire des tests. Enregistrez votre image en jpeg, png et gif, puis regardez la taille de chacune. Certaines images se compressent bien en png et pas en gif. D'autres sont très petites en gif et beaucoup plus lourdes en png.

C'est la base pour gagner quelques octets, voir kilo-octets sur chaque images. Il existe d'autres méthodes que je ne citerai pas ici, mais qui sont disponibles un peu partout sur Internet.

Pour optimiser mes images, j'ai utilisé GIMP, le logiciel de retouches de photo avancé, libre et gratuit. Si vous raffolez des services en ligne, il est possible d'optimiser vos images grâce à Smush IT.

Les Avatars, Gravatars, Pavatars, etc. comptent aussi !

Une dernière chose. N'oubliez pas les avatars. En ce qui me concerne, j'ai pour l'instant gardé les Gravatars, mais sachez qu'il consomment chacun environ 2 Ko.

Si vous avez 50 commentaires différents dans un article à succès, cela peut commencer à chiffrer ! Dans un de mes articles très commentés, je suis passé de 432 kb à 233 kb en éliminant uniquement les Gravatars ! Cela donne matière à réfléchir !

Activer l'Expiration des fichiers dans Apache (htaccess)

Activer le module mod_expires dans Apache (le serveur HTTP le plus utilisé chez les hébergeurs) est aussi très important. Cela permettra à votre site de s'afficher instantanément une fois qu'il aura été visité plus d'une fois (ou une fois que le visiteur passera d'une page à une autre). Je vous invite à jeter un oeil sur la documentation (en anglais) d'Apache sur mod_expire.

Dans mon fichier .htaccess, disponible à la racine de mon blog (c'est à dire dans le répertoire /blog/), j'ai activé et personnalisé mod_expires avec :

<ifModule mod_expires.c>
ExpiresActive On
#ExpiresDefault "access plus 1 seconds"
#ExpiresByType text/html "access plus 1 seconds"
ExpiresByType image/gif "access plus 24 hours"
ExpiresByType image/jpeg "access plus 24 hours"
ExpiresByType image/png "access plus 24 hours"
ExpiresByType image/x-icon "access plus 24 hours"
ExpiresByType text/css "access plus 24 hours"
ExpiresByType text/javascript "access plus 24 hours"
ExpiresByType application/x-javascript "access plus 24 hours"
</ifModule>

Cela veut dire : ne téléchargez les images, CSS et Javascript que 24 heures après leur premier téléchargement. Il est possible de tout personnaliser, d'appliquer  cela aux autres fichiers, comme les fichiers html, avec les deux premiers commandes commentées. Je vous encourage à découvrir toutes les facettes de mod_expires dans la documentation d'Apache !

Conclusion

C'est déjà la fin de cette première partie ! Vous allez découvrir dans la deuxième partie qui paraitra prochainement dans ce blog la suite des aventures, qui vous permettrons de rendre votre blog plus rapide de l'éclair !

En attendant, n'hésitez pas à partager avec nous vos astuces et de nous rapporter vos résultats, si vous avez déjà commencé l'optimisation !