CSS/JS GZip Compression with Asp.Net

Question

I am currently on a hosted Virtual Server, I want to enable GZip compression for my Asp.Net 3.5 site, how do I go about starting?

I have tried using 'packed' JS files, but they don't work, I am assuming it's because they are not handled correctly...?

Answer 1

GZIP should be handled by IIS, what version of IIS are you running?

The client is responsible for asking the server for a GZiped version. The server will be looking for two things, the request is http 1.1, and a header of Accept-Encoding: gzip. An easy way to look for these headers is to use firebug

IIS6 - GZip can be enabled with the iis snap-in. Microsofts MSDN Topic On Gzip With IIS6

IIS7 - GZip can be enabled with the web.config using httpCompression xml tag Nick Berardi's Getting IIS 7 to Compress JavaScript

By minifying and packing javascript files, your decreasing the total size of JavaScript by removing whitespace and shortening your variables names.

Answer 2

My preferred way of doing this would be to using a compression tool like YUI Compressor and make it part of the build process (After minifying, the compression ratio won’t be so high. Or you can use both. Point being that you shouldn’t miss the greater performance problem given below).

One of the main problems with compression by IIS is that it doesn’t pack all the JS/CSS files into a single file. So if your site has 7 JS files and 20 CSS (surprisingly this is very common) it will take 27 HTTP round trip to get your data. Writing a HTTP handler to do this is a good idea for people with shared hosting.

A simple build algo would be to have a make file in the JS/CSS root directory

If(build.config == release) {
Add your js file in order to the make files.
    e.g. jQuery.js jQuery.form.js  jQuery.container.js custom.js 
Split and pass it as params to YUI
Compress
O/P to site.js 
Delete all the above files.
}

In release mode you page master should only refer site.js

Edit: Here's a link to get YUI and nant integrated.
Edit: Justin Etheredge has released an awesome tool to combine and compress css/js file called SquishIt.