CF8 + Ajax need compression!

Posted At : July 30, 2007 9:54 PM | Posted By : Rob Gonda
Related Categories: ajax,Coldfusion,Software

As you probably know, ColdFusion 8 came out today and it has tons of Ajax/DHTML goodies. It's based on YUI+EXT, which is a great, powerful, scaleable, documented solution... but it weights just too much. A simple cfwindow requires about a 360k JavaScript download ...

I checked the source code, and it's mostly minimized, which means it's hard to reduce the code-base even more... however, you can gzip it. Most/All modern browsers support gzip data, and the difference is huge.

With Apache you can use mod_gzip, but with IIS is slightly more difficult. The best solution IMO is to install a 3rd party tool such as port80 httpZip.

Check out the following comparisons.

CFWINDOW

UNCOMPRESSED

26 requests
0 cached files
0 errors

372244 total bytes
8114 request bytes
364130 response bytes
the average request was 312 bytes
the average response was 14005 bytes

entire session took 7.641 seconds
on average, responses took 0.336 seconds

COMPRESSED

26 requests
0 cached files
0 errors

116218 total bytes
7985 request bytes
108233 response bytes
the average request was 307 bytes
the average response was 4162 bytes

entire session took 3.672 seconds
on average, responses took 0.144 seconds

CFLAYOUT

<cflayout type="border">

<cflayoutarea position="top" title="Top Layout Area">
This is the top layout area.
</cflayoutarea>

<cflayoutarea position="center">
This is the center layout area.
</cflayoutarea>

<cflayoutarea position="bottom" title="Bottom Layout Area">
This is the bottom layout area.
</cflayoutarea>

</cflayout>

UNCOMPRESSED

15 requests
0 cached files
0 errors

357131 total bytes
4584 request bytes
352547 response bytes
the average request was 305 bytes
the average response was 23503 bytes

entire session took 3.609 seconds
on average, responses took 0.223 seconds

COMPRESSED

15 requests
0 cached files
0 errors

102840 total bytes
4645 request bytes
98195 response bytes
the average request was 309 bytes
the average response was 6546 bytes

entire session took 2.64 seconds
on average, responses took 0.165 seconds

CFMENU

8 requests
0 cached files
0 errors

215463 total bytes
2366 request bytes
213097 response bytes
the average request was 295 bytes
the average response was 26637 bytes

entire session took 2.438 seconds
on average, responses took 0.289 seconds

8 requests
0 cached files
0 errors

54543 total bytes
2399 request bytes
52144 response bytes
the average request was 299 bytes
the average response was 6518 bytes

entire session took 1.562 seconds
on average, responses took 0.168 seconds

Pretty impressive huh?

So in conclusion, you must compression your scripts to make it half-decent for your users... ColdFusion provided a very powerful tool, now it's up to you to make the best of it.

posted on July 30, 2007 at 9:54 PM by Rob Gonda

Comments (14) | Trackbacks (0) |

Print |

Send |

del.icio.us |

Digg It!

TrackBacks

There are no trackbacks for this entry.

Trackback URL for this entry:
http://www.robgonda.com/blog/trackback.cfm?1A0581A2-FA23-EF0D-A3E6FE340909B4A6

[Add Trackback]

Comments

[Add Comment]

Hey Rob

Check out this post for a pure CF8 way of doing GZIP

http://cfspaghetti.blogspot.com/2007/07/how-to-gzi...

# Posted By Pat Branley | 7/31/07 12:17 AM

@Pat, nice post, thanks! I've seen people adding that using the onRequest to compress cfm pages too. I've just had bad experiences redirecting 404 pages to CFM handlers... for some reason IIS's performance was horrible ...

# Posted By Rob Gonda | 7/31/07 1:16 AM

i use that technique quite a bit and havent had any big issues with it. but knowing IIS, i dont doubt you have had troubles.

You could also use spike's Friendly URL servlet thats part of FarCry to fwd the request on to the cfm page.

# Posted By Pat Branley | 7/31/07 2:06 AM

This was brought up on Ray's blog when he started doing the CFLAYOUT examples. He indicated that we shouldn't point out these shortcomings in "beta" code, and that Adobe would slim things down by the time the final version shipped.

Guess that didn't happen.

# Posted By Michael Long | 7/31/07 3:08 AM

Just a quick note on this. You can also use a compression servlet to automaticaly compress everything going out of CF. There's several examples out there on the web and they require just dropping the JAR into the appropriate location and editing web.xml.
I chose this way of doing it on an application I work on because we deploy on IIS and Apache and sometimes test through the JRun built-in web server. By using a servlet, the compression is applied in all environments, which cuts down on config and makes things consistent.

One other thing to watch out for is that there appears to be a bug in IE 6 (but only in SP2 on XP in my experience) where compressed Javascript does not work correctly. The script will often load once, but when the page is loaded a second time, the compressed script is fetched from the cache and fails to load. This is a very intermittent bug and appears to be related to the size or content of the JS file itself. We successfully compressed a .JS file for over a year and it always worked, then the content changed and this bug appeared. We now selectively filter only content that works fine.

Just thought I'd mention that, as it might save someone some time.

Barny

# Posted By Barny Relph | 7/31/07 4:40 AM

Rob -

Good information. Also, the number of requests (26) should be reduced by to 1/2 JS and CSS files. This would be decrease the requests (Yahoo has some good info --> YSlow which works with Firebug). I have a custom tag that does that operation. Also, I think Adobe should remove any JavaScript functions (make it an optional argument for the cflayout tag) which a developer doesn't need. I never used the cfform tag with its 'fat' JavaScript for that reason. I just created a slimmer version.

# Posted By Patrick Whittingham | 7/31/07 6:11 AM

@Barny surely a servlet only does the .cfm pages and not the .js files though?

# Posted By Andy Jarrett | 8/1/07 8:06 AM

Like cfforms, you're better off avoiding it and using a focussed solution. It's ridiculous the amount of crap it's throwing out there to accomplish what it needs to do.

My entire website's jquery file without gzipping is only 25kb.

# Posted By ziggy | 8/2/07 12:41 AM

I read on developers.yahoo that yui is 20k compressed and gzipped.

So Adobe added the rest?

I see at yui-ext.com that you can build thier library and only include the stuff you actually use.

# Posted By Mark Ireland | 8/2/07 2:48 AM

Guys,

Do read what Rob rightly points out in the above post : "I checked the source code, and it's mostly minimized, which means it's hard to reduce the code-base even more...". Oh yes, the source code is minimized. We at Adobe have put in quite a lot of effort to get the download size to the minimum. What Rob is suggesting here is to use gzip to gain the additional level of compression.

@Michael : Just want to bring up the point again. Adobe has made *a huge effort* to get the download size to the minimum. You surely have read on the post on Rey's blog about the shortcomings in the "beta" code all right. But did you get the chance to read the subsequent post about the improvements that have happened that again on Rey's blog? I doubt you did.

Do check out this post http://www.reybango.com/index.cfm/2007/6/6/CF8-Aja...

@Mark : The cfwindow uses the window component from ExtJS. It does not use the YUI toolkit. Oh yes, we do know and have taken care to include the stuff you actually use.

# Posted By Rakshith | 8/2/07 5:32 AM

It's true ... YUI-Ext is a huge code-base indeed. Adobe did the best they could minimizing it... the only way to improve it would be if cfusion / jrun came with a built-in gzip servlet, and ColdFusion served the JavaScript files through jrun by mapping them as .cfm... in any other case, just install a gzip module as suggested by this post.

If anyone case, the gzip servlets mentioned by Barney can be found here:
http://www.servletsuite.com/servlets/gzipflt.htm
http://www.thomas-bayer.com/gzip-compression-filte...

# Posted By Rob Gonda | 8/2/07 9:33 AM

Does the additional processing time incurred on the server to gzip everything offset the reduced download time? and then is more work done in the browser to ungzip the bits prior to display?

What I'm wondering is: if I use a filter to gzip everything, will it indeed speed things up for the user? will it be noticeable? I'm talking corporate websites where clients have big fat pipes in and out and where bandwidth generally isn't a bottleneck.

Thanks for any input.

# Posted By Marc Esher | 8/3/07 8:02 AM

Shouldn't all subsequent requests at least use the locally cached libraries. So it's only a one time hit.

# Posted By Simon | 12/26/07 10:52 PM

Absolutely solid gold post Rob!

I'm working on a large project at the moment using the Ajax features of CF8 and I must admit the filesizes were worrying me somewhat.. About 550k for a simple page that was using CFWINDOW and CFTOOLTIP.

I installed both the JRun compressor (as mentioned above) and the trial version of the one you mentioned for IIS.

Spot on! The Ajax content went down from 430k -> 119k!!!

This is really going to help keep the site nice and responsive..

# Posted By James Allen | 1/31/08 7:53 PM

[Add Comment]