Améliorer les performances d’un site en compressant ses CSS à la volée

Voici une petite astuce trouvée par hasard sur le net. Je ne sais pas si elle est efficace mais elle vaut le coup d’être testée.

On sait que pour améliorer les temps de chargement d’un site, l’une des technique est de compresser les pages, les CSS et les scripts.

La technique consiste majoritairement à supprimer les espaces et saut à la ligne inutiles, qui surchargent le « code ».
Le problème est que si on fait ce genre d’opération les scripts et feuilles CSS deviennent illisibles. Pour changer rapidement la moindre virgule, cela devient le parcours du combattant.

A moins d’être super organisé et d’avoir toujours sous le coude une version non compressée et synchronisée avec celle de l’environnement de production, les outils et webwares proposés habituellement (CSSCleaner ou CleanCSS par exemple) ne sont donc pas des alternatives viables.

Le petit bout de code PHP qui suit compresse (moins de données transmises) plusieurs fichiers CSS et les réunis en un seul fichier (moins de hits HTTP) contentant une unique ligne de texte (parsing plus rapide). Le gros avantage est qu’il le fait à la volée ce qui permet de garder ses fichiers correctement formatés et lisibles.

< ?php
  header('Content-type: text/css');
  ob_start("compress");
  function compress($buffer) {
    /* remove comments */
    $buffer = preg_replace('!/*&#91;^*&#93;**+(&#91;^/&#93;&#91;^*&#93;**+)*/!', '', $buffer);
    /* remove tabs, spaces, newlines, etc. */
    $buffer = str_replace(array("rn", "r", "n", "t", '  ', '    ', '    '), '', $buffer);
    return $buffer;
  }

  /* css  */
  include('master.css');
  include('typography.css');
  include('grid.css');
  include('print.css');
  include('handheld.css');

  ob_end_flush();
?>

Ce genre de technique est utilisé par Google et Microsoft notamment. C’est que ca doit être efficace.

Pour aller plus loin, il est aussi possible de construire une sorte de « script de build » pour éviter de refaire l’opération systématiquement.
En ajoutant des directives au header, on peut contrôler la manière dont le fichier est servi.

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

Reste maintenant à savoir si faire servir des fichiers par PHP n’est pas préjudiciable.
Affaire à suivre donc…

Utilisez vous des techniques similaires? Ou des choses complètement différentes ?

Crédits: R. Weber