Deferring ad loading on your pages to avoid unnecessary outages

At GreatSchools we’ve had 3rd party ad server outages or slowness effectively make our site unusable as users browsers waited for certain ads to render before rendering the rest of the page. I had originally thought just specifying height and width of the div element around the ad would be enough for the browser to move on given a slow ad load but in my tests with various ad servers that turned out not to be the case. After some research I discovered that the trick that some sites (such as Digg.com) employ is called source ordered content where you put the content in the order you’d really like it in (be it for SEO or for deferring ad calls) and then using CSS or Javascript to move it to the proper place.

In this particular case I needed the ads to be called at the end of the page so that the browser would always render the full XHTML page to the user right away so that slow loading ads didn’t delay the rendering of the page.

To address this I wrote a simple javascript solution. Here’s how it works:

1. I put my deferredcontent.js code that I wrote in the head tag
<script type=”text/javascript” src=”/js/deferredcontent.js”></script>
2. I added an onload=”relocateDeferredContent();” to the body tag
3. I put an empty div tag where I ultimately wanted the content to end up. E.g <div id=”adleaderboard”></div>
4. I put the deferred content in a display:none div just before the closing body tag at the very end of the page and put each block of code I wanted to relocate in a div with an id of defer-IDFROMSTEP3

<div style=”display:none”>
<div id=”defer-adleaderboard”>
[Ad code goes here]
</div>
</div>

If you want to see it in action you can see it on this San Francisco schools page.

This entry was posted in CSS, Design, Javascript, Software Engineering, Web. Bookmark the permalink.

2 Responses to Deferring ad loading on your pages to avoid unnecessary outages

  1. Alex says:

    Nice piece of work, very elegant. Much nicer than using IFRAMEs, which is probably the only other option.

  2. Alex says:

    very nice. I used it to delay testimonials loading on a page. You saved me this morning.

    Thanks.

Comments are closed.