Performance web: compression des frontaux JS/CSS

Comme par enchantement, une illumination à touché il y a quelques mois Google : plus un site web va vite, mieux il se charge, plus les utilisateurs sont contents et trouvent ce qu'il cherchent. La vitesse d'un site est donc devenu l'un des facteurs de l'équation complexe que Google applique pour classer les sites dans ses résultats de recherche. Ça, c'est un fait.

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:

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.

https://github.com/mattkirman/YUI-Compressor-tmbundle

Online JavaScript/CSS Compression Using YUI Compressor

Tout est dans le titre. Pour les gros gros gros fainéants, sans même installer de soft, de bundle, ou le YUI compressor lui même en local, vous pouvez passer directement par http://refresh-sf.com/yui

Avantage non négligeable, le site propose de concaténer différents fichiers en un seul.

PHP-YUI-Compressor

Le site cité précédemment est le résultat de l'utilisation d'une classe php toute bête, et disponible sur Github.

Cela permettra d'ajouter le YUI compressor directement dans votre application, pour une compression des assets lors d'un cache warmup par exemple, ou, pourquoi pas, à la volée (encore que je ne sois pas très sûre que cette dèrniere solution aille de paire avec la recherche de performances, mais bon ...).

Vous devrez toutefois disposer du compressor en local pour faire tourner cette classe (logique me direz-vous).

https://github.com/gpbmike/PHP-YUI-Compressor

Delivery, drag, drop, fini...

Delivery est une alternative intéressante aux précédentes solutions mentionnées en ce sens qu'elle intègre le YUI compressor, certes, mais aussi Google Closure. Vous avez ainsi le choix des armes.

Et, détail agréable, si vous vous fichez du moteur du moment que les résultats sont là, vous avez la possibilité de laisser Delivery compresser avec les 2 moteurs, comparer le résultats (i.e la meilleure compression) et conserver le fichier créé le plus léger. Excellente idée.

Delivery est simplissime de fonctionnement : glissez-déposez les fichiers à compresser sur l'icone dans votre dock osx, et c'est fini.

Delivery est gratuit.

http://www.matmartinez.net/delivery/

Solution miracle ?

Non. Dans le cas de petites applications, les applications proposées ci-dessus conviendront parfaitement. Mais s'il s'agi d'industrialiser votre workflow, tout en gardant vos assets les plus petits possible, la solution idéale sera celle que vous déterminerez. Il y a autant de cas partuculiers que d'applications. Mais, si vous envisagez ou disposez déja d'une solution de déploiement automatisée, je ne peux que vous conseiller d'installer de ce pas UglifyJS et YUI Compressor, pour que votre deployer y passe vos assets avant déploiement.

Et vous, quelles solutions/techniques utilisez-vous pour rendre vos CSS et JS propres et dignes de vos visiteurs ?

Tags: