Comments on: Using Iframes Sparingly

By: Comox Valley Homes

Comox Valley Homes — Wed, 09 Nov 2011 06:18:15 +0000

Great article, any test results with SCRIBD? Is there a better way to embed PDF documents that is faster?

By: Priya

Priya — Sat, 13 Nov 2010 02:02:47 +0000

Our website has become very slow ever since we started using iframes for headers footers. I am glad that I read this psot. Thanks Steve.

By: Steve Souders

Steve Souders — Wed, 15 Sep 2010 20:39:52 +0000

@Aaron: Yes, I believe my test has race condition issues. I recommend looking at more recent iframe async techniques esp. from Meebo.

By: Aaron Peters

Aaron Peters — Wed, 15 Sep 2010 08:51:16 +0000

hi Steve,

Yesterday and today @pornelski and I were discussing iframes and (non-)blocking behavior on Twitter. We used your Iframes Non-Blocking example pages in the discussion.
We found out that the setTimeout trick you outline does not work in IE7 on *1st* page visit: the iframe still blocks the onload event.

We used this page for testing: http://stevesouders.com/efws/iframe-onload-nonblocking.php

Visit the page in IE7 with an empty cache. On that 1st page visit, the parent onload event is blocked. Reload page: onload is not blocked.

IE7 test results: http://www.webpagetest.org/result/100915_50CA/
IE8 test results: http://www.webpagetest.org/result/100915_50EA/

The IE8 results page clearly shows the onload is *not* blocked when visiting the page again.

I also tested on local IE7 with Pagetest plugin: same behavior.

By: sunnybear

sunnybear — Sun, 06 Dec 2009 11:58:12 +0000

Small remark about delayed iframes’ load. There can be possible incompatibilities with ‘raw JS’ approach (if we define SRC attribute at the bottom of the page). I.e. Google Calendar (in iframe) can’t be loaded properly. So the most safe way is to envelope the whole iframe into div, and replace contents of this div at the bottom of the page (with actual iframe).

By: Mark Rose

Mark Rose — Wed, 02 Dec 2009 20:02:40 +0000

One of the biggest frustrations I have with ads are networks and managers (such as Google Ad Manager) that insist on using document.write to insert code. It would be trivial to write Javascript to update the HTML content of a div after onload, but it’s not done for unknown reason.

There are ways you can get around this limitation, by stuffing all the slow ad stuff at the end of your document, then using Javascript to position ads where they belong on the page. There is some talk about this technique on the Google Ad Manager forums, and it could easily be applied to any other blocking Javascript code. See http://www.google.com/support/forum/p/Google+Ad+Manager/thread?tid=7bcfaa482259cc28&hl=en

By: Josh

Josh — Sun, 07 Jun 2009 09:40:38 +0000

Great post (and series of posts you have been providing in recent months!)

If you can get Adsense and Google Analytics to implement some of these practices, soon, it will make a lot of the web a lot faster :)

By: Péter Nagy

Péter Nagy — Sat, 06 Jun 2009 00:16:33 +0000

Sorry for the bad linebreaks… :)

• Windows Operating Systems with Internet Explorer 6.0 or Higher OR Firefox 2.0 or Higher

– Create an IFrame element and place it into the document with SRC set to a small adpage file in the same domain as the page.
– Create a Script element and place it into the IFrame document with SRC set to the ad delivery system
– Generate a variable called inDapIF = true in the IFrame document to identify to the ad code that it is running inside the Dynamic IFrame.

NOTE: The IFrame should not be created using document.write as this may cause problems with AJAX pages.

The Script elements can be created using document.write as they are within the IFRAME and will not interfere with
the page content.

By: Péter Nagy

Péter Nagy — Sat, 06 Jun 2009 00:13:56 +0000

from: http://www.iab.net/media/file/rich_media_ajax_best_practices.pdf

A method to create the Friendly IFrame:

• Windows Operating Systems with Internet Explorer 6.0 or Higher OR Firefox 2.0 or
Higher
– Create an IFrame element and place it into the document with SRC set to a small adpage file in the
same domain as the page.
– Create a Script element and place it into the IFrame document with SRC set to the ad delivery
system
– Generate a variable called inDapIF = true in the IFrame document to identify to the ad code that it
is running inside the Dynamic IFrame.

NOTE: The IFrame should not be created using document.write as this may cause problems with AJAX pages.
The Script elements can be created using document.write as they are within the IFRAME and will not interfere with
the page content.

By: Danny Khatib

Danny Khatib — Sat, 06 Jun 2009 00:03:24 +0000

Thanks for the pragmatic advice, Steve.

One concern I have is that many ad networks (and other third-parties) use the first js file as an entry point to download another 2-4 js files and more content. If we load their first external file near the top but asynchronously through Script DOM Element, I wonder if their subsequent js load/execution will still block other page content. If so, I suppose the middle ground would be to defer it for IE users (and others soon). I’ll try both and see what happens. Thanks again!