Serving gzip compressed Scriptaculous and Prototype with ColdFusion

gzip compressed javascript libraries I love Scriptaculous, and mixing it with ColdFusion to create some very nice Rich Internet Applications. But at nearly 300KB, loading Prototype+Scriptaculous is kinda heavy. The workaround for that is shrinking the javascript libraries.

There are a few utilities around the net that will ‘compact’ or ‘shrink’ javascript. Variables are renamed, and all white space is removed – including comments and credits. Not too cool.

But here I’ll show you how to take it a step further and serve javascript compressed with coldFusion. I am able to get Prototype v1601 and Scriptaculous v181 download size down from 288KB to 42KB – with credits intact. ColdFusion 8 is not required – I believe CF5 or better will do (maybe even earlier!). This is a great way to serve gzip compressed content when not being able to control the web server and you don’t have CF8.

  1. Pack/shrink/compact all the javascript files into one. Make sure Prototype is at the top. That work has been done already, easily found on google. That’s how I got mine, it was 148KB. 2:1? Pretty darn good for no compression.
  2. I added credits for each library at the top of that file.
  3. Gzip the file.

So, great. We have a gzip compressed 42KB web 2.0 javascript. Thats almost 7:1 compression – not too shabby.  And with credits intact, thank you very much. Now we have to serve it as such. But you cannot just link to the gz in a javascript src attribute. Most browsers will not know what to do with it. So it has to be served smartly, and correctly. You need the compressed and uncompressed version both handy since older browsers cannot decompress GZ – in case someone tries to surf your site from 1997. And for the compressed version, you need to set the correct content-encoding and content-type headers.

Here is how to do it with ColdFusion. For this demonstration, the files are named:

  • prototype1601scriptaculous181.cfm
  • prototype1601scriptaculous181.js
  • prototype1601scriptaculous181.gz

In your javascript tag, make the src point to the CFM, such as

<script
   src="/includes/js/scriptaculous/prototype1601scriptaculous181.cfm"
   type="text/javascript"
   charset="ISO-8859-1"/>

It’s important that your charset is ISO-8859-1.

This is the contents of prototype1601scriptaculous181.cfm:

<cfif cgi.HTTP_ACCEPT_ENCODING contains "gzip">
<cfheader name="Content-Encoding" value="gzip">
<cfcontent
type="application/x-javascript"
deletefile="no"
file="#expandpath('./prototype1601scriptaculous181.gz')#">
<cfelse>
<cfinclude template="prototype1601scriptaculous181.js">
</cfif>

gzip compressed javascript librariesThis beauty first checks to make sure the browser can handle gzip.

  • If so, it sets the correct Content-Encoding for the file. With cfcontent it sends the compressed data to the browser as type application/x-javascript.
  • If not, it sends the uncompressed js data.

As you can see on the right, the credits are still in the compressed javascript when decompressed by the browser.

In my free time (HA) I’ll create and post PHP, ASP, Ruby, etc version as well. Or if someone else would like to do it I’d gladly post them here.

Other Resources:
http://compressorrater.thruhere.net/
http://shrinksafe.dojotoolkit.org/
http://www.bananascript.com/?home
http://blog.mohanjith.net/2008/03/recipe-for-compressed-scriptaculous.html
http://cfspaghetti.blogspot.com/2007/07/how-to-gzip-compress-coldfusion-8.html

WebVeteran.com based code deployed on NASA’s website

Wow how cool is this?

Scriptaculous’ modified version of my JS Audio Engine is being used by NASA!
EX: http://www.nasa.gov

http://www.nasa.gov/js/191739main_sound.js:

// script.aculo.us sound.js v1.8.0_pre1, Fri Oct 12 21:34:51 +0200 2007

// Copyright (c) 2005-2007 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
//
// Based on code created by Jules Gravinese (http://www.webveteran.com/)
//
// script.aculo.us is freely distributable under the terms of an MIT-style license.
// For details, see the script.aculo.us web site: http://script.aculo.us/

Emergent Success Launches ES-Extranet, an Innovative Online Collaboration Tool

SOURCE: Emergent Success, Inc.

Sep 26, 2007 14:32 ET

MOUNTAIN VIEW, CA–(Marketwire – September 26, 2007 ) – Emergent Success Inc. today announced the
launch of ES-Extranet a proprietary web-based collaboration tool for use by
their clients, partners and consultants. Since the email "inbox" was not
designed as a collaborative work environment, this technological solution
creates the open space where discussion, calendaring, asset sharing and
other collaborative activities are easily practiced and navigated.

Emergent Success, Inc. is a collaborative consulting company that
facilitates dialogues to assist clients in solving their real-time
problems. Even though the preference is to do this work in vivo, the
addition of the ES-Extranet will allow anyone involved in a current
collaboration to participate in an asynchronous manner. The principals at
Emergent Success believe that in the same way that there is enormous value
in gathering people together for in-person dialogues, there is also
significant value to "virtual" dialogues. Principal Kevin Buck explains
"Experience has shown that to engage people with an online tool once you
have engaged them in person maximizes any collective effort — it is not an
either/or, but a both/and."

With an eye to collaborative integrity, Emergent Success engaged with David
Muro, designer, and Jules Gravinese, web developer, to co-create this new
tool. Each brought the best of their knowledge and experience to bear as
they developed the intuitive feel and ease of use of this online workspace.
Since collaborations are an iterative process, we look forward to the
ongoing learning for our company, consultants and clients.

About Emergent Success, Inc.

Emergent Success assists clients to solve their real-time issues by
liberating the collective wisdom, talent and energy from within their
organization for the emergence of strategic success. Its senior
consultants facilitate collaborative dialogues that create systemic
integration amongst the unintended silos present in most organizations.
The Company is headquartered in Mountain View, CA with consultants located
across the United States. www.emergentsuccess.com

WebVeteran.com based code deployed on Apple Inc.’s website

Wow how cool is this?

Scriptaculous’ modified version of my JS Audio Engine is being used by Apple!
EX: http://www.apple.com/aperture/

http://images.apple.com/global/scripts/lib/scriptaculous.js:

// script.aculo.us sound.js v1.7.1_beta2, Sat Apr 28 15:20:12 CEST 2007

// Copyright (c) 2005-2007 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
//
// Based on code created by Jules Gravinese (http://www.webveteran.com/)
//
// script.aculo.us is freely distributable under the terms of an MIT-style license.
// For details, see the script.aculo.us web site: http://script.aculo.us/

Compressed Prototype and Scriptaculous

Just a little site news. Don't get too excited.

WebVeteran.com is now using the compressed versions of Scriptaculous and Prototype , as packaged by Steve Kallestad .

I've opted to use prototype.js 1.50 rc2 and scriptaculous 1.7 beta 2 because:

  • These versions of both packages together do not exhibit some flaws is later versions
  • This compressed version… actually works.

So go ahead and enjoy a webveteran.com that loads 130KB faster =)

We’re going Global : Italy

An Italian site called ImaginePaolo.com posted a reference to webveteran.com in a blog:

Addio flash…

Ho sempre sostenuto durante le mie docenze che Flash prima o poi
avrebbe ceduto il passo ad altre tecnologie più leggere e
performanti… si hanno le prime notizie di ciò. A tal proposito
desidero segnalare questo sito che tutto usa tranne che Flash: http://www.webveteran.com/.

Roughly translated:

Goodbye flash…

I have always thought that Flash sooner or later
would be surpassed by other web technologies that are more readable by search engines and perform better… I have the first news of that. For that desired purpose, I wish to show you a site from USA that uses no Flash: http://www.webveteran.com/.

Paolo, la ringrazio per l'onorevole menziona!

Scriptaculous audio engine – based on WebVeteran.com code

The forthcoming Scriptaculous (version 1.71?) may have an audio engine. The base of which is from yours truly.
For WebVeteran.com I had built a JavaScript audio engine:

  • Start a sound at any time
  • Stop that sound any time thereafter
  • Start another sound while the previous sound(s) are playing

The result is a multi-track audio engine that is accessed through
JavaScript. It uses Scriptaculous’ Builder to create and kill sounds.

Being so excited of my accomplishment, I wrote an email to Thomas Fuchs,
creator of Scriptaculous, telling him of what I did. He asked if he can
incorporate my work into the next release, as audio.js, along side
effects.js, dragdrop.js, etc. Of course I said yes.

As always, no plug-in allowed. Well… not entirely true. But the user is never prompted to install one. So it degrades nicely on all browsers and platforms.

  • If you have a Mac, you’re all set. QuickTime takes care of all browsers.
  • If you have IE, you’re also set. bgsound is a wonderful thing – wav w/ no plug-in.
  • Opera? Terrific. Wav files with no plug-in.
  • FF on the PC? Only if you have QT installed. Otherwise you hear nothing. For now.

To come are some very nice improvements in speed and functionality.