Gzipping javascript for dummies

March 17, 2008 12:54 PM

Ok, so how exactly do I make gzipped javascript work?

Hello hello,

Ok. So I'm working on a new project and I'm using Scriptaculous/Prototype as my framework. Naturally the huge filesizes of these libraries have me a mite nervous (especially since I tend to be overly graphic heavy in my layouts anyhow.) So I was quite excited to see John-David Dalton's ultra-packed gzipped version of Scriptaculous+Prototype that clocks in at a mere 38k. But I know nothing of using gzipped javascripts and the google information I've seen seems contradictory/out of date/out of my league.

Assuming I lack access to apache server mods, what is the easiest way to implement these in a way that insures compatibility with Firefox 1.5+ IE 6+ and Safari 1.2+. It is my understanding that you can just use the .gz file like a regular ol' .js file and it'll work just fine with Firefox and IE6+ but apparently Safari needs a workaround. I've seen a few different approaches but they all seem to have their detractors (or or beyond my ability level to implement).

So, dear hive mind, what do you recommend?

posted by Jezztek to Computers & Internet (3 answers total)

Right in the readme it says: "To load gzipped files you need to go through a server side language such as PHP." and I'm assuming you don't have this. I'm actually dealing with the same issue right now with my own site, although I have complete control over apache. IMO, the best way to do what your hoping to accomplish (minimize overhead of javascript files transfering to your client and holding up the works) is thus:

If you can't edit your http.conf:
- Just use the compressed files included. No extra code needed. No overhead from gzip either.

If you can edit your http.conf:
- Do same as above
- Add support for ETags, and give your .js files nice long Expires headers. That way they will be lovingly cached, client-side.

If you're rooted on the box:
- Same as above.
- Serve everything with lighttpd. I moved all my media to lighttpd on my photo sharing site, and the speed difference was noticeable and totally awesome. It's a lot easier to set up caching and etags on lighttpd too.

Check out yslow too, and be sure to include your javascript at the bottom of the page if you can.
posted by Mach5 at 1:15 PM on March 17, 2008

With my server admin hat on, I've never seen it done in a way that didn't involve the webserver. The client will pass a "Content-Encoding: gzip" header if it can deal with gzip-compressed documents, and then the server will respond appropriately. I'd contend that this is the way you should do it. But...

Using your method (with which I'm not familiar), I suppose you could write a bit of JavaScript that detected the user agent: if they use IE6+ or Firefox, have them load the compressed JavaScript file. Else, have them load a non-compressed one. That said, I don't do much with JavaScript, so I can't tell you the exact code, nor can I confirm that it actually works: I'm just going by what you've said that it does work in IE and Firefox.

Some people would get non-compressed JavaScript with this method, but, well, at least a lot of them will.
posted by fogster at 1:25 PM on March 17, 2008

Response by poster: Well funny thing here, So I was trying to find some of the other pages that describe the method I was talking about here and I stumbled upon exactly what I needed (at least according to my early tests here).

Ok so for anyone else with similar questions here is what you do:

Make two copies of your javascript the regular version then the gzipped version and change the gzipped extension to .jgz.

In my case I have protoculous.js and protoculous.jgz sitting in the same folder.

Then include them in your webpage like so:

<script src="http://www.yourwebpage.com/js/protoculous.jgz" type="text/javascript"></script>

finally add the following code to your .htaccess file:

#########

RewriteEngine on
RewriteCond %{HTTP_USER_AGENT} “.*Safari.*” [OR]
RewriteCond %{HTTP:Accept-Encoding} !gzip
RewriteRule (.*)\.jgz$ $1\.js [L]

AddType “text/javascript;charset=UTF-8" .jgz
AddEncoding gzip .jgz

#########

I checked with Firefox2 IE6 and Safari 1.2 and the first two got fed the 38k version and Safari got fed the 150k version (but most importantly everyone got a version that worked, and it was easy as pie to implement)

Thanks much!
posted by Jezztek at 1:58 PM on March 17, 2008