Is using iframes to improve page performance an acceptable approach?

Question

Hi all,

I have a complex page that has several user controls like galleries, maps, ads etc.

I've tried optimising them by ensuring full separation of html/css/js, placing js at the bottom of the page and trying to ensure I have well written code in all 3 but alas I still have a slow page. It's not really noticeable to a modern browser but can see the stats and IE6/7.

So I'm now looking to do what we've done previously for Adtech flash crap - an iframe. Apart from the SEO impact which I'm not worried about in the case of these controls, what do people think of this as an approach? PROS and CONS please.

Thanks, Denis

Answer 1

What will really improve your page performance is to serve the content from different subdomains.

For example, you could go crazy and have a js.example.com a images.example.com and a www.example.com, allowing the users' browsers to GET more things at a time, as most browsers allow for a maximum of two downloads per domain. Of course, what is commonly done is to have a static.example.com and a www.example.com, thus keeping it only slightly more complex than a common webserver.

This gives you other advantages:

• The static server can serve with a far in the future expiration date to take advantage of the browser's cache.
• You can strip almost all headers from the static server, reducing bandwidth.
• Your static server will not transport the cookies that the dynamic (www.) server could set (remember that every cookie that you set is sent in every request), reducing bandwidth.

Also, you should go the extra mile and both minify the static content and use server-site compression (GZIP) to serve the content.

---

As for ad servers, try to use a good provider, and leave all the ad content fetching javascript at the bottom of the page. If a visitor gets to your page, but it's only serving him a blank page because its browser is busy waiting for the ads to load, he will leave, while if you give him the content and then load the ads, he will most likely stay on the site for the content and get to see the ads.

Answer 2

Adding an iframe will do nothing but start a flame war, you should use Firebug and Yslow (both add-ons for Firefox), this will tell you why it's running slow and give you points as to how you can speed it up.

Answer 3

iframes aren't the end of the world, but perhaps you may want to try ajax. Then the page could load immediately with a few loading gifs where the widgets will go. Then make a new ajax request for each of your widgets, and on repsonse the loading gifs will be replaced with the widget data.

Update: I guess "Lazy Loading" is the correct term for this.

Answer 4

Speaking of web UI, less is generally better. If your page is slow, maybe you should separate your controls in a way that they are not shown all at the same time.

iFrames are often a mess as soon as you want to bookmark your page. And they won't speed up anything.

If you're looking for loading content selectively, have a look to AJAX techniques.

Finally, and maybe a little off-topic, a good read about SEO: http://powazek.com/posts/2090

Answer 5

There used to be a lot of people using a fuse-box type page for multiple controls, which is bookmarkable and should speed things up. Any sort of frames are generally frowned upon though.