Tout le bonheur du monde 2.0

Le blog de Khaos Farbauti Ibn Oblivion. Une vision du monde cynique et poétique.

Aller au contenu | Aller au menu | Aller à la recherche

Guide d'optimisation des blogs Dotclear 2

dotclear.gifAprès avoir retourné Internet pour trouver toutes les méthodes possibles et imaginables d'optimisation de mon blog Dotclear 2, j'ai décidé d'en faire profiter mes lecteurs.

Je vais donc vous présenter à travers ce billet (et probablement d'autres qui suivront, les techniques étant très nombreuses) les différentes techniques d'optimisation pour permettre à votre blog de s'afficher le plus rapidement possible.

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)

Khaos Farbauti Ibn Oblivion

Auteur: Khaos Farbauti Ibn Oblivion

Restez au courant de l'actualité et abonnez-vous au Flux RSS de cette catégorie

Dsls Dsls (Passant) ·  23 mai 2008, 08:28

Bonjour,

Une petite remarque concernant l'optimisation Gzip : il est possible de déléguer directement cette partie à Apache, en utilisant le module mod_deflate, ce qui évite le recours à du php pour gérer un contenu qui n'en a pas forcément besoin. Le module en question compresse directement les données correspondant à un mime-type donné.

Par exemple, l'ajout des lignes suivantes :

<IfModule mod_deflate.c>
         AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript
</IfModule>

dans un apache.conf compressera tout contenu texte (css, javascript, html statique). Il faut bien sûr auparavant l'activer via une ligne du genre

LoadModule deflate_module /usr/lib/apache2/modules/mod_deflate.so

C'était mes 2 cents ;)

--
Bruno

Khaos Farbauti Ibn Oblivion Khaos Farbauti Ibn Oblivion (Toujours là) ·  23 mai 2008, 08:34

Tout à fait. L'avantage de la méthode indiquée ci-dessus (et dans la partie 2) étant qu'on peut l'appliquer également sur un hébergement mutualisé.

francis francis (Passant) ·  29 mai 2008, 00:12

Pour faire l'inventaire, il y a aussi l'extension Firebug pour firefox qui permet aussi de donner le temps de ce qui provient aussi de l'exterieur du blog https://addons.mozilla.org/fr/firef...

A+

Khaos Farbauti Ibn Oblivion Khaos Farbauti Ibn Oblivion (Toujours là) ·  29 mai 2008, 06:43
La problématique de Firebug est qu'il dépend beaucoup de la connexion de l'utilisateur ce qui le rend un peu aléatoire. Pour une même page, on peut obtenir des résultats assez différent sans n'avoir rien changé.
L'utilisation d'un service web permet de s'affranchir de cette limite. Néanmoins cela un bon outil pour faire une approximation. (et pour tout un tas d'autres choses, puisque Firebug ne fait pas que mesurer le temps)

Ajouter un commentaire Fil des commentaires de ce billet

:) ;) :/ :| LOL :D :( :C 8) :O ;( 8O :arrow: :evil: :!: :idea: :mad: :?: :razz: :oops: :rolleyes:

aucune annexe



À Voir Également

aveugle.jpg

Cette vieille leçon

Une fois encore me vient l'envie soudaine d'étaler mes pensées par écrit. Que voulez-vous, c'est...

Lire la suite

bisounours.jpg

Oui, vous êtes des salopes. Et alors ?

En ce moment je ne sais pas si c'est dans l'air du temps ou bien juste dans les préoccupations des...

Lire la suite