How can I get a flash object to load as fast using swfobject as it does via embed or iframe?

Question

I'm using swfobject to load a flash object on my site and it's loading very slowly on pages with a lot of data...as if swfobject waits until the page loads before loading the swf.

Here's an example page with swfobject: http://www.tripline.net/trip?id=066434736132100383DB8A184B7D8D17

If I change out the swfobject code with an iframe (with the swf as the src) or just use object embed, the flash object loads much, much faster...before the rest of the page loads.

I know there are a ton of page load time improvements I could make to that page (I'm working on that as well), but I'm wondering if there are some specific changes I could make to the way I'm using swfobject to get the same loading speed as an iframe or object embed?

Answer 1

A couple of things to try:

Use static publishing.

embedSWF() waits until the HTML DOM is ready before replacing the content with the swf. With static publishing, browsers that support the standard way of embedding objects without using javascript will start loading the swf as soon as they get to the <object> element, and then swfobject will patch things up in javascript when the DOM is ready. That should give a slightly faster display of your swf.

Move even more javascript to the bottom of the page, if possible.

(I rarely do that, but) since any javascript will block the DOM parsing (in most browsers) until the script has been (loaded and) executed, that means it'll get to the swf later.

This would only make a real difference for static publishing, since dynamic publishing will still wait for DOM ready. DOM ready still won't occur until all scripts on the page have loaded and executed, which should take about the same time regardless of where they're placed (unless moving the scripts to the bottom gets rid of other blocking issues).

Play around with createSWF (not recommended)

createSWF() doesn't wait for the DOM to be ready. I have little idea of the internal workings of swfobject in terms of DOM manipulation these days, but - in the case of dynamic publishing - it may be possible to call it right after you've added the placeholder. The placeholder part of the DOM is (mostly) ready by that time (see e.g. here).

But that all depends on what other parts of the page swfobject wishes to address behind the scenes these days, and what it may do in future versions. Any DOM manipulation before DOM ready may also cause the browser to render parts twice in some cases, which obviously doesn't help performance. In short, not recommended.