Defer Banner Ads/JavaScript To Load After Page Loads
By on August 12th, 2010

There are many times when you might want a certain banner ad to load only after you page loads fully, however, not everyone is an expert in AJAX or JavaScript for that matter to make change code and make the code efficient.

code_ninja

If you are a webmaster and have been worried about slow page load times, there is a easier way to defer certain banners or JavaScript code to load after the browser has rendered the rest of the page. This trick can be used for both inline and external JavaScript by using the "defer" attribute specified in HTML 4.01 and later.

To defer banner ads or any JavaScript code to load after the entire page has rendered, just add the attribute defer="defer" to the script tag and the browser will ignore the code within the script and load it after it has finished loading the rest of the content.

Here are some examples of using the defer attribute with a script:

//inline JS example
<script type="text/javascript" defer="defer">
//js code goes here
</script>
 
//external JS example
<script type="text/javascript" defer="defer" src="somejs.js"></script>

Using this trick will ensure that your non JavaScript content loads quickly enough so that it does not hinder a user’s browsing experience. However, it may not improve the overall page load times since the browser will continue to load the deferred JavaScript content after the rest of the page has loaded.

You will find some detailed description about Deferred JavaScript and its impact on the page rendering by visiting this informative post.

Tags: , , , ,
Author: Keith Dsouza Google Profile for Keith Dsouza
I am the editor-in-chief and owner of Techie Buzz. I love coding and have contributed to several open source projects in the past. You can know more about me and my projects by visiting my Personal Website. I am also a social networking enthusiast and can be found active on twitter, you can follow Keith on twitter @keithdsouza. You can click on my name to visit my Google+ profile.

Keith Dsouza has written and can be contacted at keith@techie-buzz.com.
  • http://luongdiennhan13.blogspot.com/ Luong Dien Nhan

    Thanks for the post. I don't know this attribute exists. I will try it soon.

  • http://www.elegantbanners.com Custom Banner Design

    Very nifty little trick! Prioritizing loading like this can really help getting out what’s important first, the content (then the ad).

  • http://www.runicgamesfansite.com Webbstre

    Thank you for this information! Using defer=”defer” has just helped my site to load much faster without having to lose any advertisers. Woohoo!

    • http://www.runicgamesfansite.com Webbstre

      Small update: I had to remove to code mentioned in this article because it caused huge problems for Firefox and some version of Internet Explorer (but not Chrome or Opera).

 
Copyright 2006-2012 Techie Buzz. All Rights Reserved. Our content may not be reproduced on other websites. Content Delivery by MaxCDN