I saved about one third of my first visit (non-cached) bandwidth for my WordPress blog with a simple alteration to my .htaccess file.

Optimising download of heavy javascript frameworks

When I was test driving the recent Safari 4 on my linux box I noticed that the downloads were quite heavy on the .js file front. Now that’s partly because I’m using a stock template (modified quite a bit) which includes the use of Scriptaculous which in turn uses Prototype javascript framework / toolkit.

Change .htaccess to download from GoogleAPIs.com

With a simple alteration to .htaccess I was able to redirect local downloading of the files to teh Google API download links and save myself about 250kB of bandwidth per new visitor and over 100kB for subsequent visitors (who get most files from caches).

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} prototype.js [nc]
RewriteRule . http://ajax.googleapis.com/ajax/libs/prototype/1.6/prototype.js [L]

RewriteCond %{REQUEST_FILENAME} scriptaculous.js [nc]
RewriteRule . http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8/scriptaculous.js [L]

What does this do?

1. Turns on the rewrite engine of the Apache web server (it’s usually on anyway).
2. Checks for requests where the filename is, eg, “prototype.js”.
3. Sends the client browser to googleapis.com to get prototype.js instead of downloading the file locally.
4. Profit!

You can more than likely do this with a simple redirect too. I’d use something like:

RedirectMatch 302 ^.*/prototype.js$ http://ajax.googleapis.com/ajax/libs/prototype/1.6/prototype.js [L]

That would look for URL requests ending in prototype.js and forward them using a temporary redirect (302) to the GoogleAPIs.com address.

More examples of mod_alias use for Redirects and Rewrites are available all over the web, but this is a good clean page with some nice redirect 301 examples.

The effects?

Two screenshots, using ksnapshot with FF running Firebug with the stats panel of YSlow showing.

Note that whilst the load time appears to have been cut by 5s this may be attributable to midstream caching, eg by my ISP. Still these saving can’t be sniffed at.

Freeloading bandwidth is theft!

Thankfully Google let you do this, there’s nothing even remotely dishonest about it.

Updating .htaccess for new releases sucks

Yup, remembering to update htaccess to make the most of new releases probably would suck. Only you don’t have to do it:

Note, these versioning semantics work the same way when using google.load and when using direct script urls.

That means that instead of getting prototype.js from http://ajax.googleapis.com/ajax/libs/prototype/1.6.2/prototype.js I can rqeuest it from .../1/prototype.js and I’ll be sent the most recent sub-version within the version 1 family. Sweet.

What other goodies are GoogleAPIs.com touting?

jQuery

jQuery UI

Prototype

script_aculo_us

MooTools

Dojo

SWFObject

Yahoo! User Interface Library (YUI)

If you’re using any of these from local downloads (YUI can be used from Yahoo! servers) then implementing this trick could save you heaps of bandwidth.