Comment compresser le Javascript et les CSS de votre site
Si vous aussi vous êtes maniaques comme moi au sujet de la compression des fichiers (images, pages, cache…) voici un autre moyen de gagner un peu de bande passante. Avec cette liste vous pourrez compresser vos fichiers Javascript et CSS. Certains scripts peuvent facilement diviser la taille des fichiers par 2 voire 3.
- packer de dean edwards : il s’agit d’un des scripts les plus couramment utilisés ; le site propose un compresseur et obfuscateur de JavaScript. Le site Javascript Compressor utilise cet algorithme et permet d’optimiser son code online.
- Packer JavaScript en PHP : vous pourrez utiliser la compression directement avec un serveur Apache et PHP. Au passage vous trouverez sur ce site la traduction des célèbres extensions Webdeveloper et GoogleBar de Firefox.
- clean CSS : cet outil comme CSS optimiser permet d’optimiser le code CSS. Il existe plusieurs paramètres comme la lisibilité du code, le maintient ou non des propriétés non valides…
- The Definitive Post on Gzipping your CSS : Une méthode pour compresser vos fichiers avec la methode GZip directement avec PHP.
- Premailer web : un autre outil qui ne sert pas à compresser du code CSS mais plutôt à insérer le code CSS directement dans le body du code HTML. Cet outil s’avère très utile pour la création d’emailing avec les CSS incorporés.
Si vous avez trouvé cet article intéressant, abonnez-vous gratuitement au flux RSS d'eclaireur ou bien par email.
25 mars 2008
À noter que Packer est bien pour compresser en taille mais prend davantage de temps à décompresser côté client (y’a 2 évaluations de code au lieu d’une).
Au final la solution idéale c’est minifier+gzipper (mod_gzip ou mod_deflate avec Apache) : taille identique voire plus petite et décompression effectuée avant l’interprétation JavaScript.
À ce niveau y’a YUI Compressor qui minifie+gzip CSS et JS.
25 mars 2008
Merci Tom pour ta pierre à l’édifice, surtout qu’avant de rédiger ce petit article je ne m’étais pas trop intéressé à la compression de fichiers JS.
Sinon j’ai vu qu’un livre High Performance Web Sites parlait de la compression shrinksafe. Il parait qu’elle fonctionne bien et qu’elle est très efficace.
25 mars 2008
J’imagine que ce bouquin est bien … d’ailleurs je le rajoute à ma « ToBuy List »
. J’ai lu « Building Scalable Website » et il est fortement enrichissant.
À lire : http://www.julienlecomte.net/blog/2007/08/13/ + http://ejohn.org/blog/library-loading-speed/ et je pense qu’on a fait le tour de la compréhension du sujet
25 mars 2008
Merci pour le toit cette fois-ci, en effet les 2 liens montrent à quel point YUI compressor est le meilleur compresseur. La différence avec les autres n’est pas énorme non plus (de quelques kilos au final pour un fichier JS de 60ko). Tout ceci est obtenu après avoir utilisé la compression GZip.
Par contre si on n’utilise pas la compression GZip le mieux est d’utiliser Packer, la solution de Dean Edwards.
Le bémol à tout cela, c’est qu’il faut tout tester car il se peut que des fonctions Javascript ne fonctionnent plus après la compression.
25 mars 2008
Packer :
- non si le fichier est inférieur à 10Ko (on ne gagne rien, mieux vaut juste minifier)
- non si on a accès à GZIP ou Deflate
- oui pour le reste
La minification et le packing sont soumis au même problème mais en général quand on suit une bonne convention de codage il n’y a pas de soucis : utiliser les accolades (même pour les if() simples en 1 ligne), utiliser les points-virgule … et de tête c’est tout ce que je vois.
Ce qui intéressant en tous cas avec YUI Compressor et JSCompressor c’est la possibilité d’utiliser les outils en ligne de commande : excellent à brancher sur du SVN pour compresser après chaque commit par exemple.
21 février 2009
Il y a aussi packtag pour java qui permet de faire cela automatiquement sur toutes les JS et CSS d’un site.