Sur certains site, ils n’est pas rare de constater 3, 4 ou plus encore d’appels à des fichiers CSS ou Javascript. En soit rien d’extraordinaire certes, mais il faut savoir que sur une requête de 0,5 seconde on en utilise (j’exagère à peine) 0,1 pour télécharger le fichier. Le reste est consommé pour de simples établissements de connexion et communication client-serveur. La question est : comment optimiser tout ça pour éviter les pertes?
Préparation
En partant de ce constat, on peut vite imaginer tout l’intérêt de concaténer ses fichiers en un seul et unique appel. Le bonus, c’est de minifier les fichiers, c’est à dire supprimer tous les espaces et sauts de lignes superflus qui sont autant de données inutiles que l’on télécharge. C’est à ça que sert minify, une bibliothèque php qui fait tout le job, sans vous obliger à tout faire à la main.
>>> Site officiel
Il faut commencer par télécharger la bibliotèque. Vous vous retrouvez avec un zip à décompresser, puis avec l’arborescence suivante :
- .gitignore
- HISTORY.txt
- LICENSE.txt
- MIN.txt
- README.txt
- UPGRADING.txt
- min/
- min_extras/
- min_unit_tests/
Le répertoire min est celui qui vous intéresse. L’exercice est simple : ouvrez en local votre serveur favori (wamp, mamp, easyphp…) et accédez à ce répertoire. vous êtes automatiquement redirigé sur le builder : http://localhost/minify/min/builder/
Là, il vous suffit de renseigner les chemins vers tous les fichier CSS par exemple. C’est à dire qu’il est inutile de tous les rassembler au même endroit :
En cliquant sur le bouton « Update », vous vous retrouvez avec le seul et unique appel à faire pour charger toutes vos feuilles de style. Répéter l’opération avec les fichiers javascript.
Cet appel fait en fait référence à un script de la bibliothèque, et lui envoie le chemin vers chacun de vos fichiers à charger. Elle va ensuite, toute seule, les traiter pour arriver à vos fins : concaténer et minifier tout ce beau monde.
Mise à feu
Voilà, vous avez tout ce qu’il vous faut. Vous aurez noté que dans l’url d’appel, on fait un lien vers des choses qui se trouvent dans le répertoire min/. C’est normal, et ça m’amène vers la prochaine étape : uploadez ce répertoire, tel que vous l’avez trouvé, à la racine de votre site.
Si vous voulez jouer sur les arborescences, veillez à modifier l’url générée en conséquence pour que minify retrouve ses billes. La suite est simple : repmplacez tous vos appels au CSS avec le code généré, et idem pour les appels aux JS.
Par exemple :
<link type= »text/css » rel= »stylesheet » href= »/min/f=styles/nivo-slider.css,themes/default/default.css,styles/cdsc.css,Caviar-Dreams-fontfacekit/stylesheet.css » />
Et en fin de page pour les javascript (principe d’optimisation standard) :
<script type= »text/javascript » src= »/min/b=js&f=jquery.min.js,jquery.animate-colors-min.js,jquery-textfill.js,custom.js,jquery.nivo.slider.pack.js,jquery.easing.1.3.js,jquery.vaccordion.js »></script>
C’est tout. Si si! Vous venez de diviser par 2 ou 3 le temps de chargement de vos pages (sur un cas particulièrement chargé, je suis passé de 5s de chargement à 0,5).
Bonus
Comme l’équipe qui a créé cette bibliothèque fait bien les choses, elle vous met à disposition ceci :
- WordPress: WP-Minify
- WordPress: W3 Total Cache
- Zend Framework: View helpers for links/scripts
- Yii: minscript Extension
Nous parlerons bientôt de Yii d’ailleurs, mais ça c’est une autre histoire…