gzip/deflate – a (fairly) quick how-to for XAMPP

Posted by Phil on May 20, 2008 under Web Development | 6 Comments to Read

I’ve spent a little while trying to figure out the difference between using “deflate” and “gzip” for web-compression.  What I’ve finally ended up with is they are pretty much the same thing (well they use different compression methods, but seriously, they do just about the same thing).  I also noticed that if you are running Apache 1.3 your compression options pretty much are gzip, and if you are running Apache 2 you pretty much only have deflate.

I searched all over for someone who knew how to set this up so I could have it on my local dev box (I’m currently running one of the XAMPP packages).  I didn’t find the answer anywhere, what I did find was plenty of people telling me to create a .htaccess file and everything should be good.  Or links to the Apache documentation on using deflate (which while helpful, is pretty much a standard doc… so-so in the “I’m not really sure what I’m doing” department).  Believe it or not I found the answer in the depths of a linux tutorial site.  So I’m posting the run down in case you want to play with compression on your own site.

1. You need to make sure that you have the mod_deflate plug-in enabled on your web server.  For XAMPP users this is found in the /xampp/apache/conf/httpd.conf file.  Mine was actually on line 93 of the file, it was there, just commented out (with a #) so I took off the comment and now the line reads “LoadModule deflate_module modules/mod_deflate.so”
2. Now you need to restart your web server
3. Let make (or modify) a .htaccess file. To enable the compression you need to add this to your .htaccess file.

      SetOutputFilter DEFLATE
   

4. Make another .htaccess file in your js directory (or just tack on another ‘Files’ tag) and replace the “*.html” with a “*.js”. That will enable compression on your js files (Also noted that if you used a packer (like the excellent dean-edwards packer) this might screw up your script or cause your page not to load. The best idea for js compression is to minify it and then use this deflate or gzip compression on it. (see a previous post about js compression to find links )
5. And you’re done. Seriously, that’s it. It’s that simple. Why no one on the net had posted that is beyond me. You should now be done and you can go and check your work by cracking open a page on your web server and checking the page size. The easiest way to do that is to use the Firefox Web Developer Add-on and click on the “Information” button then click on “View Document Size”.

So for my own site (a webapp called the WebTop) here is what I ended up with.  Without deflate compression enabled my page was 134k, with a massive 94k of that being various js files. and 17k being chewed up in html files.

With the compression turned on however, we managed a very acceptable 56k for the site.  The html being compressed down to 4k, and the js files being crunched down to 29k.