Mar
6
For the new website I've been developing and finishing up some "final touches" on the design to make the experience just a little bit better (before I can delve into the out-dated content after launch), one of the last things that was needed was to speed up the efficiency and download of assets - this included CSS and JavaScript files for the most part. I made the sIFR flash files as small as possible and my PNG images were compressed (and fixed for IE color rendering) using PNGGauntlet (which uses PNGOut). Until I can figure out ETags, a proper time for an Expires header, and GZip to work on CSS/JS files on our hosted server, this should suffice. It loads amazingly quick on my iPod Touch. 
I had a website bookmarked from a long time ago but never had a reason to use it until recently, it's called CompressorRator and throws out calls to JSMin, Dojo Shrinksafe, Dean Edward's Packer, and the YUI Compressor. By using a single service to compress your file multiple ways (each compressor has multiple options on how to compress) and showing the compression results (and giving them to you "on-click"), it saves a bunch of time. Word of warning though: Keep your browser page open while you're testing your compressed JS code - some compressors don't work with certain styles of JS, such as prototyping, and sIFR choked when compressed further on IE -- Firefox was fine...regardless, rather than swamping this site's server with multiple requests for the same compressed file, leave it open while you check your JS for compatibility and try other compressed results.
I also decided that to compress my CSS file, rather than do it all manually by hand, I'd use CSSDrive's CSS Compressor. It worked fairly well. One thing I didn't like about it is that it placed the open curly bracket, {, directly after the expression rather than leaving a space...I recall a rendering bug with some browser in some instances that required that space. Other than that, it worked fairly well. It didn't remove ALL newlines so code is still pretty readable, if you need further compression, writing a script to do the compression yourself might be the better solution, but this worked well in a pinch. Oh, it also doesn't detect long-hand CSS and convert it to use shortcut CSS instead (border: instead of border-style:, border-color: etc...), but what do you want for free?
I also decided that to compress my CSS file, rather than do it all manually by hand, I'd use CSSDrive's CSS Compressor. It worked fairly well. One thing I didn't like about it is that it placed the open curly bracket, {, directly after the expression rather than leaving a space...I recall a rendering bug with some browser in some instances that required that space. Other than that, it worked fairly well. It didn't remove ALL newlines so code is still pretty readable, if you need further compression, writing a script to do the compression yourself might be the better solution, but this worked well in a pinch. Oh, it also doesn't detect long-hand CSS and convert it to use shortcut CSS instead (border: instead of border-style:, border-color: etc...), but what do you want for free?
0 Trackbacks