Creative Juices Bo. Co.

Satisfy Your Thirst For Something Refreshing!

Help Speed Up Your Website Load Time Using GZIP!

Using GZIP Header Compression with ColdFusion

As some of you might of heard, Google recently announced they are factoring in site speed as a criteria in their web search ranking. I have about 30 websites being monitored by Google's Web Analytics and over the past month or so I have noticed a significant drop in all their traffic. Now, I'm not 100% sure if this has to do with the new ranking rule or the fact that most US schools are out for summer, but either way this has me a little perplexed and I'm starting to wonder if this has anything to do with my code.

Reading up on a bunch of speed enhancement tips, the one thing I kept coming across is to use HTTP Header Compression. Basically, if the web browser supports it, you can GZIP your Scripts and CSS files and serve them instead of the uncompressed text files. Typically you can save over half the normal file size by doing this. Since I use ColdFusion for most of my sites, I had to find a way to integrate GZIP with ColdFusion. Here's what I came up with.

Preparing Your Script Files

First thing I started to do was to optimize and collect all my JavaScript's into one file. Typically, I would have about 4 to 5 scripts on each page. The usual suspects were jQuery and jQuery UI. I decided to merge those into one file and made sure I had the minimized versions. Secondly, I merged all of my custom scripts into a single file and minimized those as well. Using Terminal I compressed each of the files using: (Note: I'm using Mac OS X, which has a built in GZIP function. I'm not sure how you do this on Windows. You might have to download an App)

$ gzip jquery.js
$ gzip cjboco.js

This created the two files, jquery.js.gz and cjboco.js.gz. I renamed the files to remove the .js. Also, because we still may need to serve the uncompressed files to browsers which don't support HTTP Header Compression, I made sure that the uncompressed files were in the same directory.

At this point we need to create a ColdFusion file that will serve the appropriate scripts to the browser. It needs to determine if the browser accepts GZIP encoding. If so, it will server the GZIP compressed file. If not, then it supplies the uncompressed file. And since we are allowing the user to pass a URL parameter of the file name to server, we placeed in a few checks to ensure that this can't be abused by any script hackers (not really sure what damage can be done, but better safe than sorry). Here's what I came up with:

scripts.cfm

<cfparam name="url.name" default="" />
<cfif Len(url.name) gt 0 and Len(url.name) lt 64 and ReFind(url.name, "[^a-zA-Z\-\.\_]+") eq 0>
<cfif cgi.http_accept_encoding contains "gzip" and FileExists(ExpandPath('./#url.name#.gz'))>
<cfheader name="Content-Encoding" value="gzip" />
<cfcontent reset="true" type="application/x-javascript" deletefile="no" file="#ExpandPath('./#url.name#.gz')#" />
<cfelseif FileExists(ExpandPath('./#url.name#.js'))>
<cfcontent reset="true" /><cfinclude template="#url.name#.js" />
</cfif>
</cfif>

This file should be placed in the same directory as our compressed script files. The only thing remaining is to add our calls to the scripts in the HTML header area. There's nothing magical here, all you need to do is point to the CFM file we created and pass the script name like so:

<script type="text/javascript" src="scripts.cfm?name=jquery" />
<script type="text/javascript" src="scripts.cfm?name=cjboco" />

CSS Files

Essentially you would use the exact same method to setup your CSS files as well. You can use the same ColdFusion file about if you wish or create another and place it in your CSS folder. That's up to you. The method is exactly the same either way.

Conclusion

It's still to early to see if this is having any significant affect on the analytic traffic and there's still some other options I'm going to start playing with, but this is at least a good start. As I figure out some other speed tricks, I will post them as well. Hope this helps!