I have been trying to implement more of Yahoo’s Rules for High Performance Web Sites. One of these is to gzip your components. It seems most servers serve html gzipped, but not css and javascript.
I contacted my webhost, MediaTemple, asking how I could get the grid-server configured to gzip my css and javascript. At first technical support didn’t seem to know what gzip was. After some back and forth I tried adding some lines to my .htaccess file to enable and configure mod_gzip. It turns out mod_deflate has replaced Apache 1.3’s mod_gzip in Apache2.
So if your site is hosted on an Apache2 server and mod_deflate is loaded you can add the following lines to the .htaccess file in your main web directory. Now the YSlow plugin for Firebug will give your site an “A” in the “Gzip components” category, and if you have results similar to mine your javascript and css files will be 60-70% smaller. Nice, yes?
The following code gzips everything but images.
# BEGIN gzip # Insert filter SetOutputFilter DEFLATE # Netscape 4.x has some problems... BrowserMatch ^Mozilla/4 gzip-only-text/html # Netscape 4.06-4.08 have some more problems BrowserMatch ^Mozilla/4\.0[678] no-gzip # MSIE masquerades as Netscape, but it is fine # BrowserMatch \bMSIE !no-gzip !gzip-only-text/html # NOTE: Due to a bug in mod_setenvif up to Apache 2.0.48 # the above regex won't work. You can use the following # workaround to get the desired effect: BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html # Don't compress images SetEnvIfNoCase Request_URI \ \.(?:gif|jpe?g|png)$ no-gzip dont-vary # Make sure proxies don't deliver the wrong content Header append Vary User-Agent env=!dont-vary # END gzip
