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 3)

dotclear.gifEt voici la troisième (et théoriquement dernière) partie de mon guide d'optimisation des blogs Dotclear 2 (seconde partie)

Les 3 nouvelles techniques décrites ci-dessous apporteront la petite touche finale qui vous permettra de gagner les quelques secondes supplémentaires qui transformeront votre blog en véritable bijou de rapidité.

Comme à chaque fois, je vous recommande de mesurer systématiquement les résultats obtenus en appliquant ces techniques d'optimisation afin de ne conserver que celles véritablement adaptées à votre blog.

Technique n°7 : Utiliser des sprites

Comme nous l'avons vu dans la première partie de ce guide, ce sont généralement les images qui impactent le plus le temps de chargement. Il est donc nécessaire d'en réduire le nombre et la taille au maximum.

Mais on se retrouve parfois obligé d'utiliser beaucoup d'images pour de simples raisons esthétiques et fonctionnelles (par exemple sur mon blog, les smileys en bas et les icônes "Partager" dans le menu)

Il est alors temps de passer aux sprites. Le concept est tout simple, il s'agit de regrouper plusieurs images en une seule. Puis, la partie un peu plus complexe, de n'afficher que la partie de l'image globale qui nous intéresse au bon endroit.

Pour vous donner un exemple concret, les icônes de ma section "Partager" ne sont en fait qu'une seule et même image. J'utilise ensuite le code css pour la découper en morceau et n'afficher que les morceaux qui m'intéressent.

Alors pourquoi est-ce que les sprites améliorent la vitesse ? Et bien regardons, en simplifiant, ce qui se passe si l'on affiche une page avec 10 images :

Le navigateur va d'abord rechercher l'image 1 (temps 1), puis la télécharge (temps 2), puis l'affiche (temps 3), puis il va chercher la deuxième image (temps 4), la télécharge (temps 5), l'affiche (temps 6), etc... jusqu'à la dixième

Maintenant si, au lieu des 10 images, on utilise une seule image contenant 10 sprites, le navigateur va rechercher l'image (temps 1), puis la télécharge (temps 2), puis l'affiche (temps 3)... et c'est tout ! On réduit donc de manière significative les temps de recherche et d'affichage.

Par ailleurs, il y a un effet "bonus" : lorsqu'on regroupe plusieurs images en une seule, en règle générale, l'image globale a une taille (en octets) inférieure à la somme des images d'origine. On économise donc également sur le temps de téléchargement.

Voilà pour la théorie, passons à la pratique. Comme tout le monde préfère les choses simples, il existe des outils pour mettre en place facilement des sprites. Notamment CSS Sprite Generator

C'est en anglais mais le mode d'emploi n'est pas compliqué : vous réunissez toutes vos images dans un fichier zip que vous indiquez dans la case "Upload Images (ZIP)" du site puis vous appuyez sur le bouton "Create Sprite Image & CSS" tout en bas (vous pouvez laisser les options par défaut le temps de vous familiariser avec l'outil)

Vous obtenez alors une image au format PNG, optimisée, regroupant toutes vos images. Ainsi que le code css à utiliser dans votre feuille de style et voilà !

Technique n°8 : Le flush

Pour se reposer de la technique précédente assez complexe, en voici une autre dont l'impact est minime mais très simple à mettre en place.

Ouvrez vos fichiers de template dotclear 2 (home.html, post.html, archive.html, etc...) et insérez

<?php flush(); ?>

juste après la balise "</head>" (et donc juste avant "<body")

Voilà c'est tout ! :)

Grâce à cette commande, on demande au navigateur d'afficher la page "tout de suite" sans attendre la fin du téléchargement. Le résultat varie selon les navigateurs mais permet de diminuer le temps d'attente perçu par l'utilisateur. (c'est à dire le temps durant lequel, il ne s'affiche rien dans le navigateur)

Technique n°9 : Encore plus vite pour les habitués

Les navigateurs Internet utilisent un système appelé "cache" pour vous permettre d'accéder plus vite à vos sites habituels. Le principe est simple : lorsque vous vous connectez une première fois à un site, les composants de ce site sont stockés sur votre ordinateur. Ensuite lorsque vous retournez sur cette page, au lieu de re-télécharger tous les composants, il suffit de prendre ceux stockés localement sur votre ordinateur, ce qui est beaucoup plus rapide.

Le problème c'est que, pour qu'un cache soit efficace, il doit être capable de déterminer les composants qui ne changent pratiquement jamais (et qu'on peut donc tranquillement mettre en cache) et ceux qui au contraire change sans arrêt (qu'il ne faut donc surtout pas mettre dans le cache)

Afin d'optimiser l'affichage de votre blog Dotclear 2 pour vos visiteurs, il peut donc être utile de définir vous-même ce qui doit ou ne doit pas être mis en cache.

Pour cela il suffit d'éditer le fichier ".htaccess" qui se trouve à la racine de votre installation dotclear 2 et d'y ajouter les lignes suivantes :

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType text/html "access plus 1 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 216000 seconds"
ExpiresByType application/x-javascript "access plus 216000 seconds"
</IfModule>

Dans cet exemple, on indique que globalement les images (gif, jpeg, png) ne change quasiment jamais (donc on peut tranquillement les mettre longtemps en cache). Les feuilles de styles (css) ne change pas beaucoup non plus (évitez cette ligne si vous changez de thème tous les jours). Le javascript évolue peu lui aussi (dans mon exemple, il évolue néanmoins plus souvent que les feuilles de styles). Et enfin, dans cet exemple, les fichiers html ne sont jamais mis en cache. (C'est préférable sur un blog afin de toujours bien afficher les nouveaux commentaires ou les nouveaux billets).

Il ne vous reste plus qu'à adapter cet exemple en fonction de vos besoins.

Ainsi s'achève mon guide d'optimisation, j'espère qu'il vous aura été utile et que votre blog sera désormais plus rapide que jamais !

Que la paix soit avec vous.

(Partie 1)(Partie 2)

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

Minimarmotte (Passant) ·  01 septembre 2008, 19:36

Merci pour ce guide qui m'a permis de vraiment améliorer le chargement et l'affichage de mon blog Dotclear !!!
Preuve à l'appui : http://emmanuelpierre.free.fr/blog/...
Et plus particulièrement les compressions gzip et js, ainsi que le chargement tardif des js.

Goudie (Passant) ·  02 octobre 2010, 00:08

Un énorme merci pour ce petit guide, vraiment bien écrit, tout est bien expliqué (savoir comment faire c'est bien, savoir ce que cela produit c'est encore mieux !). Même en 2010 il est loin d'être obsolète. Bravo ! :D

Ajouter un commentaire Fil des commentaires de ce billet

no attachment



À Voir Également

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

"Rien ne va" : La France en 2019 à travers la crise des gilets jaunes.

C'est devant l'absurdité de l'imagerie actuelle renvoyée par notre pays que j'ai soudain réalisé...

Lire la suite