Blackotine

Compression, cache et optimisation des fichiers javascript et css

Comment optimiser l’utilisation de JavaScript en termes de compression, cache, vitesse de chargement sans pour autant se retrouver avec des fichiers illisibles car, sans indentation, sans espaces voire obfusqués. (plusieurs méthodes existent)

Garder un fichier lisible est, selon moi, indispensable pour maintenir son application à jour, la modifier, la corriger et cela d’autant plus lorsqu’on travaille en équipe.

Une des solutions est de garder une version non compressée mais cela sous-entend de jongler sans cesse entre plusieurs versions, ce qui n’est définitivement pas pratique.

Combine

La solution qui me semble la plus intéressante est la classe PHP Combine, simple à utiliser, fiable, gérant la combinaison, la compression, la mise en cache et les dates d’expiration.

Tout d’abord, Combine concatène tous vos fichiers javascript et/ou css et les sert comme un gros fichier. Cela dans le but de réduire le nombre de requêtes au serveur.

Il gère également la compression en détectant si votre navigateur supporte la compression gzip, si oui, il gzip les données et renvoie la version compressée. En général, ceci permet de réduire considérablement la taille du fichier.

Si vous avez créé un répertoire cache, il va stocker la version gzip générée de vos données. Ainsi pour les futures demandes, il récupére simplement la version mise en cache zippé au lieu de générer le contenu de l’archive gzip à la volée. Ceci permet de réduire la charge du serveur.

Enfin, il vérifie les changements effectués. En effet, la date, l’heure et la taille du fichier mis en cache est rapidement vérifiée et, si il y a un changement, il sera automatiquement régénéré. Il gère donc parfaitement les en-têtes ce qui permet de mettre ces fichiers à jour et d’être certain que chacun des visiteurs du site se verra servir la même version du fichier.

Mise en place

L’utilisation est très simple.

Vous devez d’abord télécharger et configurer le script combine.php.

Par défaut, ce script regarde dans les répertoires racines javascript et css de votre site Web, mais si vous utilisez des répertoires différents, vous pouvez changer ces valeurs en haut de combine.php.
Transférer le fichier combine.php à la racine de votre site Web.

Deuxièmement, vous devez créer un répertoire « cache » accessible en écriture. Encore une fois, par défaut, ce script va chercher dans le répertoire racine du site Web, mais vous pouvez modifier cette valeur dans combine.php.

Enfin, il vous faut créer ou modifier un fichier .htaccess. Si vous n’avez pas de .htaccess vous pouvez le créer à la racine de votre site Web et ajouter les lignes suivantes.
Si vous avez déjà un .htaccess vous pouvez simplement ajouter les lignes suivantes dans le fichier :

RewriteEngine On
RewriteBase /
RewriteRule ^css/(.*\.css) /combine.php?type=css&files=$1
RewriteRule ^js/(.*\.js) /combine.php?type=javascript&files=$1

Pour finir, dans vos pages remplacez tous vos appels javascript de la forme :

<script src="js/mootools-1.2-core.js" type="text/javascript"></script>
<script src="js/mootools-1.2-more.js" type="text/javascript"></script>

par :

<script src="js/mootools-1.2-core.js,mootools-1.2-more.js" type="text/javascript"></script>

Idem pour le css, remplacer :

<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/layout.css" rel="stylesheet" type="text/css" media="screen" />

par :

<link href="css/reset.css,layout.css" rel="stylesheet" type="text/css" media="screen" />

Et voilà ! Plutôt simple et terriblement efficace.
Par contre, un petit désavantage, si vous avez l’habitude d’utiliser Firebug pour débugger, forcement, le numéro de ligne indiqué pour les propriétés css, par exemple, ne correspond à rien dans votre fichier local, puisque tous les fichiers css sont combinés.
Je pense que l’installation de cette solution doit donc intervenir en fin de production, juste avant livraison.

Autres solutions

Il existe une autre classe qui semble assez similaire, Minify!, elle permet en plus de la gestion du cache et de la compression, de supprimer les espaces blancs et les commentaires.

Si vous avez plus d’infos sur Minify ou sur d’autres solutions, n’hésitez pas !

• Publié dans : CSS, Javascript
• 6 commentaires »