I am in an odd situation, maybe you can relate. I cannot easily serve dynamic content based on individual user/browser preferences. For me, its because my site is behind a somewhat dumb but effective caching proxy. However, this could as easily be applicable if you were hosting content on a site that only allowed static HTML content.
I’m not a big fan of making extra http requests so I’ve also implemented a simple cookie method of remembering the results of the test.
You can [see the code in action](http://code.bearfruit.org/~matt/gzip/test.html). This is an extremely simplified example.
Is there a better way? I’d love to hear how this can be improved.
Is this worth it? I think so. For example:
![graph – data is below](http://www.bearfruit.org/files/gzip-compression-graph.png)
* __Mootools complete library:__ minified = 45k, packed = 31k, minified and gzipped = 14k.
* __Jquery complete library:__ minified = 52k, packed = 29k, minified and gzipped = 16k.
* __Blueprint css framework:__ (mine is customized with some plugins) minified = 7.3k, minified and gzipped = 2.3k.
There’s one more benefit besides the download size. If you’ve ever tried debugging your site that used packed or minified js or css files, it can be quite a chore. With gzip compression you can now serve relatively easy to read and troubleshoot js files. The mootools package with only the docs stripped weighs in at 61k. However gzipped it’s 16k, only 2k larger than the minified+gzipped version. Now, when you click an error or single step through your code in firebug you can more easily see whats going on.
Here’s how you use it. Create gzipped versions of your files whose filename differs only in that it has a .gz at the end. So, *MyWonderfulLibrary.js* would be complimented by *MyWonderfulLibrary.js.gz*. Note that it is not essential to have the same content for both files, though I’d expect you would want the same in most cases. The gzip_test.js file looks for a gzip_test.js.gz file which you can [download from the test site](http://code.bearfruit.org/~matt/gzip/test.html), along with the rest of the code.
The code to use looks like this:
## I’d really like to hear ideas on better ways to do this
Leave me a comment to tell me how off-base I am and what I can do to improve this. Please.