Load Your Ads Last

Nobody likes ads but we can all agree they are a necessary component of doing business online. I recently had some experience dealing with adify, a aggregating ad platform which pipes in banners from a multitude of sources some with questionable practices in regards to loading performance. I had just launched a beatifully crafted website that employed all the tricks in the book for quick page loads and it was snappy… until we embedded the ad code. I like to load my images asynchronously and I like to execute javascript only once the document has finished loading so imagine the pain of patiently watching little animated gif spinners swirling away for as long as 6-30 seconds because the browser is choking on javascript from the banner ads in the middle of the page. Normally the solution would be to fix the javascript, but being a third party ad network, the embedded code was far beyond my control, so clearly this needed rethinking. I needed to figure out how to load the ads asynchronously as well.

This sounds simple at first but after some googling the most common solution is to load the ad code into hidden iframes at the bottom of the page and then move the html nodes using javascript after the document has finished loading. Ick. I decided to employ some AJAX instead. Here’s how I made my ads load asynchronously:

I start with some placeholder html.

This node must have the css class ‘advertisement’ and a src attribute specifying a url where the ad embed code can be retrieved from. In my project, built using the Zend Framework, I had a designated AdController class that served up particular ad code depending on which ad space I needed to fill.

Next we need a little bit of jquery that scans the document for nodes with the css class ‘advertisement’. It expects every node it finds to also have the ’src’ attribute which it grabs and assigns to a dynamically generated iframe.

Keep in mind this happens ‘after’ everything else has initialized that way your site remains responsive. Ok, so it’s not really AJAX but the effect is the same, the ads load last and they load asynchronously. You’re users will thank you.