Tout le bonheur du monde 2.0 - Mot-clé - compressionLe blog de Khaos Farbauti Ibn Oblivion. Une vision du monde cynique et poétique.2024-03-22T20:25:27+01:00Khaos Farbauti Ibn Oblivionurn:md5:75b67adbc79787e2cc386bf3e28496a8DotclearGuide d'optimisation des blogs Dotclear 2 (partie 2)urn:md5:c90515f3cc3c9e96cb820f68b786109b2008-05-22T14:55:00+02:002023-09-25T15:14:07+02:00Khaos Farbauti Ibn OblivionBonheur GénéralblogcompressionDotclear 2optimisationvitesseWeb<p><img src="https://blog.chaosklub.com/public/./.dotclear_t.jpg" alt="dotclear.gif" class="media-left" />Voici la suite de mon <a href="https://blog.chaosklub.com/post/2008/04/30/Guide-doptimisation-des-blogs-Dotclear-2">guide d'optimisation des blogs Dotclear 2</a>.</p>
<p>Dans cette seconde partie, je vais aborder 3 nouvelles techniques pour rendre son blog plus rapide. Comme indiqué <a href="https://blog.chaosklub.com/post/2008/04/30/Guide-doptimisation-des-blogs-Dotclear-2">précédemment</a>, 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.</p> <h4><strong>Technique n°4 : La réduction des fichiers JS</strong></h4>
<p>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.</p>
<p>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 <a href="https://blog.chaosklub.com/post/2008/04/30/Guide-doptimisation-des-blogs-Dotclear-2">la technique n°3</a>, il est tout d'abord possible de supprimer du fichier JS tout ce qui est inutile (commentaires, retour à la ligne, ...)</p>
<p>Il existe de nombreux outils en ligne qui réalise ce travail à votre place comme par exemple : <a href="http://www.digitaloverload.co.uk/jsmin/">Javascript Minifier Tool</a></p>
<p>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.</p>
<p>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 <a href="http://docs.jquery.com/Downloading_jQuery">JQuery</a>)</p>
<p>(A noter que Dotclear 2 RC 1 inclut déjà une version "minified" de jquery dans le thème par défaut)</p>
<h4><strong>Technique n°5 : Gzip à tous les étages</strong></h4>
<p>Avec la <a href="https://blog.chaosklub.com/post/2008/04/30/Guide-doptimisation-des-blogs-Dotclear-2">technique n°2</a>, nous avions activé la compression Gzip pour tout le contenu textuel de votre blog.</p>
<p>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.</p>
<p>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.<br />
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)</p>
<p>Ensuite dans le répertoire JS, créez 2 fichiers :</p>
<p>- Un fichier ".htaccess" (n'oubliez pas le point au début du nom) contenant :</p>
<p><code>AddHandler application/x-httpd-php .js</code><br />
<code>php_value auto_prepend_file gzip-js.php</code></p>
<p>- Et un fichier "gzip-js.php" contenant :</p>
<p><code><?php</code><br />
<code>ob_start ("ob_gzhandler");</code><br />
<code>header("Content-type: text/javascript; charset: UTF-8");</code><br />
<code>header("Cache-Control: must-revalidate");</code><br />
<code>$offset = 72 * 60 * 60 ;</code><br />
<code>$ExpStr = "Expires: " . </code><br />
<code>gmdate("D, d M Y H:i:s",</code><br />
<code>time() + $offset) . " GMT";</code><br />
<code>header($ExpStr);</code><br />
<code>?></code></p>
<p>Dans le répertoire CSS, créez les 2 fichiers suivants :</p>
<p>- Un fichier ".htaccess" (n'oubliez pas le point au début du nom) contenant :</p>
<p><code>AddHandler application/x-httpd-php .css</code><br />
<code>php_value auto_prepend_file gzip-css.php</code></p>
<p>- Et un fichier "gzip-css.php" contenant :</p>
<p><code><?php</code><br />
<code>ob_start ("ob_gzhandler");</code><br />
<code>header("Content-type: text/css; charset: UTF-8");</code><br />
<code>header("Cache-Control: must-revalidate");</code><br />
<code>$offset = 72 * 60 * 60 ;</code><br />
<code>$ExpStr = "Expires: " . </code><br />
<code>gmdate("D, d M Y H:i:s",</code><br />
<code>time() + $offset) . " GMT";</code><br />
<code>header($ExpStr);</code><br />
<code>?></code></p>
<p>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)</p>
<h4><strong>Technique n°6 : JS en bas, CSS en haut</strong></h4>
<p>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.</p>
<p>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.<br />
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.</p>
<p>Pour résoudre ce problème, il faut bien identifier à quoi sert les CSS et les JS.</p>
<p>Dans Dotclear 2, les fichiers CSS définissent l'apparence globale : la disposition des éléments, la couleur du texte, etc...<br />
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)</p>
<p>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...<br />
Ces effets n'ont besoin d'être chargés qu'une fois la page entièrement affichée.</p>
<p>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".</p>
<p>Les appels aux fichiers CSS doivent, eux, être conservé dans le "_header.html".</p>
<h4><strong>Bonus</strong></h4>
<p>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"</p>
<p>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)</p>
<p>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.</p>
<p>(<a href="https://blog.chaosklub.com/post/2008/04/30/Guide-doptimisation-des-blogs-Dotclear-2">Partie 1</a>)(<a href="https://blog.chaosklub.com/post/2008/07/23/Guide-doptimisation-des-blogs-Dotclear-2-partie-3">Partie 3</a>)</p>Guide d'optimisation des blogs Dotclear 2urn:md5:5540fef87aa4254b404aa7769a0a1a092008-04-30T08:19:00+02:002023-02-14T20:32:52+01:00Khaos Farbauti Ibn OblivionBonheur GénéralblogcompressionDotclear 2optimisationvitesseWeb<p><img src="https://blog.chaosklub.com/public/./.dotclear_t.jpg" alt="dotclear.gif" style="float:left; margin: 0 1em 1em 0;" />Aprè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.</p>
<p>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.</p> <p>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.</p>
<p>Bref, simple et efficace, que demander de mieux ?</p>
<h4><strong>Avant toute chose : Prendre la mesure</strong></h4>
<p>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.</p>
<p>Pour cela, il existe un outil très efficace : <a href="http://www.websiteoptimization.com/services/analyze/index.html">Web Page Speed Analysis</a> de WebSiteOptimization.com</p>
<p>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"</p>
<p>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)</p>
<p>Pour l'instant nous allons nous intéresser au tableau le plus important : "Download Times"<br />
Dans ce tableau vous trouvez le temps mis par votre page pour s'afficher selon la vitesse de la connexion utilisateur.</p>
<p>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.<br />
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.</p>
<h4><strong>Technique n°1 : Optimisation des images</strong></h4>
<p>Dans la plupart des cas, c'est LA raison numéro 1 d'une lenteur d'affichage.</p>
<p>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.</p>
<p>La solution réside dans un outil en ligne appelé <a href="http://tools.dynamicdrive.com/imageoptimizer/index.php">Online Image Optimizer</a></p>
<p>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".</p>
<p>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).<br />
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.</p>
<p>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)<br />
Plus l'image sera grande, plus elle sera optimisable.</p>
<p>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"</p>
<h4><strong>Technique n°2 : Gzip ou le bout de code magique</strong></h4>
<p>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.</p>
<p>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.</p>
<p>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 :</p>
<p><code><?php</code><br />
<code># ***** BEGIN LICENSE BLOCK *****</code><br />
<code># This file is part of DotClear.</code><br />
<code># Copyright (c) 2005 Olivier Meunier and contributors. All rights</code><br />
<code># reserved.</code><br />
<code>#</code></p>
<p>Il vous suffit alors d'insérer une ligne juste après le "<?php" comme ceci :</p>
<p><code><?php</code><br />
<code>ob_start('ob_gzhandler');</code><br />
<code># ***** BEGIN LICENSE BLOCK *****</code><br />
<code># This file is part of DotClear.</code><br />
<code># Copyright (c) 2005 Olivier Meunier and contributors. All rights</code><br />
<code># reserved.</code><br />
<code>#</code></p>
<p>Sauvegardez le tout, mettez à jour votre blog et voilà, c'est fait.</p>
<p>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.</p>
<p>Un petit test de vitesse pour vérifier et c'est parti pour la dernière technique simple...</p>
<h4><strong>Technique n°3 : La compression des fichiers CSS</strong></h4>
<p>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.</p>
<p>Pour en réduire la taille, il existe une solution prête à l'emploi pour Dotclear 2 : <a href="http://plugins.dotaddict.org/dc2/details/CompreSS">L'extension CompreSS</a>.</p>
<p>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é.</p>
<p>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.</p>
<p>Il ne vous reste plus qu'à effectuer un test final de vitesse et comparer avec les mesures prises au tout début !</p>
<p>(<a href="https://blog.chaosklub.com/post/2008/05/22/Guide-doptimisation-des-blogs-Dotclear-2-partie-2">Partie 2</a>)(<a href="https://blog.chaosklub.com/post/2008/07/23/Guide-doptimisation-des-blogs-Dotclear-2-partie-3">Partie 3</a>)</p>