So Justin Etheredge has graced us all with a new JavaScript and CSS Squisher and blogged about it today called SquishIt. I have been working with Combres a OSS of very similar facilities and appreciating it for several months now yet was stoked to see someone else throw down an alternative.I love options!

Justin outlines his solution very nicely on his blog here and the code can be found on GitHub here. On first review, I was very stoked to see a much more simplistic implementation and set up requirements for SquishIt. Being a little OCD and a little lazy at the same time, it was seriously a cinch, no web config changes, no Global file changes. Me likes!

At this point I was very giddy! But I wait to drink the Kool-Aid, usually, until I can prove it better!!! So, I did what any good spirited DEV HEAD would do and performed a little benchmark between the two!

Real basic! Nothing fancy… I wanted to concentrate on payload primarily.
Create 3 new MVC2 Web application in Visual Studio 2010, default templates; Base example, Combres example, and a SquishIt example.
I then add a group of CSS and JavaScript files to each project so the resources were all the same.

files
So... The next step was getting the base line solution.

SiteMaster

Ugly…. Nonetheless, fired up the Slug Bug Machine (Debugger…) and let YSlow lay into it via Firefox. Here was the payload…

base
As you can see, 8 files, 124KB total size, and loaded in about 3.26 seconds. So this is what we were driving against…

Moving on, I tweaked up the page for a SquishIt example as I wanted to get my hands dirty first! I followed the example, default setup. Notice how clean and is with some convenient chaining in place.

squishit_code
And way we went! I have to admit I was a little bummed at the results...

SquishIt_
We got our CSS in one file, and our JavaScript in another. This was good, but wasn't really impressed with the compression... Only dropped 12 KB off the total payload and gained a clean second off of the page load time, bonus!

Last but not least was Combres. The Combres set up has a few steps to it, a real nice article on CodeProject.com here outlining everything real nice. Combres uses an HttpModule to handle compression and combining the file files, cleaver…

You need to make additions to the config file, update the Global.asax Application_Start method, and update the page you wish to use the utility, in our case our master page.

Combres_code
This is very clean... I like that! Any the compression… Well… Out of the box, is very nice! Dropped 65% of the payload on the cutting floor!!! All the way down to 43.8 KB!

Combres_load
So, out of the box, Combres beats down on new comer SquishIt in a major way! But... And that is a MAJOR but……  These tools operate in two very separate ways. SquishIt actually creates a physical file on the I/O, combined and minified nicely!!! Sure, security issues my arise for some shops when implementing this solution, it is nonetheless a nice feature! Where Combres is a module, and caches the minificated bits to memory. It is important to look under the hood of each of these solutions and make a decision based on your requirements. Both are open source, and very extensible if you ask me! You can even plug-in your own minifier of choice as well…

 

Requests

Total Size

Time

Base

8

124KB

3.26s

SquishIt

3

112.5KB

2.27s

Combres

3

43.8KB

2.27s

If you aren’t minifying and combining your CSS & JavaScript files, I highly recommend it! It reduces requests to your server, reduces payload over the wire, and finally will increase your page loads for your users!

Enjoy!