Performance web: compression des frontaux JS/CSS

Alors concrètement, pour améliorer les performance de vos sites, il n’existe pas de formule magique; beaucoup d’huile de coudes, quelques tuyaux venant des pros (Yahoo! et Google en tête) et du temps. Alors, lorsque comme moi vous êtes confrontés à des problemes de performance sur des applications assez massives, il faut s’armer des bons outils et des bonnes techniques pour perdre le moins de temps possible et rendre vos améliorations pérennes.

Travaillant sur OSX, je ne m’attarderai pas sur les solutions software que je ne peux/veux pas tester (mes VM XP et Seven ne sont pas là pour ça).

UglifyJS, rend votre js plus laid, certes …

Sous un nom un peu étrange, ce cache le poids lourds de la compression JS. UglifyJS compresse mieux que Google Closure Compiler ou YUI compressor, et plus vite:

Library Orig. size UglifyJS YUI GCL

DynarchLIB 636896 241441 246452 (+5011) 240439 (-1002) (buggy)

jQuery 163855 72006 79702 (+7696) 71858 (-148)

UglifyJS est est un paquet node.js. Son installation requiert donc un minimum de savoir faire en CLI.

Mais les résultats sont impressionnants. Si aucune version GUI pour votre os préféré n’existe, vous pouvez toutefois vous rabattre sur la version web, afin d’avoir un apercu des qualités de ce compresseur. Un regret toutefois : vous serez obligé de passer par une seconde solution pour vos CSS.

Le repo Github d’UglifyJS est très documenté, et vous pouvez vous rendre sur le site de l’auteur pour tester cet incroyable compileur.

Puisque UglifyJS est vraiment une solution très intéressante, vous serez peut etre ravis de savoir qu’un bundle Textmate existe également pour vous permettre d’en faire usage dans votre éditeur préféré. Cela ne vous empêchera pas de devoir installer node.js et le paquet néanmoins.

YUI Compressor, le doyen

Si, à la base, le YUI Compressor est l’une des applications les plus appréciées lorsqu’il s’agit de compresser les fichiers JS et CSS, il est parfois ennuyeux de devoir passer par la CLI pour lui faire faire ses petites affaires. Parmi les solutions les plus sexy pour utiliser le YUI compressor sans une ligne de commande, j’ai retenu:

Smaller, de Chen Luo

Simple, profitant de ce look and feel Mac, Smaller est une petite application payante qu’il serait dommage de ne pas tester si vous souhaitez compresser CSS et JS en une seule passe, tout en gardant la main sur le résultat à obtenir.

Ainsi, un simple glisser-déposer de fichier(s) ou de dossier(s), et le tour est joué. La rédaction de cet article m’a permis d’obtenir une license gratuite, mais sachez toutefois que Smaller vous coutera 20$. Ce qui me semble un peu excessif pour une GUI.

Toutefois, les résultats sont là. Pour de petits projets, ou la concaténation de fichiers n’est pas requise, c’est un bel outil. Il ne fait pas le café, ni la vaisselle, il fait ce qu’on lui demande. Point.

http://smallerapp.com/

YUI Compressor Texmate bundle

Mac + développement web = Textmate (ce n’est pas mon cas, mais bien une généralité basée sur mes rencontres et expériences). Aussi, quelle meilleure idée que de pouvoir lancer la compression des assets d’un projet directement dans son éditeur préféré, via un simple raccourci clavier ? C’est ce que ce bundle gratuit et open source offre comme possibilité.

Moins ‘straight forward’ que Smaller (qui est une application a part entière), vous allez devoir perdre … 15 secondes pour configurer le bundle

Et, à la différence de smaller, vous pourrez vous même mettre à jour le YUI compressor le jour ou celui-ci évolue.

Disponible sur GitHub, ce bundle est un must have pour tous les textmate afficionados.