Magazine High tech

Performance web: compression des frontaux JS/CSS

Publié le 27 juin 2011 par Pixelboy

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

Performance web: compression des frontaux JS/CSS
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.


Vous pourriez être intéressé par :

Retour à La Une de Logo Paperblog

Ces articles peuvent vous intéresser :

  • Template Css

    Template

    20 modèles | CSS | XHTML | HTML | PSD | 211MB Téécharger http://hotfile.com/dl/90246088/506c7cc/Css_template_CD1.part1.rar.html... Lire la suite

    Par  Wklog
    HIGH TECH, INFORMATIQUE, INTERNET
  • 20 Beautiful High Quality CSS/XHTML Website Templates

    Beautiful High Quality CSS/XHTML Website Templates

    Beautiful High Quality CSS/XHTML Website Templates - Thanks to all web designers and developers from all over the world who freely distributed their high-qualit... Lire la suite

    Par  Wklog
    HIGH TECH, INFORMATIQUE, INTERNET
  • 10 CSS Tools & Generators For Developer & Designer

    Tools Generators Developer Designer

    CSS Tools Generators For Developer amp ; Designer - Writing CSS codes from the scratch is really a tiresome and time-consuming task that can freak out a CSS... Lire la suite

    Par  Wklog
    HIGH TECH, INFORMATIQUE, INTERNET
  • Premiers pas en CSS et HTML

    Premiers HTML

    Choisissez la simplicité et l'élégance des CSS pour créer vos sites web avec style et panache ! Changez sans peine la charte graphique de votre site ; Apprenez ... Lire la suite

    Par  Wklog
    HIGH TECH, INFORMATIQUE, INTERNET
  • Premier atelier JS Guru: retour(s) à chaud

    En une centaine de slides, et quelques heures, notre speaker nous à rafraichi la mémoire sur des sujets vraiment modernes/avant-gardistes comme on les aime. Lire la suite

    Par  Pixelboy
    HIGH TECH, INTERNET
  • CSS et emailing

    emailing

    Les newsletters sont un excellent moyen d'augmenter les ventes et de fidéliser la clientèle. Mais il est souvent difficile de les concevoir pour qu'elles... Lire la suite

    Par  Seomix
    HIGH TECH, INFORMATIQUE, INTERNET, PROGRAMMATION
  • Menus dynamiques en CSS et Jquery

    Menus dynamiques Jquery

    CSS est la partie la plus importante dans la conception web et Jquery, la célèbre librairie JavaScript, permet de rendre le web plus dynamique. Lire la suite

    Par  Quan Tran-Meyer
    HIGH TECH, INFORMATIQUE

A propos de l’auteur


Pixelboy 70 partages Voir son profil
Voir son blog

l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte

Magazines