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 (partie 2)

dotclear.gifVoici la suite de mon guide d'optimisation des blogs Dotclear 2.

Dans cette seconde partie, je vais aborder 3 nouvelles techniques pour rendre son blog plus rapide. Comme indiqué précédemment, il est conseillé de faire systématiquement des tests pour mesurer le gain de vitesse et ainsi déterminer si une technique est adaptée ou non à votre blog.

Technique n°4 : La réduction des fichiers JS

Si votre blog utilise des "effets spéciaux", il est probable que les fichiers JavaScript (.js) sont une cause majeure de ralentissement. Parfois plus importante même que la taille de vos images.

Il est donc indispensable de réduire la taille de ces fichiers autant que possible. Pour cela, de la même manière que pour la technique n°3, il est tout d'abord possible de supprimer du fichier JS tout ce qui est inutile (commentaires, retour à la ligne, ...)

Il existe de nombreux outils en ligne qui réalise ce travail à votre place comme par exemple : Javascript Minifier Tool

Attention toutefois, tout comme pour les CSS, cette réduction rend le fichier très peu lisible pour un humain. Donc conservez une copie du fichier non réduit si vous souhaitez y apporter des changements plus tard.

Pour certains fichiers JS très répandu vous pouvez trouver directement la version réduite ("minified") sur le site officiel (comme par exemple pour JQuery)

(A noter que Dotclear 2 RC 1 inclut déjà une version "minified" de jquery dans le thème par défaut)

Technique n°5 : Gzip à tous les étages

Avec la technique n°2, nous avions activé la compression Gzip pour tout le contenu textuel de votre blog.

Nous allons maintenant voir comment activer la compression Gzip pour les fichiers JS et CSS ce qui, cumulé aux versions "minified", va sensiblement réduire leur taille et donc la vitesse d'affichage de votre blog.

Pour cela il faut tout d'abord regrouper vos fichiers JS dans un répertoire unique (comme c'est le cas pour le thème par défaut de DC2 RC1), et faire de même avec vos fichiers CSS.
Il ne doit y avoir QUE des fichiers JS dans le répertoire JS et QUE des fichiers CSS dans le répertoire CSS (pas d'images ou de fichiers php)

Ensuite dans le répertoire JS, créez 2 fichiers :

- Un fichier ".htaccess" (n'oubliez pas le point au début du nom) contenant :

AddHandler application/x-httpd-php .js
php_value auto_prepend_file gzip-js.php

- Et un fichier "gzip-js.php" contenant :

<?php
ob_start ("ob_gzhandler");
header("Content-type: text/javascript; charset: UTF-8");
header("Cache-Control: must-revalidate");
$offset = 72 * 60 * 60 ;
$ExpStr = "Expires: " .
gmdate("D, d M Y H:i:s",
time() + $offset) . " GMT";
header($ExpStr);
?>

Dans le répertoire CSS, créez les 2 fichiers suivants :

- Un fichier ".htaccess" (n'oubliez pas le point au début du nom) contenant :

AddHandler application/x-httpd-php .css
php_value auto_prepend_file gzip-css.php

- Et un fichier "gzip-css.php" contenant :

<?php
ob_start ("ob_gzhandler");
header("Content-type: text/css; charset: UTF-8");
header("Cache-Control: must-revalidate");
$offset = 72 * 60 * 60 ;
$ExpStr = "Expires: " .
gmdate("D, d M Y H:i:s",
time() + $offset) . " GMT";
header($ExpStr);
?>

Désormais la compression Gzip est activé pour vos fichiers JS et CSS se trouvant dans ces répertoires, rendant leur chargement environ 2 fois plus rapide (N'oubliez pas d'utiliser les outils de mesure de temps pour voir l'impact sur votre blog)

Technique n°6 : JS en bas, CSS en haut

Cette technique n'a pas d'effet sur la vitesse totale d'affichage de votre blog mais sur la vitesse à laquelle votre blog est utilisable.

En effet, on place habituellement l'ensemble des appels aux fichiers CSS et aux fichiers JS dans l'en-tête de la page. Ce qui veut dire que le navigateur charge ces fichiers AVANT d'afficher le texte de la page.
Lorsque l'on utilise des fichiers JS de taille non négligeable comme JQuery, le visiteur de votre blog peut alors attendre plusieurs secondes avant de voir apparaitre quoi que ce soit sur son écran.

Pour résoudre ce problème, il faut bien identifier à quoi sert les CSS et les JS.

Dans Dotclear 2, les fichiers CSS définissent l'apparence globale : la disposition des éléments, la couleur du texte, etc...
Logiquement, il faut donc les charger avant le texte sinon l'utilisateur verra durant le chargement une page "déformée" (juste le texte sans la présentation)

En revanche les fichiers JS définissent la plupart des temps des effets spéciaux : un menu déroulant, un bandeau qui défile, etc...
Ces effets n'ont besoin d'être chargés qu'une fois la page entièrement affichée.

C'est donc pourquoi dans vos thèmes Dotclear 2 il préférable, pour le confort de vos visiteurs, de placer les appels aux fichiers JS au sein du "_footer.html".

Les appels aux fichiers CSS doivent, eux, être conservé dans le "_header.html".

Bonus

Dans la lignée de la technique précédente, il faut savoir qu'il existe une différence, lorsque vous appelez un fichier CSS, entre la balise "link rel" et la balise "@import"

Dans le premier cas, les navigateurs chargeront normalement le fichier CSS. Mais dans le second cas, lorsque vous utilisez "@import", certains navigateurs ne chargeront le fichier CSS qu'après tout le reste (même si vous l'avez pourtant placé dans le "_header.html", donc au début)

Il est donc préférable de n'utilisez que la balise "link rel" pour les fichiers CSS afin de garantir qu'ils seront bien chargés dès le début et ne perturberons donc pas le confort de vos visiteurs.

(Partie 1)(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

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

Je pense que tu vas parler dans les prochains billet du plugin staticache et du cache template aussi ?

Khaos Farbauti Ibn Oblivion (Toujours là) ·  29 mai 2008, 06:47

J'avoue ne pas encore avoir creusé la question mais DC2 n'a-t-il pas déjà une gestion du cache très efficace par défaut ? Pour l'instant les prochaines techniques n'abordent pas ce sujet, mais je peux toujours en rajouter de nouvelles si nécessaires.

gLUKis (Passant) ·  11 février 2009, 13:35

Bonjour,

Avant tous passage en production, je traite les fichiers CSS de manière à les rendre plus light.

A l'aide d'un BATCH qui fait le travail pour moi ;)

http://hidalgoemmanuel.info/archive...

@+

aby (Passant) ·  28 novembre 2010, 14:57

Bon article, mais concernant la "Technique n°5 : Gzip à tous les étages" il faut noter que cela plante la case "Se souvenir de moi sur ce site" (site hébergé chez OVH)

no attachment



À Voir Également

On a toujours fait comme ça

Même si le mot est amusant, force est de constater qu'ils vous arrivent parfois de me turlupiner....

Lire la suite

Fait et Vérité, l'enjeu de notre époque

Parmi la pléiade de difficultés qu'affronte l'humanité au sens large, il en est une qui a récemment...

Lire la suite