Tout le bonheur du monde 2.0

Pour cette première partie, je vais me concentrer sur les 3 techniques les plus rapides et les plus simples à mon sens pour permettre à votre blog Dotclear 2 de gagner en vitesse de manière non négligeable sans rentrer dans des éléments de programmation trop complexe.

Bref, simple et efficace, que demander de mieux ?

Avant toute chose : Prendre la mesure

Tout d'abord, il faut faire l'état des lieux de son blog et voir un peu à quel vitesse il s'affiche sur l'ordinateur de M. Toutlemonde.

Pour cela, il existe un outil très efficace : Web Page Speed Analysis de WebSiteOptimization.com

Le principe en est tout simple : vous indiquez la page d'accueil de votre blog dans le champ "Enter URL to diagnose" et vous appuyez sur "Envoyer"

La page qui apparait alors vous indique tout ce que vous devez savoir sur la vitesse d'affichage de votre blog. Recopier l'ensemble de ces informations quelque part, vous pourrez ainsi comparer la pertinence des techniques que nous allons mettre en place ensuite. (Vous pouvez également répéter l'analyse pour d'autres pages que la page d'accueil, par exemple la page d'affichage d'un billet)

Pour l'instant nous allons nous intéresser au tableau le plus important : "Download Times"
Dans ce tableau vous trouvez le temps mis par votre page pour s'afficher selon la vitesse de la connexion utilisateur.

En France, on peut globalement diviser la population en 2 parties : Ceux qui ont l'ADSL et ceux qui ne l'ont pas. C'est bien évidemment sur cette deuxième fraction de la population que les résultats seront les plus visibles.
Donc prenons pour référence le temps indiqué sur la ligne 56K (c'est à dire pour un utilisateur "normal" n'ayant pas l'ADSL), c'est ce temps que nous allons tenter d'améliorer.

Technique n°1 : Optimisation des images

Dans la plupart des cas, c'est LA raison numéro 1 d'une lenteur d'affichage.

Alors bien sûr, une première approche est de supprimer les images superflues mais, pour des raisons esthétiques, ce n'est pas toujours possible. Il ne s'agit pas non plus de revenir à du texte tout bête et moche.

La solution réside dans un outil en ligne appelé Online Image Optimizer

Il vous suffit d'indiquer une de vos images à cet outil (soit par son URL, soit depuis votre ordinateur avec le bouton "Parcourir") et n'oubliez pas de cocher la case "show all results".

Cet outil va alors vous proposer votre image originale avec plusieurs niveaux de compression et, indiqué sur le coté, le gain ("Savings", suivi d'un pourcentage en vert).
Il vous suffit alors de décider laquelle de ces images offre le meilleur compromis entre le gain et la qualité d'image (Evidemment, plus le gain est grand, plus l'image perd en qualité) et de remplacer l'image originale de votre blog par sa version compressée.

Cette technique est à utiliser essentiellement pour les bandeaux (comme en haut sur ce blog) mais également sur les images de taille non négligeable qui décorent votre blog. (par exemple, l'image qui se situe juste au dessus de mon menu ou bien encore les grosses icônes qui apparaissent dans le menu)
Plus l'image sera grande, plus elle sera optimisable.

Une fois vos images remplacées par leur version compressée, effectuez à nouveau l'analyse de vitesse. Vous devriez noter une différence non négligeable dans les "Download Times"

Technique n°2 : Gzip ou le bout de code magique

Après avoir diminuer la taille des images, nous allons maintenant diminuer la taille du texte en utilisant ce qu'on appelle la compression Gzip.

C'est une technique très large et assez complexe pour les néophytes en programmation, je vais donc m'en tenir pour l'instant à la méthode de compression Gzip la plus simple adaptée à Dotclear 2.

Dans le répertoire de votre blog Dotclear 2, il y a un fichier nommé "index.php" (il se trouve au même endroit que le fichier "CHANGELOG"). Ouvrez-le avec un éditeur de texte (le bloc-note de Windows fait très bien l'affaire) et vous verrez quelque chose qui ressemble à ceci :

<?php
# ***** BEGIN LICENSE BLOCK *****
# This file is part of DotClear.
# Copyright (c) 2005 Olivier Meunier and contributors. All rights
# reserved.
#

Il vous suffit alors d'insérer une ligne juste après le "<?php" comme ceci :

<?php
ob_start('ob_gzhandler');
# ***** BEGIN LICENSE BLOCK *****
# This file is part of DotClear.
# Copyright (c) 2005 Olivier Meunier and contributors. All rights
# reserved.
#

Sauvegardez le tout, mettez à jour votre blog et voilà, c'est fait.

Désormais votre blog utilisera la compression Gzip pour s'afficher lorsque le navigateur de l'utilisateur le permet (si le navigateur ne le permet pas, tout fonctionne automatiquement comme si vous n'aviez pas ajouté cette ligne de code) ce qui améliore les performances générales d'affichage.

Un petit test de vitesse pour vérifier et c'est parti pour la dernière technique simple...

Technique n°3 : La compression des fichiers CSS

Les fichiers CSS sont l'élément essentiel de votre thème Dotclear 2. Ce sont eux qui détermine les couleurs et la présentation. Ils leur arrivent donc parfois, pour les thèmes complexes, d'être relativement volumineux.

Pour en réduire la taille, il existe une solution prête à l'emploi pour Dotclear 2 : L'extension CompreSS.

Une fois l'extension ajoutée à votre blog, c'est tout simple : Vous allez dans votre interface d'administration du blog, vous cliquez sur CompreSS et vous n'avez plus qu'à cliquer sur le bouton "Compresser les fichiers CSS" et voilà le tour est joué.

Il faut savoir que cette compression rend les fichiers CSS plus difficile à lire pour un être humain (mais pas impossible) donc penser à conserver les fichiers originaux si vous souhaitez modifier des éléments de votre thème par la suite.

Il ne vous reste plus qu'à effectuer un test final de vitesse et comparer avec les mesures prises au tout début !

(Partie 2)(Partie 3)