Part of the obsession with building a great web site is that it’s fast. When you go to sites like Facebook, part of the marvel of it is that everything appears so quickly and seamlessly. So when you do something like add advertisements or widgets to your site, it becomes a real drag when your previously zippy pages now take forever to load. The stakes are high: with each second a page takes to render, the number of people who abandon visiting your site increases.
If you need those objects on the page, it’s somewhat challenging to justify removing them solely for the sake of page speeds (it’s something to consider, but not always possible, especially when it comes to revenue-generating items like ads). So then the question becomes: can you change the order things load? Thankfully, the answer is yes.
Common browser handling states that as objects are loaded as they appear in the code. This is why CSS and Javascript files are generally loaded in the header – to make sure they’re present when needed – and why the least important objects are generally dumped right before the closing body tag.
When you have a banner ad at the very top of your page, it can be a literal drag: the ad has to call to an ad server, which serves an ad. Sometimes, it may not have an ad, and it calls in a back-up network. That chain could happen a few times, depending on how your ads are handled. Eventually you get an ad, but if it’s a flash or video ad, that can create additional lag.
Enter the asynchronous method. The technique has been increasing in popularity; Google introduced a version of its Analytics code in 2010 that uses non-blocking async technology so Analytics doesn’t slow down the page’s content from rendering. Non-blocking means it doesn’t stop other content from loading; it gets it out of the way so your page content comes first. If the ad’s a bit behind, it’s OK, because the user won’t have abandoned ship, which is incredibly important.
Our example uses an iFrame, but similar techniques can be worked out with other forms of content, as the code simply places content into a div once the page has loaded. Our example assumes a page that houses a 728×90 ad that will be loaded onto the page using an iFrame.
The Javascript that injects the div with 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="http://www.yourwebsite.com/pagewithadcode.html" style="position: absolute; top: 0px; right: 0px;"></iframe>';
}
</script>
The Javascript goes in the header of the page. Even though it’s at the top, it keeps the code out of the way until it’s time to make them appear.
The empty div
<div id="adloaderBanner"></div>
The empty div goes where you’d like the ad to be rendered in the page.
If you want to do multiple divs it’s just a matter of repeating the pattern within the Javascript. Make sure each div is unique.
The Javascript that injects the divs with 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="http://www.yourwebsite.com/pagewithadcode.html" style="position: absolute; top: 0px; right: 0px;"></iframe>';
}
javascript:document.getElementById('adloaderSquare').innerHTML = '<iframe width="300" scrolling="no" height="250" frameborder="0" marginheight="0" marginwidth="0" src="http://www.yourwebsite.com/pagewithadcode2.html" style="position: absolute; top: 0px; right: 0px;"></iframe>';
}
</script>
The empty divs
<div id="adloaderBanner"></div> <div id="adloaderSquare"></div>
One other note: for those using more fluid page design techniques, you may need to put some widths in where the ads will ultimately appear on the divs that start out empty, or items may jump around. With ads or widgets, the shape and size is usually predictable, so holding space for them tends to not be an issue.
The results of this technique have been pretty impressive; clients we’ve worked with to test this technique have seen their content render much quicker, which helped them increase their traffic. That means that, despite the ads loading a bit later, their revenue ultimately increased!
Experiment with these techniques to see how you can make content accessible faster for your visitors, and visitors will reward you with lengthier and more frequent visits.
Questions or comments? Share them below, or tweet us @Pixafy!
