Je me suis rendu compte récemment que mon blog avait du mal à se charger si je supprimais les éléments du cache de mon navigateur (Firefox).
J'ai donc décidé d'y remédier en optimisant le chargement de mon site. Après une petite recherche je suis tombé sur 3 billets du même blog que je vous conseille très fortement : http://blog.chaosklub.com/index.php/tag/vitesse. Les explications y sont claires et les résultats rapidement visibles :D

Et pour vous le prouver, j'ai fait une dizaine de changements assez simples en testant à chaque fois le temps de chargement de la page d'accueil. j'ai bien évidemment utilisé la même méthode que celle cité dans le blog que je vous conseille, c'est à dire aller sur le site http://www.websiteoptimization.com/services/analyze/index.html, copier/coller le lien de mon site dans le champs "Enter URL to diagnose" et cliquer sur "Envoyer".
Pour chacun de mes tests j'ai relevé le download times pour une connexion 56K.

01- Sans optimisation

Temps de chargement : 46.14 secondes

02- Avec moins d'articles sur une page (7 au lieu de 10)

Temps de chargement : 44.60 secondes
Après avoir effectué mon premier test de chargement, le site web site optimization me dit que le contenu HTML est un peu trop volumineux. J'ai donc diminué le nombre de billets dans la même page dans l'interface d'administration de dotclear. Je gagne alors quelques seondes.

03- Compression gzip

Temps de chargement : 34.70 secondes
Le simple ajout, dans le fichier index.php de la ligne

<?php
ob_start('ob_gzhandler');

me fait gagner 10s !!!

04- Compression des css

Temps de chargement : 33.83 secondes
La compression consiste à supprimer tous les espaces dans les fichiers css en utilisant le plugin Dotclear compreSS. Mais le gain de temps est assez faible (en ce qui concerne mon thème car les fichiers css sont assez petits de base)

05- Compression du fichier jquery.js uniquement

Temps de chargement : 24.98 secondes
Ce fichier contient tout un tas de fonctions javascript, mais il fait... 98Ko ! Il est donc long à charger... On va donc utiliser une version "minified" (compressée, où tous les espaces ont été supprimés). Il suffit de la récupérer sur le site http://docs.jquery.com/Downloading_jQuery. On passe d'un fichier de 98Ko à un fichier de 55Ko. Et un gain de 9s !

06- Compression des autres fichiers js

Temps de chargement : 24.40 secondes
On peut s'amuser à compresser les autres fichiers js pour grappiller encore un peu de temps. Pour cela il suffit d'aller sur le site http://www.digitaloverload.co.uk/jsmin/ qui nous permet d'obtenir un fichier "minified".

07- Suppression du widget viadeo

Temps de chargement : 20.80 secondes
Si vous souhaitez gagner 4 secondes au chargement et que vous n'avez pas un besoin vital du widget viadeo, vous pouvez le supprimez. En effet il charge un fichier de 16Ko...

08- Suppression de liens vers un fichier non trouvé

Temps de chargement : 20.66 secondes
Pour avoir un démarrage "clean", j'en ai profité pour supprimer un lien vers un fichier non trouvé étant donné que le site "web site optimization" en donne une liste...

09- Chargement des fichier js en dernier

Temps de chargement : 20.66 secondes
Comme on peut le constater, cette astuce n'a aucun impact sur le chargement total de la page et pourtant elle apporte un grand avantage à mon site !
Celui-ci avait en effet tendance à afficher une belle page blanche pendant quelques secondes au premier chargement. Et personnellement quand je vais sur un site où il ne se passe rien... je zappe !
La cause ? le fichier jquery.js qui met beaucoup de temps à se charger et à s'exécuter... Alors qu'il n'est pas nécessaire au tout début du chargement. J'ai donc fait la manipulation suivante :

  • Suppression des lignes suivantes du fichier themes\default\tpl\_head.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>
  • Copie des lignes dans themes\default\tpl\_footer.html


Le fichier js est ainsi charger en dernier et ne bloque pas le chargement de ma page qui s'affiche tout de suite...

Attention ! J'ai remarqué que l'extension externalLinks ne marchait plus après cette opération (l'icône à côté des liens externes n'apparait plus).

10- Désactivation de Dotmap

Temps de chargement : 17.66 secondes
Et enfin dernière petite manipulation testée, j'ai désactivé dotmap dans ma page d'accueil (utilisé pour faire un test). En supprimant les lignes spécifiques à dotmap dans le fichier home.html (lignes que j'avais rajouté moi-même), je gagne 3s !


Conclusion : La mise en place des astuces trouvées sur le blog http://blog.chaosklub.com/index.php/tag/vitesse, plus d'autres changements, m'ont permis de gagner à peu près 30s au chargement de la page (pour une connexion 56K) ainsi qu'un affichage très rapide.
Et voici les principaux points à mettre en place d'après mes tests :

  • Compression gzip
  • Compression du fichier jquery.js
  • Chargement des fichier js en dernier

Bonne optimisation ;-)