http://www.bitesizedjapan.com

We discovered with our Intranet project significant speed penalties introduced by loading a lot of dynamic content in via AJAX at the same time. It’s very easy to get carried away and try load everything in with jQuery, but on an initial page draw this is clearly a Bad Thing:

Take our Intranet portal as an example. It consists of 9 widgets, each of which has fully dynamic content. After the portal is initially constructed by the server, loaded by the client, and jQuery has initialised, each Widget then goes and fetches its own content. This resulted in an average 35 seconds until the page was fully ready. Clearly this in unacceptable.

Going back and re-working the widgets so that they “pre-populate” the data server side reduced this time to 5 seconds. Subsequent updates are then performed by jQuery AJAX calls so the user experience is unaffected.

A lot of this is due to locking – only two connections can be made to a web server at once from a single client, so an application that generates many AJAX requests will end up having request queued. Also all those requests going back and forth from the server generate a lot of overhead, not to mention that once all the data has finally been received by the client poor jQuery has to do a lot of work!

So we learned the hard way: be careful how you use AJAX!

Let me say this up front: Content Managers are not easy to write!

Thankfully the pain is somewhat mitigated thanks to TinyMCE and a lot of jQuery.

So, if you come up with a fab design with sexy typefaces and a wonderful layout…  and then you can pretty much kiss that goodbye within a browser. After all, you are limited to a handful of rather dull typefaces, and until now there was very little you could do about that….

The solution? Well, over the past week or so I’ve been playing with the Cufon font library.

Cufon is a very clever tool that lets you upload fonts and reprocess them in a format that can then be displayed in almost all browsers. Simply including the Cufon script:

<script type=”text/javascript” src=”/script/cufon.js”></script>

…the font script (generated via their web site)…

<script type=”text/javascript” src=”/fonts/EurostileT_400-EurostileT_700.font.js”></script>

…and a simple jQuery call and you’re good to go:

Cufon.replace(“.myCssClass”);

Cufon will walk through your page and replace all instances of “.myClass” with your fancy font. It’ll even maintain the formatting (including colour).

We’ve tested this on Internet Explorer 6 and 7, FireFox 3.5 and Safari 4.1 and it works like a charm – and ideal tool for a type-heavy publication like a magazine (BiteSizedJapan).