You’re here because you want to stop all CPM based ads from slowing down your website. You know the ads I’m talking about, those fat javascripts with poorly optimized headers and 40 or more http request per ad! We can place a hold on the advertisements with javascript window.onload. This will tell the web browser not to load the ads until the rest of the document has completed loading.
Once the document has completed loading, the ads will then load and your users will not experience a delay. The goal is to make the user experience as fast and non-intrusive as possible, while still being able to earn a little scratch. The improved user experience should also improve your bounce rate, retention, page views, click through, and sales. Much credit to Joshua O’Connell at http://www.pixafy.com for the solution. Slightly modified to remove banner padding in html docs.
Step 1
Place the advertisements into plain html document somewhere in your web root – one advertisement unit per html document. We will call these ads later within you main website. Obviously replace you code with the sample below – also take not of the style added around the script, this was done to remove padding from a particular size ad unit.
sample code
[code]<html><head>
<script type="text/JavaScript">
var a = Math.floor(Math.random()*9999999999+1)
var random_number = a;
</script>
</head>
<body>
<div style="width: 300px; margin:-8 0 0 -8;"><SCRIPT> /** you may have to remove or modify div depending on your website **/
document.write(‘<scr’ + ‘ipt src=http://ad.doubleclick.net/adj/fantasyknuckleheads.fsv/ros;sect=ros;fantasy=yes;game=no;tile=3;sz=300×250;ord=’ + random_numbe
r + ‘?></scr’ + ‘ipt>’);
</SCRIPT>
<NOSCRIPT>
<a href="http://ad.doubleclick.net/jump/fantasyknuckleheads.fsv/ros;sect=ros;fantasy=yes;game=no;tile=5;sz=300×250;ord=’+random_number+’?" >
<img src="http://ad.doubleclick.net/ad/fantasyknuckleheads.fsv/ros;sect=ros;fantasy=yes;game=no;tile=5;sz=300×250;ord=’+random_number+’?" border="0" height="2
50" width="300"></a></div>
</NOSCRIPT>
</body></html>
[/code]
Step 2
Add the following code to your head (pre close tag) and replace the iframe source with the source location of the html documents you created in step 1. This will tell the web browsers to load the advertisements after the document loads fully, so your users will have a pleasant experience.
sample code
[code]
<script type="text/javascript">
window.onload = pre_loader;
function pre_loader() {
javascript:document.getElementById(‘adloaderBanner’).innerHTML = ‘<iframe width="728" scrolling="no" height="90" frameborder="0" marginheight="0" marginwidth="0" src="/mashed/ads/728.html" style="position: absolute; top: 0px; right: 0px;"></iframe>’;
javascript:document.getElementById(‘adloaderTower’).innerHTML = ‘<iframe width="160" scrolling="no" height="600" frameborder="0" marginheight="0" marginwidth="0" src="/mashed/ads/tower.html"></iframe>’;
javascript:document.getElementById(‘adloaderBox’).innerHTML = ‘<iframe scrolling="no" src="/mashed/ads/300box1.html" style="margin: 0px; border: 0px; height: 250px; width: 300px;"></iframe>’;
javascript:document.getElementById(‘adloaderBox’).innerHTML = ‘<iframe scrolling="no" src="/mashed/ads/300box2.html" style="margin: 0px; border: 0px; height: 250px; width: 300px;"></iframe>’;
}
</script>
[/code]
Step 3
Now it’s time to tell the browser where you want the advertisements to display. As you notice in step two, each ad has an ElementById assigned to it. This is going to be your div id. Place the DIV where you want the ads to display on your website.
sample code
[code]
<div id="adloaderBanner"></div>
<div id="adloaderTower"></div>
<div id="adloaderBox"></div>
<div id="adloaderBox2"></div>
[/code]
That’s it! Super simple and effect too. Increases your ySlow and GoogleSpeed scores as well as document complete load time.