Websourcing.fr » Actualités, Web, Logiciels et Fun

Minify, combinez, nettoyez, compressez et cachez vos scripts JS et CSS pour un site plus rapide

Tags: CSS, Javascript, Optimisation, Web, Webdesign
Posté dans Billets, Logiciels & Webwares, Webworker par Lionel Roux le 22 mar 2009

J’ai déjà eu l’occasion d’exposer plusieurs méthodes permettant d’optimiser le chargement des pages d’un site Web.

Il est ainsi possible de d’utiliser un CDN pour servir ses scripts (voir Optimisez le temps de chargement de vos pages en utilisant l’infrastructure de Google) ou de nettoyer ses scripts et CSS en supprimant les caractères non nécessaires (voir Améliorer les performances d’un site en compressant ses CSS à la volée)

Minify est un projet Open Source qui fait tout cela, et même plus.
Il s’agit d’un projet développé en PHP5 qui permet de combiner plusieurs fichiers JS et /ou CSS en un seul, limitant de ce fait le nombre de requêtes HTTP nécessaires.

D’autre part, Minify supprime à la volé les caractères non indispensables comme les espaces et les sauts de lignes, commentaires). Ainsi le fichier servi est beaucoup plus petit que l’original. On constate souvent un rapport de 1 à 8 (JQuery fait 120 Ko non compressé et seulement 19 Ko ainsi compressé). C’est autant de bande passante sauvée.

De plus, le fichier résultant est zippé en utilisant GZip. Si votre serveur supporte ce protocole et la navigateur aussi, le tout sera encore plus optimisé en taille.

Enfin, comme vos scripts et feuilles de styles CSS ne changent pas tous les jours, une mise en cache de l’ensemble est opérée grâce à l’ajout d’entêtes spécifiques. Le fichier n’est envoyé que lorsque des changements sont déclarés (304).

Vous l’aurez compris, Minify c’est un peu le couteau suisse des ressources Web JS et CSS.

L’installation n’est pas compliquée et assez bien expliquée sur le site et sur le Wiki du projet. Le tout est assisté par des interfaces graphiques et des formulaires qu’il suffit de bien renseigner.

Il existe même un bookmarklet pour réaliser cette opération automatiquement.

Ce que j’aime le plus, c’est la possibilité de créer des groupes de ressources et ainsi servir des combinaisons de fichiers différentes en fonction de la page. Ainsi si votre « home » affiche un slideshow propulsé par un script particulier, vous ne serez pas obligé de l’inclure pour toutes les pages.

Minify::serve('Groups', array(
    'groups' => array(
        'js1' => array('//js/yourFile1.js', '//js/yourFile2.js')
        ,'js2' => array('//js/yourFile1.js', '//js/yourFile3.js')
        ,'jQuery' => array('//js/jquery-1.2.6.js')
        ,'css' => array('//css/layout.css', '//css/fonts.css')
    )
));

 
Attention toutefois à ne pas en abuser, car comme Minify requiert du traitement coté serveur, il se peut que la charge soit conséquente sur des sites à très très haut trafic et dans ce cas, le gain pourrait être annihilé.

Si j’ai le temps, j’essaierais de faire un tutoriel sur l’intégration de Minify dans WordPress.

Téléchargez Minify

Comment installer Minify?