Introduction

Chrono Afin d'accélérer la navigation sur ce blog, j'ai décider de chercher des éléments à optimiser.

Et je suis tombé sur l'article Guide d'optimisation des blogs Dotclear 2 chez Tout le bonheur du monde 2.0.

J'ai moi aussi utilisé l'outil de mesure Web Page Speed Analysis de WebSiteOptimization.com.

A la base, ce site me donnait une taille globale de 279 219 octets... Un peu trop, quand même. D'après moi, et d'après l'analyse détaillée et commentée fournie. Au travail, donc !

Procédure

  • J'installe donc l'extension CompreSS de Dotclear. Cet outil permet de nettoyer les fichiers de présentation CSS afin d'en réduire la taille : suppression des commentaires, des espaces et des retours à la ligne. Je passe ainsi à 273 628 octets, soit un gain de 5 591 octets... C'est toujours ça de pris...
  • Mon bandeau du haut était au format JPG. Pas des plus optimisé, PNG fait beaucoup mieux ! Cette simple conversion me fait gagner 35 690 octets (pour arriver à 237 938 octets au total). Pas mal du tout !
  • L'article propose d'ajouter ob_start('ob_gzhandler'); au fichier index.php de Dotclear. La modification est en effet très facile : il suffit d'éditer ce fichier et :
    • Cette modification me fait passer à 217 191 octets, soit encore un gain de 20 747 octets. C'est bien payé pour une modification si facile à réaliser ! Cependant, cette modification ne me plait pas tant que ça : elle fait modifier un fichier de Dotclear lui-même, et lors de la prochaine mise à jour, je risque d'être très embêté. La mise à jour automatique de Dotclear n'aime en effet pas du tout que les fichiers soient modifiés...
    • Pour tout autre site (non basé sur Dotclear), il vous suffit d'ajouter cette ligne à chacune de vos pages PHP.
    • Voici, pour Dotclear, le début du fichier index.php :
 <?php
 ob_start('ob_gzhandler');
 # ***** BEGIN LICENSE BLOCK *****
 # This file is part of DotClear.
 # Copyright (c) 2005 Olivier Meunier and contributors. All rights
 # reserved.
  • Une astuce qui ne fait pas gagner en poids, et donc qui ne modifie pas le temps de chargement global, est de mettre les scripts Javascripts à la fin. En effet, le chargement de certains de ces fichiers, comme la librairie JQuery, peut mettre un certains temps, alors que ces scripts sont souvent inutile tant que la page n'est pas chargée. En mettant ces fichiers à la fin, l'utilisateur aura donc un ressenti de chargement plus rapide.
    • Dans le même ordre d'idée, les scripts de statistiques comme Google Analytics sont également à mettre à la fin.
    • Dans Dotclear, les lignes dans tpl/_head.html similaires à celles ci-dessous sont donc à mettre dans tpl/_footer.html.
 <script type="text/javascript" src="tpl:BlogThemeURL/../default/js/jquery.js"></script>
 <script type="text/javascript" src="tpl:BlogThemeURL/../default/js/jquery.cookie.js"></script>

Apache

  • Lors de la mise à jour de mon serveur Apache pour passer à la version 2.2.11 (Cf. Mise à jour : Apache 2.2.11), j'en ai profité pour activer le module mod_deflate. Ce module permet d'envoyer les fichiers choisis compressés au format GZip (.gz). Ce format est en effet reconnu par tout les navigateurs depuis bien longtemps. Le paramétrage permet de choisir quels types de fichiers doivent être compressés : inutile en effet d'utiliser des ressources système pour compresser une image JPEG... Ainsi mes fichiers HTML, Javascript et CSS sont tous compressés, et la page d'accueil du blog arrive à un poids record de... 80 482 octets ! Soit moins d'un tiers du poids de départ !
    • Note : l'astuce ob_start('ob_gzhandler') ci-dessus est du coup inutile.
    • Pour plus d'information sur la mise en place de ce module, n'hésitez pas à me contacter, via le formulaire de Contact ou via un commentaire ci-dessous.

Conclusion

  • Avant mod_deflate, le gain a été tout de même de 22%. Ce n'est pas négligeable, et si vous ne pouvez pas, pour une raison ou une autre (hébergement mutualisé, manque de temps ou de compétence, ...) avoir mod_deflate, ces conseils vous permettront d'améliorer la réactivité de votre site.
  • L'utilisation de mod_deflate permet quant à elle d'arriver à d'excellents résultats et rend à mon avis inutile CompreSS, que j'ai désactivé depuis, pour me faciliter la tâche lors des modifications de ces feuilles de styles.
  • L'utilisation de mod_deflate est bien évidemment valable pour tout type de sites !
  • La prochaine étape dans l'optimisation d'un site est l'utilisation des Sprites CSS. Mais cela demande pas mal de travail sur les images, et fera fait donc l'objet d'un article dédié. Edit: Cet article, le voici : Accélérez le chargement de vos pages avec les Sprites CSS

Bonne optimisation ! Et n'hésitez pas à venir nous faire part de vos expériences et améliorations ici !