Archives pour l'étiquette Mod_gzip

Configurer le niveau de compression du Mode_deflate de Apache2 et utiliser les logs pour en connaitre l’efficacité

Pour compléter mon billet sur l’utilisation du mod_deflate pour un hébergement apache 2 de Dotclear2 et celui sur Optimisation d’un hébergement eZ Publish 4 pour l’utilisation des caches web ou je parle du mod_gzip de apache 1.3 je vous invite à consulter le billet use mod_deflate to compress web content delivered by apache sur g-loaded.eu. Cette recommandation est valable quelque soit le CMS ou application web du moment que votre solution de web hosting repose sur apache 2. Vous en apprendrez plus sur les points suivants :

Configurer le niveau de compression de mod_deflate

L’algorithme deflate est assez rapide et il est possible de modifier le niveau de compression. Le mettre au maximum ne pose pas de problème si vous vous contentez de compresser du texte (css, Js, xml etc) [1]

DeflateCompressionLevel <span style="color: #ff0000;">9</span>

Surveiller la compression via les logs

Vous pouvez avoir une trace log de la compression effectué par le mod_deflate de votre serveur apache 2.[2]

Le directive suivant définissent quelque variable :

  • instream : La taille en Bytes (Octet) en entré de DEFLATE.
  • outstream : La taille en Bytes (Octet) en sortie de DEFLATE.
  • ratio : Le ratio de compression, (Sortie/Entré)x100
DeflateFilterNote Input instream DeflateFilterNote Output outstream DeflateFilterNote Ratio ratio

Les variables définie vous pouvez ajouter une Format de log à votre vhost:

<span style="color: #00007f;">LogFormat</span> <span style="color: #7f007f;">'&quot;%r&quot; %{outstream}n/%{instream}n (%{ratio}n%%)'</span> deflatelog

N’oubliez par d’utiliser de format de log en l’écrivant dans un fichier de log.

<span style="color: #00007f;">CustomLog</span> /path/to/vhost/logs/deflate_log deflatelog

Vous obtenez un log pour deflate qui ce présente comme cela. Pratique pour étudier l’utilité de la compression de donner en fonction du type de fichier dans votre architecture d’hébergement ou des efforts de Minification, toujours important en web hosting.

<span style="color: #7f007f;">&quot;GET /dotclear/themes/default/js/jquery.cookie.js HTTP/1.1&quot;</span> <span style="color: #ff0000;">451</span>/<span style="color: #ff0000;">994</span> <span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">45</span>%<span style="color: #66cc66;">&#41;</span>

Notes

[1] Attention comprimer au maximum des fichiers trop gros ou déjà compressé comme les images est contre productif !!

[2] Attention écrire des logs sur le disque ralenti apache !!

Karlesnine.com : Optimisation de l’hébergement d’un site Dotclear 2 pour l’utilisation des caches web

Si la gestion de cache web est pour vous une notion vague je vous invite à lire cette excellente documentation de Mark Nottingham en français.

J’ai appliqué les techniques d’optimisation un site web pour les caches web dont je parlais dans un billet précédent à mon propre blog propulsé par Dotclear 2.

Dans mon cas l’hébergement est réalisé sur un serveur Debian Lenny avec les briques suivante

  • Apache 2.2.9
  • Php5 5.2.11
  • Mysql 5.0.75

Dotclear 2 déjà optimisé

DC2 comporte déjà des optimisations pour la mise en cache des pages générées par l’application. Si vous étudier les header HTTP d’un dotclear fraichement installé avec un outil comme firebug pour firefox ou les outils développeur web de Safari ou Chrome vous pourrez en faire la constatation.

En effet DC2 utilise le framework clearbricks qui comporte quelque fonction, entre autre dans la lib php suivante

<span style="color: #000000; font-weight: bold;">/</span>dotclear<span style="color: #000000; font-weight: bold;">/</span>inc<span style="color: #000000; font-weight: bold;">/</span>clearbricks<span style="color: #000000; font-weight: bold;">/</span>common<span style="color: #000000; font-weight: bold;">/</span>lib.http.php

Les lignes, 207 a 210 de ce fichier génère les headers HTTP d’instruction de mise en cache. Personnellement souhaitant maitrisé les hearder depuis mon vhost apache j’ai mis en commentaire la ligne 209.

<span style="color: #000000;">207</span> <span style="color: #808080; font-style: italic;"># Common headers list</span> <span style="color: #000000;">208</span> <span style="color: #007800;">$headers</span><span style="color: #7a0874; font-weight: bold;">&#91;</span><span style="color: #7a0874; font-weight: bold;">&#93;</span> = <span style="color: #ff0000;">'Last-Modified: '</span>.gmdate<span style="color: #7a0874; font-weight: bold;">&#40;</span><span style="color: #ff0000;">'D, d M Y H:i:s'</span>,<span style="color: #007800;">$ts</span><span style="color: #7a0874; font-weight: bold;">&#41;</span>.<span style="color: #ff0000;">' GMT'</span>; <span style="color: #000000;">209</span> <span style="color: #808080; font-style: italic;"># $headers[] = 'Cache-Control: must-revalidate, max-age='.abs((integer) self::$cache_max_age);</span> <span style="color: #000000;">210</span> <span style="color: #007800;">$headers</span><span style="color: #7a0874; font-weight: bold;">&#91;</span><span style="color: #7a0874; font-weight: bold;">&#93;</span> = <span style="color: #ff0000;">'Pragma:'</span>;

Vhost apache, interdir les .htacess

Comme je l’expliquais dans un commentaire htaccess est un tueur de performance pour le site à forte audience. Ceci n’est pas le cas de mon blog, dommage, mais je garde la bonne pratique de bloquer l’utilisation des htaccess dans mon vhost avec la directive AllowOverride None.

&lt;Directory /home/karles/public_html/&gt;            <span style="color: #00007f;">Options</span> <span style="color: #0000ff;">FollowSymLinks</span>             <span style="color: #00007f;">AllowOverride</span> <span style="color: #0000ff;">None</span>         &lt;/Directory&gt;

mod_deflate, régime pour les fichiers texte

Le mod_deflate est le module apache apportant les fonctions de compression des fichiers avant leur distribution. L’installer est des plus facile

a2enmod deflate <span style="color: #000000; font-weight: bold;">/</span>etc<span style="color: #000000; font-weight: bold;">/</span>init.d<span style="color: #000000; font-weight: bold;">/</span>apache stop <span style="color: #000000; font-weight: bold;">/</span>etc<span style="color: #000000; font-weight: bold;">/</span>init.d<span style="color: #000000; font-weight: bold;">/</span>apache start

Sous apache2 l’antique Mod_gzip à fait la place au mod_deflate bien moins compliqué dans sa configuration. J’ai fais le choix de compresser les fichier qui sont sous forme de texte. C’est à dire les fichiers xml, css et javascript.

&lt;IfModule mod_deflate.c&gt;             &lt;Location /&gt;                 AddOutputFilterByType DEFLATE text/xml                 AddOutputFilterByType DEFLATE text/css                 AddOutputFilterByType DEFLATE text/javascript                 AddOutputFilterByType DEFLATE text/html                 AddOutputFilterByType DEFLATE text/plain                 AddOutputFilterByType DEFLATE application/xml                 AddOutputFilterByType DEFLATE application/xhtml+xml                 AddOutputFilterByType DEFLATE application/rss+xml                 AddOutputFilterByType DEFLATE application/javascript                 AddOutputFilterByType DEFLATE application/x-javascript &nbsp;                 SetOutputFilter DEFLATE &nbsp;                 <span style="color: #adadad; font-style: italic;"># Make sure proxies don't deliver the wrong content</span>                 <span style="color: #00007f;">Header</span> append Vary User-Agent env=!dont-vary             &lt;/Location&gt;         &lt;/<span style="color: #00007f;">IfModule</span>

Attention, l’utilisation du mod_deflate avec la ligne d’instruction Header append Vary User-Agent env=!dont-vary impose d’avoir le module mod_headers et le module mod_setenvif d’activé.

mod_expires, mise en cache

le mod_expires est tout aussi facile à installé que le mod_deflate. J’ai fait le choix de tout mettre en cache au minimum 30 secondes, Le contenue html restera valide deux minutes avant qu’une nouvelle interrogation de mon serveur soit nécessaire. La mise en page avec les fichiers javascript et css j’autorise une semaine de mise en cache. Quand aux images, plus lourde et moins volatile c’est carrément un mois de validité que je souhaite.

&lt;IfModule mod_expires.c&gt;                 <span style="color: #00007f;">ExpiresActive</span> <span style="color: #0000ff;">on</span>                 <span style="color: #00007f;">ExpiresDefault</span> <span style="color: #7f007f;">&quot;access plus 30 seconds&quot;</span>                 <span style="color: #00007f;">ExpiresByType</span> text/html <span style="color: #7f007f;">&quot;access plus 120 seconds&quot;</span>                 <span style="color: #00007f;">ExpiresByType</span> text/css <span style="color: #7f007f;">&quot;access 1 weeks&quot;</span>                 <span style="color: #00007f;">ExpiresByType</span> text/javascript <span style="color: #7f007f;">&quot;access 1 weeks&quot;</span>                 <span style="color: #00007f;">ExpiresByType</span> application/x-javascript <span style="color: #7f007f;">&quot;access 1 weeks&quot;</span>                 <span style="color: #00007f;">ExpiresByType</span> application/javascript <span style="color: #7f007f;">&quot;access 1 weeks&quot;</span>                 <span style="color: #00007f;">ExpiresByType</span> image/gif <span style="color: #7f007f;">&quot;access 1 months&quot;</span>                 <span style="color: #00007f;">ExpiresByType</span> image/jpeg <span style="color: #7f007f;">&quot;access 1 months&quot;</span>                 <span style="color: #00007f;">ExpiresByType</span> image/png <span style="color: #7f007f;">&quot;access 1 months&quot;</span>         &lt;/IfModule&gt;

Conclusion

Si vous ajouter à ces technique celle d’optimisation des images pour l’accélération d’un site web vous allez sensiblement accélérer l’affichage de votre blog et par la même son référencement.

Vous pouvez également consulté la documentation du chaosklub en trois partie (1 2 3 ) qui s’attaque au même chantier mais de façon moins performante à mes yeux car utilisant les .htaccess et des scripts php de configuration des headers. Cette approche est nécessaire dans le cas ou vous le maitrisé par votre hébergement.

Voici.fr : Optimisation d’un site eZ Publish 4 pour l’utilisation des caches web

Introduction au cache web

Documentation préalable

Si la gestion de cache web est pour vous une notion vague je vous invite à lire cette excellente documentation de Mark Nottingham en français nommée tutoriel de la mise en cache pour les auteurs Web et les webmestres. Vous y apprendrez tout sur les caches de navigateurs les caches de serveurs mandataires nommé proxy et reverses proxy ainsi que tout sur la configuration des en tête ou header du protocole HTTP nécessaire tel quel documenté dans la rfc 2616 section Caching in HTTP

La chaîne des caches.

Les caches web forme sont présent sur tout la chaîne de distribution entre vote site web et l’internaute. Cette chaîne peux être complexe ou très simple mais vous n’en maitrisez pas la structure. Imaginons le cas d’une chaîne complexe, quel sont les chainons ?

  1. Votre serveur web apache
  2. Un reverse proxy en amont de votre serveur sur la même architecture
  3. Un proxy chez le FAI dont dépendant la connexion de l’internaute
  4. Un second proxy en entré du réseau Lan de l’internaute (typique d’un réseau d’entreprise, école, université etc..)
  5. Le cache navigateur du logiciel client utilisé pour l’internaute pour consulté votre site.
  6. Et enfin l’internaute.

Entre votre serveur apache et l’internaute nous avons ici 4 étapes intermédiaires qui sont autant de cache sur la chaîne de distribution. Savoir tirer partie de ces caches est important pour économiser les ressources de votre hébergement et produire un site à l’affichage rapide et sans erreur (qualité indispensable au succès).

L’enjeux est important :

  • Les économies réalisables sont immenses. Dans l’exemple 4 services de cache peuvent répondre à l’internaute avant que votre propre serveur soient consulté.
  • Les dangers sont immenses. Dans l’exemple 4 services de cache peuvent répondre à l’internaute, avant votre propre serveur, une information obsolète que vous n’avez pas maitrisé.

 

Les acteurs: développeur et administrateur système LAMP[1]

La gestion des caches web pour une site eZ publish est le sujet d’exemple de la collaboration nécessaire entre les développeur ou responsable d’application et les responsable d’hébergement ou administrateur système.

Dans le cas ou vous ne maitrisez pas votre hébergement directement, quelque soit la raison, il est nécessaire de vous attacher les compétences de l’administrateur système en charge de votre serveur web.

 

Tâche à la charge du developpeur ou responsable d’application eZ Publish

Le développeur, ayant la haute main sur le code de son application, ce doit pour une parfaite configuration de la chaine des caches web de configurer son instance de eZ Publish pour cela. A cette fin il s’attachera à comprendre les paramètres de configuration de la section HTTPHeaderSettings du fichier site.ini[2]

Header HTTP par defaut de eZ publish

Voici tel que ce présente cette section HTTPHeaderSettings par défaut sans modification après une installation de eZ publish 4.2. Cette configuration par défaut désactive toute possibilité de cache web.

<span style="color: #66cc66;">[</span>HTTPHeaderSettings<span style="color: #66cc66;">]</span> <span style="color: #808080; font-style: italic;"># Enable/disable custom HTTP header data.</span> CustomHeader<span style="color: #66cc66;">=</span>disabled   <span style="color: #808080; font-style: italic;"># Only apply custom headers for anonymous users</span> OnlyForAnonymous<span style="color: #66cc66;">=</span>disabled   <span style="color: #808080; font-style: italic;"># Header list. Contains all HTTP which should override standard ones.</span> HeaderList<span style="color: #66cc66;">[</span><span style="color: #66cc66;">]</span> HeaderList<span style="color: #66cc66;">[</span><span style="color: #66cc66;">]</span><span style="color: #66cc66;">=</span>Cache<span style="color: #66cc66;">-</span>Control HeaderList<span style="color: #66cc66;">[</span><span style="color: #66cc66;">]</span><span style="color: #66cc66;">=</span>Pragma HeaderList<span style="color: #66cc66;">[</span><span style="color: #66cc66;">]</span><span style="color: #66cc66;">=</span>Expires   <span style="color: #808080; font-style: italic;"># Default Cache-Control header</span> <span style="color: #808080; font-style: italic;"># HTTP Headers are specified using the following format :</span> <span style="color: #808080; font-style: italic;"># &lt;HTTP header&gt;[&lt;eZ Publish path|module{/view}&gt;]=&lt;value&gt;{;&lt;depth&gt;{;&lt;level&gt;}}</span> <span style="color: #808080; font-style: italic;">#</span> <span style="color: #808080; font-style: italic;"># Example :</span> <span style="color: #808080; font-style: italic;"># # Set Pragma HTTP header to no-cache for whole site, except /news, and 2 levels below news.</span> <span style="color: #808080; font-style: italic;"># Pragma[]</span> <span style="color: #808080; font-style: italic;"># Pragma[/]=no-cache;2</span> <span style="color: #808080; font-style: italic;"># Pragma[/news]=;2;0</span>   <span style="color: #808080; font-style: italic;"># Cache-Control values are set directly</span> Cache<span style="color: #66cc66;">-</span>Control<span style="color: #66cc66;">[</span><span style="color: #66cc66;">]</span> Cache<span style="color: #66cc66;">-</span>Control<span style="color: #66cc66;">[</span><span style="color: #66cc66;">/</span><span style="color: #66cc66;">]</span><span style="color: #66cc66;">=</span>no<span style="color: #66cc66;">-</span>cache<span style="color: #66cc66;">,</span> must<span style="color: #66cc66;">-</span>revalidate   <span style="color: #808080; font-style: italic;"># Pragma values are set directly</span> Pragma<span style="color: #66cc66;">[</span><span style="color: #66cc66;">]</span> Pragma<span style="color: #66cc66;">[</span><span style="color: #66cc66;">/</span><span style="color: #66cc66;">]</span><span style="color: #66cc66;">=</span>no<span style="color: #66cc66;">-</span>cache   <span style="color: #808080; font-style: italic;"># Expires specifies time offset compared to current time</span> <span style="color: #808080; font-style: italic;"># Default expired 2 hours ago ( no caching )</span> Expires<span style="color: #66cc66;">[</span><span style="color: #66cc66;">]</span> Expires<span style="color: #66cc66;">[</span><span style="color: #66cc66;">/</span><span style="color: #66cc66;">]</span><span style="color: #66cc66;">=</span><span style="color: #cc66cc;">-7200</span>

Header HTTP de eZ publish pour Voici.fr

Sur Voici.fr nous avons fait les choix suivants:

  • Un cache à 5 minutes pour la home page afin d’être réactif tout en utilisant le cache web. Cette période courte offre la possibilité d’avoir une actualisation de site fréquente entre deux visites pour l’internaute tout en lissant le nombre de requêtes à nos serveur durant une même visite.
  • Pour les têtes de rubriques, flux rss et autre sitemap nous avons porté le temps de cache à 15 minutes
  • Pour le compte utilisateur et les fonctions communautaire nous avons configuré un temps de cache négatif en plus d’une instruction pragma no cache afin d’être actualisé à chaque affichage.

Nos paramètre sont donc les suivants (extrait):

<span style="color: #66cc66;">[</span>HTTPHeaderSettings<span style="color: #66cc66;">]</span> CustomHeader<span style="color: #66cc66;">=</span>enabled Cache<span style="color: #66cc66;">-</span>Control<span style="color: #66cc66;">[</span><span style="color: #66cc66;">]</span> Cache<span style="color: #66cc66;">-</span>Control<span style="color: #66cc66;">[</span><span style="color: #66cc66;">/</span><span style="color: #66cc66;">]</span><span style="color: #66cc66;">=</span><span style="color: #000000; font-weight: bold;">public</span><span style="color: #66cc66;">,</span>must<span style="color: #66cc66;">-</span>revalidate Cache<span style="color: #66cc66;">-</span>Control<span style="color: #66cc66;">[</span><span style="color: #66cc66;">/</span>potins<span style="color: #66cc66;">-</span>people<span style="color: #66cc66;">]</span><span style="color: #66cc66;">=</span><span style="color: #000000; font-weight: bold;">public</span><span style="color: #66cc66;">,</span>must<span style="color: #66cc66;">-</span>revalidate <span style="color: #66cc66;">...</span> Cache<span style="color: #66cc66;">-</span>Control<span style="color: #66cc66;">[</span><span style="color: #66cc66;">/</span>communaute<span style="color: #66cc66;">/</span>espace<span style="color: #66cc66;">-</span>prive<span style="color: #66cc66;">]</span><span style="color: #66cc66;">=</span>no<span style="color: #66cc66;">-</span>cache<span style="color: #66cc66;">,</span>must<span style="color: #66cc66;">-</span>revalidate Cache<span style="color: #66cc66;">-</span>Control<span style="color: #66cc66;">[</span><span style="color: #66cc66;">/</span>rss<span style="color: #66cc66;">]</span><span style="color: #66cc66;">=</span><span style="color: #000000; font-weight: bold;">public</span><span style="color: #66cc66;">,</span>must<span style="color: #66cc66;">-</span>revalidate Cache<span style="color: #66cc66;">-</span>Control<span style="color: #66cc66;">[</span><span style="color: #66cc66;">/</span>prismaatom<span style="color: #66cc66;">]</span><span style="color: #66cc66;">=</span><span style="color: #000000; font-weight: bold;">public</span><span style="color: #66cc66;">,</span>must<span style="color: #66cc66;">-</span>revalidate   Expires<span style="color: #66cc66;">[</span><span style="color: #66cc66;">]</span> Expires<span style="color: #66cc66;">[</span><span style="color: #66cc66;">/</span><span style="color: #66cc66;">]</span><span style="color: #66cc66;">=</span><span style="color: #cc66cc;">300</span> Expires<span style="color: #66cc66;">[</span><span style="color: #66cc66;">/</span>potins<span style="color: #66cc66;">-</span>people<span style="color: #66cc66;">]</span><span style="color: #66cc66;">=</span><span style="color: #cc66cc;">900</span> <span style="color: #66cc66;">...</span> Expires<span style="color: #66cc66;">[</span><span style="color: #66cc66;">/</span>communaute<span style="color: #66cc66;">/</span>espace<span style="color: #66cc66;">-</span>prive<span style="color: #66cc66;">]</span><span style="color: #66cc66;">=</span><span style="color: #cc66cc;">-7200</span> Expires<span style="color: #66cc66;">[</span><span style="color: #66cc66;">/</span>rss<span style="color: #66cc66;">]</span><span style="color: #66cc66;">=</span><span style="color: #cc66cc;">900</span> Expires<span style="color: #66cc66;">[</span><span style="color: #66cc66;">/</span>prismaatom<span style="color: #66cc66;">]</span><span style="color: #66cc66;">=</span><span style="color: #cc66cc;">900</span>   Pragma<span style="color: #66cc66;">[</span><span style="color: #66cc66;">]</span> Pragma<span style="color: #66cc66;">[</span><span style="color: #66cc66;">/</span><span style="color: #66cc66;">]</span><span style="color: #66cc66;">=</span> Pragma<span style="color: #66cc66;">[</span><span style="color: #66cc66;">/</span>potins<span style="color: #66cc66;">-</span>people<span style="color: #66cc66;">]</span><span style="color: #66cc66;">=</span> <span style="color: #66cc66;">...</span> Pragma<span style="color: #66cc66;">[</span><span style="color: #66cc66;">/</span>communaute<span style="color: #66cc66;">/</span>espace<span style="color: #66cc66;">-</span>prive<span style="color: #66cc66;">]</span><span style="color: #66cc66;">=</span>no<span style="color: #66cc66;">-</span>cache Pragma<span style="color: #66cc66;">[</span><span style="color: #66cc66;">/</span>rss<span style="color: #66cc66;">]</span><span style="color: #66cc66;">=</span> Pragma<span style="color: #66cc66;">[</span><span style="color: #66cc66;">/</span>prismaatom<span style="color: #66cc66;">]</span><span style="color: #66cc66;">=</span>

Hearder HTTP Home page Voici.fr

Header HTTP de la home page de Voici.fr

 

Taches a la charge du responsable d’hébergement ou administrateur système.

L’administrateur système n’est pas exempt de tache. En tant que responsable de l’hébergement et donc de la configuration serveur il doit mettre en oeuvre la couche LAMP. D’un point de vue système les besoins de eZ Publish sont important au point que la limite entre l’application et le système m’apparais bien flou, surtout si vous visez la haute performance.

Concernant apache il est nécessaire de le configurer avec un vhost comportant un certain nombre de paramètre précis. Entre autre l’utilisation du mod_rewrite est systèmatique avec eZ Publish. En effet tout appel de page doit ce faire au travers du index.php de l’application et uniquement par lui. Tout autre appel de ressources devant être appelé directement et de façon statique.

Le Vhost apache eZ Publish

De ce fait le vhost par défaut de eZ publish tel qu’il est recommandé dans la documentation de la version 4 ressemble à ceci :

<span style="color: #00007f;">NameVirtualHost</span> <span style="color: #ff0000;">128.39</span><span style="color: #ff0000;">.140</span><span style="color: #ff0000;">.28</span>   &lt;VirtualHost <span style="color: #ff0000;">128.39</span><span style="color: #ff0000;">.140</span><span style="color: #ff0000;">.28</span>&gt;     &lt;Directory /var/www/example&gt;         <span style="color: #00007f;">Options</span> <span style="color: #0000ff;">FollowSymLinks</span>         <span style="color: #00007f;">AllowOverride</span> <span style="color: #0000ff;">None</span>     &lt;/Directory&gt;       &lt;IfModule mod_php5.c&gt;         php_admin_flag safe_mode <span style="color: #0000ff;">Off</span>         php_admin_value register_globals    <span style="color: #ff0000;">0</span>         php_value magic_quotes_gpc  <span style="color: #ff0000;">0</span>         php_value magic_quotes_runtime  <span style="color: #ff0000;">0</span>         php_value allow_call_time_pass_reference <span style="color: #ff0000;">0</span>     &lt;/IfModule&gt;       <span style="color: #00007f;">DirectoryIndex</span> index.php       &lt;IfModule mod_rewrite.c&gt;         <span style="color: #00007f;">RewriteEngine</span> <span style="color: #0000ff;">On</span>         <span style="color: #00007f;">RewriteRule</span> content/treemenu/? /index_treemenu.php <span style="color: #66cc66;">[</span>L<span style="color: #66cc66;">]</span>         <span style="color: #00007f;">Rewriterule</span> ^/var/storage/.* - <span style="color: #66cc66;">[</span>L<span style="color: #66cc66;">]</span>         <span style="color: #00007f;">Rewriterule</span> ^/var/<span style="color: #66cc66;">[</span>^/<span style="color: #66cc66;">]</span>+/storage/.* - <span style="color: #66cc66;">[</span>L<span style="color: #66cc66;">]</span>         <span style="color: #00007f;">RewriteRule</span> ^/var/cache/texttoimage/.* - <span style="color: #66cc66;">[</span>L<span style="color: #66cc66;">]</span>         <span style="color: #00007f;">RewriteRule</span> ^/var/<span style="color: #66cc66;">[</span>^/<span style="color: #66cc66;">]</span>+/cache/texttoimage/.* - <span style="color: #66cc66;">[</span>L<span style="color: #66cc66;">]</span>         <span style="color: #00007f;">Rewriterule</span> ^/design/<span style="color: #66cc66;">[</span>^/<span style="color: #66cc66;">]</span>+/<span style="color: #66cc66;">(</span>stylesheets|images|javascript<span style="color: #66cc66;">)</span>/.* - <span style="color: #66cc66;">[</span>L<span style="color: #66cc66;">]</span>         <span style="color: #00007f;">Rewriterule</span> ^/share/icons/.* - <span style="color: #66cc66;">[</span>L<span style="color: #66cc66;">]</span>         <span style="color: #00007f;">Rewriterule</span> ^/extension/<span style="color: #66cc66;">[</span>^/<span style="color: #66cc66;">]</span>+/design/<span style="color: #66cc66;">[</span>^/<span style="color: #66cc66;">]</span>+/<span style="color: #66cc66;">(</span>stylesheets|images|javascripts?<span style="color: #66cc66;">)</span>/.* - <span style="color: #66cc66;">[</span>L<span style="color: #66cc66;">]</span>         <span style="color: #00007f;">Rewriterule</span> ^/packages/styles/.+/<span style="color: #66cc66;">(</span>stylesheets|images|javascript<span style="color: #66cc66;">)</span>/<span style="color: #66cc66;">[</span>^/<span style="color: #66cc66;">]</span>+/.* - <span style="color: #66cc66;">[</span>L<span style="color: #66cc66;">]</span>         <span style="color: #00007f;">RewriteRule</span> ^/packages/styles/.+/thumbnail/.* - <span style="color: #66cc66;">[</span>L<span style="color: #66cc66;">]</span>         <span style="color: #00007f;">RewriteRule</span> ^/favicon\.ico - <span style="color: #66cc66;">[</span>L<span style="color: #66cc66;">]</span>         <span style="color: #00007f;">RewriteRule</span> ^/robots\.txt - <span style="color: #66cc66;">[</span>L<span style="color: #66cc66;">]</span>         <span style="color: #adadad; font-style: italic;"># Uncomment the following lines when using popup style debug.</span>         <span style="color: #adadad; font-style: italic;"># RewriteRule ^/var/cache/debug\.html.* - [L]</span>         <span style="color: #adadad; font-style: italic;"># RewriteRule ^/var/[^/]+/cache/debug\.html.* - [L]</span>         <span style="color: #00007f;">RewriteRule</span> .* /index.php     &lt;/IfModule&gt;       <span style="color: #00007f;">DocumentRoot</span> /var/www/<span style="color: #00007f;">example</span>     <span style="color: #00007f;">ServerName</span> www.<span style="color: #00007f;">example</span>.com     <span style="color: #00007f;">ServerAlias</span> admin.<span style="color: #00007f;">example</span>.com &lt;/VirtualHost&gt;

Or si le mod_rewrite et les expression régulières ne vous sont pas trop inconnues vous constaterez que tout appel d’image, de css ou de javascript pour le design du site comme ceux du contenue publié bénéficie d’exclusion à la régle de redirection final vers le index.php.

Du fait de ces exclusion les image, css et javascript sont directement fournit par apache sans que les paramètres de configuration des headers du protocole http tel que configuré par le développeur ou responsable d’application ne soit pris en compte.

Le Vhost apache eZ Publish pour Voici.fr

Afin de configurer les headers du protocole HTTP en réponse à chaque requête image, css et javascript il est nécéssaire de mettre en oeuvre des mécanismes propre à apache. L’enjeux est d’importance au regard du poids de l’image dans la volume total d’une page web.

 

Mod_expires pour Voici.fr, ne jeter plus les images après usage

Afin de configurer les header HTTP avec les instructions de mise à cache nous avons utilisé le mod_expire en précisant pour chaque type mime un temps de vie. Dans le cas de notre site nous avons inclus le block suivant dans le vhost apache de voici.fr.

&lt;IfModule mod_expires.c&gt;                 <span style="color: #00007f;">ExpiresActive</span> <span style="color: #0000ff;">on</span>                   <span style="color: #00007f;">ExpiresByType</span> text/css <span style="color: #7f007f;">"access 1 days"</span>                 <span style="color: #00007f;">ExpiresByType</span> application/x-javascript <span style="color: #7f007f;">"access 1 days"</span>                 <span style="color: #00007f;">ExpiresByType</span> text/javascript <span style="color: #7f007f;">"access 1 days"</span>                 <span style="color: #00007f;">ExpiresByType</span> image/gif <span style="color: #7f007f;">"access 1 days"</span>                 <span style="color: #00007f;">ExpiresByType</span> image/jpeg <span style="color: #7f007f;">"access 1 days"</span>                 <span style="color: #00007f;">ExpiresByType</span> image/png <span style="color: #7f007f;">"access 1 days"</span>         &lt;/IfModule&gt;

Hearder HTTP logo Voici.fr

Header HTTP du logo de Voici.fr

 

Mod_gzip pour Voici.fr, le régime des css

Dans le cas de voici.fr nous recherchions à limiter la sollicitation de nos serveurs mais également bande passante utilisée, l’utilisation des headers HTTP est une solution efficace et performante.

Mais nous avons constaté un autre phénomène lié à la vie médiatique du site. La dynamique d’un site comme voici.fr impose des modifications de style, de présentation et de format en continue pour ce distingué de la concurrence répondre au demande SEO ou tout simplement faire « vivre » le site. Une telle vie trépidante à conduit à un hyper croissance des fichiers css.

A chaque nouvelle charte graphique ou mise à jour les fichiers css grossissaient de nouvelle instruction de design. De l’habillage original les têtes de rubrique on commencé à changé, puis le format des articles, plus les formats des videos etc.. D’un css A nous avions maintenant en plus A1 pour les têtes de rubrique, A2 pour les articles, A3 pour les vidéos et ainsi de suite. Chaque css comportant ça propre présentation de balise html courante, chaque webdesigner a ajouter sa patte sans toucher à ce qui a été réalisé précédemment. Un final, dans un tel cas, le fichier css peux atteindre des tailles respectable de l’ordre de 500Ko[3].

Notre solution le mod_gzip qui permet à apache avant de délivrer un fichier css de le zipper. Nous l’avons configuré de façon à ne travailler que sur des fichiers de taille pertinente (ni top gros ni trop petit). Nous l’avons configuré pour qu’il ne zippe que les fichiers texte du type mime css ou javascript.

&lt;IfModule mod_gzip.c&gt; 		mod_gzip_on Yes 		mod_gzip_can_negotiate Yes 		mod_gzip_static_suffix .gz 		<span style="color: #00007f;">AddEncoding</span> gzip .gz 		mod_gzip_update_static No 		mod_gzip_command_version <span style="color: #7f007f;">'/mod_gzip_status'</span> 		mod_gzip_temp_dir /tmp 		mod_gzip_keep_workfiles No 		mod_gzip_minimum_file_size <span style="color: #ff0000;">500</span> 		mod_gzip_maximum_file_size <span style="color: #ff0000;">1000000</span> 		mod_gzip_maximum_inmem_size <span style="color: #ff0000;">60000</span> 		mod_gzip_min_http <span style="color: #ff0000;">1000</span> 		mod_gzip_handle_methods GET POST   		mod_gzip_item_include mime ^text/css$ 		mod_gzip_item_include mime ^text/javascript$ 		mod_gzip_item_include mime ^application/x-javascript$   		mod_gzip_dechunk Yes 		mod_gzip_add_header_count Yes 		mod_gzip_send_vary Yes 	&lt;/IfModule&gt;

Poids Css voici.fr

Poids des css dans la home de Voici.fr

 

Conclusion en forme de scénario

Un internaute consultant le site voici.fr sollicitera nos serveurs pour l’intégralité des éléments de la première page appelée. Dès le seconde page les images et fichiers css du desing du site ne seront plus appelés, les instructions des hearder http donnant l’autorisation au navigateur de ce fournir dans son cache pour ces éléments la précisément, ceci durant 24 heures à partir de l’heure ou il à accédé pour la première fois à l’élément.
Concernant le code html constituant la page web il sera demandé à nos serveur à chaque nouvelle page. Mais si l’internaute retourne sur la home page durant les 5 minutes de temps de vie du cache le navigateur, tout comme pour les images, ce fournira sans son cache sans consulté les serveurs.
Passé 5 minutes toute nouvelle demande de la home page sur le navigateur généra un appel aux serveurs pour le code html, mais pas pour les images.

Il ne vous reste plus qu’a concevoir un architecture de reverse proxy en amont de vos serveurs pour garder en cache toute ces informations et éviter durant les périodes de temps de vie définir de sollicité vos serveurs.

Notes

[1] Linux Apache Mysql Php, pas de windows ici

[2] Attention a la logique de surcharge des fichier ini propre à eZ pulbish

[3] « Que ceux qui aiment Dreamweaver, les popups, les iframes, les Gifs, se retirent »