New Feature: Non-blocking, Asynchronous Ad Code

In geek-speak, asynchronous is a heavenly term. Nearly all advertisements on a website are served using JavaScript from a third party ad network provider. When any browser downloads the ad code that displays the ads, it blocks everything else on the page from rendering. And, while this process may take less than a second of the user’s time, it is noticeable and it is a big problem.

Remember the day Michael Jackson passed away? Several news websites were crushed by the traffic and crashed. It wasn’t because the news websites could not handle the traffic; it was the ad networks blocking ad code that slowed things down. It is a known fact that ad networks are a key bottleneck when it comes to website performance. We decided that it was time for some innovation in ad code delivery methods, and are proud to announce our new non-blocking, and truly asynchronous JavaScript ad code.

If the major ad networks like Google AdSense, Yahoo! Network, AOL Advertising, as well as the popular ad serving products such as Google AdManager and OpenX converted their ad code to be non-blocking, the internet as a whole would become an order of magnitude faster. I genuinely hope that the larger ad networks will step up to the plate and follow our lead on this. A faster internet is a happier internet. This is a big deal.

Why is this a big deal?

Speed
Plain and simple: your website will load faster for your visitors. JavaScript is a performance burden on your website. It blocks additional resources in the page from downloading and blocks elements below from rendering (see Steve Souders Loading Scripts Without Blocking article for more info).  It has also been rumored that site speed may soon affect Google page ranking.

Better Data
It is generally accepted that ad networks will report slightly different impression level data than your website analytics software. There are a variety of reasons for this. Slow or partial page loads is one of these reasons. Faster ad code means fewer slow or partial page loads and therefore better data.

Why should you care?

Let’s face it, ad networks slow down the internet.  Since online advertising is part of our livelihood it is important for us to do what we can to make online advertising less evil. Making websites load faster is important.

How can you get the new snippet?

Login to your BuySellAds.com account and go to your Publisher Dashboard. Click on the “get ad code” link for each of your ad zones and follow the instructions on that page. The main snippet below will need to be installed right after the opening <body> tag:

<!-- BuySellAds.com Ad Code -->
<script type="text/javascript">
(function(){
  var bsa = document.createElement('script');
     bsa.type = 'text/javascript';
     bsa.async = true;
     bsa.src = '//s3.buysellads.com/ac/bsa.js';
  (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);
})();
</script>
<!-- END BuySellAds.com Ad Code -->

Then, for each ad zone, you will need to install the following snippet where you want the ads to appear. Note: this snippet will be unique for each ad zone, please get the appropriate snippet from the “get ad code” page for your ad zone (this link is on your Publisher Dashboard):

<div id="bsap_[zone]" class="bsarocks [sitekey]"></div>

Important: If you install the new version of the ad code, you MUST install it for all of the ad zones on your site. If you don’t, there is a chance for a race condition here and there if the bsa.js asynchronous ad code has not downloaded by the time the browser tries to render each zone.

Of course, your current install of the BSA ad code will work just fine, but it’s in your best interest to upgrade to the new BSA ad code install to reap the performance improvement. This async install of the BSA ad code is now our default install and we will be working to encourage publishers to make the change until we can phase out the legacy version 100%.

Special Thanks

We would not be “clued-in” to techniques and methods for doing this without the work of Google Evangelist and YSlow creator Steve Souders. His book High Performance Web Sites is a must read, and we also suggest keeping up with his blog: http://www.stevesouders.com/blog/ – there is a wealth of information there now, and he will be publishing some posts in the coming weeks on 3rd party content (ads, widgets, analytics) that I am sure will be valuable.  Steve was also kind enough to take a look at our snippets before todays release.

header image copyrighted by Roland

119 Responses to “New Feature: Non-blocking, Asynchronous Ad Code”

  1. Todd – keep up the great work. BuySellAds just keeps getting better and better!

    Reply
  2. Congrats, guys! What a great feature to be a part of.

    Reply
  3. Congrats on the big upgrade, look forward to speeding up my sites :)

    Reply
  4. I believe we need to put “Main snippet” in the Footer instead of the HEAD tag.

    Reply
  5. Nice move! I’m updating mine asap. :)

    Reply
  6. Code didnt work when placed in header but when placed below header it worked…

    Reply
  7. I believe you can remove the line: bsa.type = ‘text/javascript';
    … since all scripts without the type attribute are assumed “text/javascript”.

    Also, shouldn’t you be setting the “async” attribute to either “async” or an empty string, as per the HTML5 spec? (see: http://dev.w3.org/html5/spec/Overview.html#boolean-attribute)

    Reply
    • No, setting it to “true” is correct, check out this comment here explaining the difference: http://www.stevesouders.com/blog/2009/12/01/google-analytics-goes-async/#comment-1173

      Reply
      • Okay, are you sure you don’t mean the boolean value _true_, rather than the string “true”? … i.e. this is also valid:

        script.async = true; // no need for setAttribute()

        Your way will work, but it’s not inline with the specification from where it originated.

        Reply
        • yeah, us using “true” is technically illegal, but it’s still true. Stylistically, it would be a good idea to use bsa.async = true; vs. the current method. We will make this update, but anyone who grabbed it before this update will still be a-OK :)

          Reply
          • James raises a good point, and the code referenced in the linked page above @stevesouders.com is technically incorrect as well (although, as you point out, “true” fortunately still equates to boolean true!)

            According to James’ link @ whatwg, “The async and defer attributes are boolean attributes.” Thus, both your code above and Steve’s referenced code should use true, not “true.” :-) Ultimately, though, this is a tiny flaw in an great achievement, with very real and significant performance implications. Thanks for the awesome collaboration!

  8. I just switched to the asynchronous code, and it seams to work fine for the most part. Except the ads don’t always load on my permalink pages. If I force-reaload the page they load fine, but they don’t if I just visit them normally. And if I reload the page (non-forcing) the ads, again, don’t show up. What’s going on?

    Reply
  9. How long does it take for the custom CSS to pick up? I have made some changes, but these CSS changes don’t seem to work for me :-( (tested with FireBug)

    Reply
    • It should pick up right away, within a few seconds. There certainly is a chance that it’s not getting to our edge location in Amsterdam that fast for you, however. Where I am (Boston) I’m seeing the custom css you added (with Firebug also). If you are not seeing it by the time you get this comment notification, please ping us at support@buysellads.com so that we can test out the latency a bit more for the Amsterdam edge :)

      Reply
      • Thanks Todd, but I think this was a caching issue on my side. Just quitted Safari and empty its caches and it’s fine now (all other browsers I was able to test as well).

        Great addition by the way. Really speeds up our homepage load time!

        Reply
  10. Fantastic innovation.
    As I recall, in the last blog posts we had another speed optimization.

    Let’s speed up the internet one step at a time!

    Reply
  11. Installed the code in 10 minutes – works like a charm. There’s one thing that does not validate according to the w3c validator:

    Attribute “rel” exists, but can not be used for this element.

    …”bsap_1237474″ class=”bsarocks” rel=”f0e2d4a2e2ba2b3f701e20ef61b8bfb5″>

    Any way to fix this?

    J

    Reply
    • Yes, this was an oversight on our part and we’re working on a fix so that we can get the value from something other than the rel attribute that’s causing validation to fail. I will post here when we have that ready and we’ll also be updating the get ad code page in everyone’s account. If people have already installed the new ad code and do not care about this validating, the ad code will still support what they have already installed.

      Reply
    • Hi Jensa, just wanted to let you know that we have switched this up a bit so that the code now validates :)

      Reply
  12. In Firefox 5 the Advertise Here box doesn’t appear:
    http://wallpaperstock.net/

    Only the ads appear.

    Reply
  13. Still have some significant issues with the ads “not firing”… argh…

    Reply
    • fyi, we have about a dozen people with this issue right now and are working on a fix. We will post here when it’s all set and also email each of the people who have reported to let them know what to do next.

      Reply
      • Please count me in with this issue on ‘spotty’ ad firing. Thanks very much! Love it regardless!

        Reply
        • thanks for the feedback. we’re working now to finish up final testing on our fix for this issue that is happening with about a dozen users. once we finish testing for each case to be 100% certain we will push out the new release and life will be good for us all :) I will post an update in the comments here and also email each site owner personally.

          Reply
        • fyi, as we confirmed via support, everything is all set now.

          Reply
  14. Shouldn’t be any issues using W3 Total Cache, right?

    http://wordpress.org/extend/plugins/w3-total-cache/

    Reply
  15. Very cool feature, nice work Todd!

    Reply
  16. Yay! Going to implement it right now.

    Reply
  17. not working properly.. some ads not showing up… reverted back to normal code. waiting got update……

    Reply
  18. As an update, for some reason ads only show up after refreshing the page, but not on first load. I am using WP Super Cache, not sure if this is the issue. Also, the new CSS is not implementing the proper margins I have put in the CSS (default) via the new system: margin right is showing up as 0px even though it should be 4px (this is with the float:left method).

    On another note, strangely, the ads aren’t showing up at ALL on my index templates (home page, page 2, etc) or single posts, but are on my wordpress “pages”.

    Reply
  19. The horizontal side by side 125×125 do not work for my blog. It is working find witouth float:left; in Anchor Style — but when i put float:left; in Anchor Style, my sid bar area in the mess. It seems do not work with my widget style — is there any way to make it work?

    Reply
  20. Hi Todd
    My problem is, I want to display the ads as two-column in the widgets. How
    now I have to codes and snippets where i should put them ? in header.php or footer.php and which of the snippets i should put it in the widgets box ?

    Reply
    • Hi Otba, the main snippet it what goes in header.php right below the opening BODY tag. Then, the second snippet for the zone goes in the widget box where you want the ads to display.

      Reply
      • Hey Todd, I found out that it doesn’t really matter where you put the main snippet. You can put it in the header, below the opening body tag, or footer and it’s still work.

        Reply
      • I did that todd, BUT when i update my wordpress and BuySellAds plugin, the pictures of ads has disappeared- any solutions pleas.. see that http://logotalks.com
        thanks

        Reply
        • Otba, I hate to say this but your site is extremely messed up. You have two opening html tags, two opening body tags, etc… you will need to get your sites code straightened out before we can help you here.

          Reply
          • I check out my footer.php and header.php I don’t find two opening html tags or two opening body tags ..!!!

          • go to your site, view source, and search for <body and you will have two results.

          • Hi again,
            The ads was work before few days, Before i update my wordpress and BSA plugin to the last version. !
            I will contact with the programer to konw what is the problem

            Thanks

          • I have contact with the programmer, he said there aren’t any problems in the code..some taqs will add auto through the past posts
            I solved the problem by back to previous version of BSA Plugin .. and it works well

            thanks Todd

  21. Thanks Todd. Everything is perfect now :)

    Reply
  22. Hey guys, this code is simple gr8, just patient and replace all code with new one for all your ad places not for only one, after u will see that CSS is ok :)

    Reply
  23. Great work Todd, just updated the code on my blog :D

    Reply
  24. Although the new code loads ads more fast but still i have a problem! My 125×125 ads are not shown horizontally even after adding float:left; to the Anchor Style :(. All 125×125 ads are shown vertically in a line making my sidebar even more worse in look :(
    I cleared my cache but the problem still persists. I have all zones with new code and the main snippet is places just after the body tag! Please help!

    Reply
  25. hi Todd,

    please technically explain why you cannot place the script in the HEAD, but only in BODY?

    Txs!
    Aaron

    Reply
    • - IE 6/7 have trouble with async code in the head.
      – Anything in the head is blocking even with async’ code, the less that’s in the head the better.

      Reply
  26. Hi can someone please contact me from buysellads.com, you do not seem to have a contact form and I do not wish to click 10,000 links to get an answer to a simple question

    Reply
  27. The new code doesn’t allow you to call the code twice for pages that you want to show the ads above and below the fold. For example, if you have ads at the top of the page in the sidebar and want the ads to show again at the bottom of a very long post, it will not work.

    Is there a fix for that?

    Reply
    • To make multiple drops of the same zone on a page, add “_1″, “_2″, etc to the ID of the containing div. For example, when you grab the ad code from your account it will be something like:

      <div id=”bsap_[zone]” class=”bsarocks” rel=”[site]”></div>

      You just need to append the _1 to the id for the second drop:

      <div id=”bsap_[zone]_1″ class=”bsarocks” rel=”[site]”></div>

      Reply
  28. This ad installation code in not working on chrome and firefox, however its working on IE

    Reply
    • can you send us some more details in a suport ticket? The code’s woking fine on many sites right now, so I’m sure it’s something we can help you with.

      Reply
  29. Ok, is there any way I could add rel”nofollow” to the <a class"adhere…" , at least for now … don't have any adds sold at the moment

    Reply
  30. This sounds Great! Slow loading ADs have always been like a nail in the eye, even to a such extent that some people (like me) are very reluctant to add ADs to their pages.

    However, I would prefer to add the code right before the closing body tag. Or maybe even after the DOM-ready event.

    Reply
  31. great..so this helps to load the data even faster..

    keep this great job..this is the future of advertising..

    Reply
  32. feed to remain up to date with your up following posts. Thank you!

    Reply
  33. Thank you Todd,
    Buysellads is always ahead and ready to help.

    Reply
  34. Thx Todd!
    Very Good Information.
    Will Compare the Pagespeed difference with Google Page Speed Test.

    Reply
  35. I_m definitely going to get one of these at the
    end of the month

    Reply
  36. i hope one day one of my website gets approved and i can use it too.

    Reply
  37. Its like you read my mind! You seem to know so much about this, like you
    wrote the book in it or something. I think that you could do with some pics to drive the
    message home a little bit, but instead of that, this
    is excellent blog. An excellent read. I will certainly be back.

    Reply
  38. This post offers clear idea for the new viewers of blogging, that genuinely how to do blogging and site-building.

    Reply
  39. Muzammil Hussain January 11, 2013

    any idea about good Hd wallpapers site ?

    Reply
  40. wapspro March 19, 2013

    Yes, I am having the same question. Can i use it for my 4images wallpapers site? http://hd-wallpapers-download.com . This is somewhat difficult when install the add code.

    Reply
  41. Magnificent beat ! I would like to apprentice while you
    amend your website, how could i subscribe for a weblog site?
    The account helped me a applicable deal. I had been tiny bit familiar of this your broadcast
    provided vivid transparent concept

    Reply
  42. I was extremely pleased to uncover this site. I want to to thank you
    for your time for this particularly wonderful read!!

    I definitely enjoyed every little bit of it and i also
    have you saved to fav to see new stuff on your blog.

    Reply
  43. __e Innenausstattung 3M 3D Prestige Cockpit Dekor
    _e _ls Armaturendekor,Armaturenbrettdekor,Armaturenbrett-Dekor __er Innen-Dekor Innendekor Teile Armaturenbre
    ___ Innenausstattung 3M 3D Prestige Cockpit Dekor __ als Armaturendekor,Armaturenbrettdekor,
    Armaturenbrett-Dekor __er Innen-Dekor Innendekor Teile Armaturenbre D_e Innenausstattung 3M 3D Prestige Cockpit Dekor __
    _ls Armaturendekor,Armaturenbrettdekor,Armaturenbrett-Dekor _der Innen-Dekor Innendekor Teile Armaturenbre,_a fourniture
    Dash-Trim 3M 3D __ur __ v

    Reply
  44. Excellent post however , I was wondering iff you could write a litte more on this topic?
    I’d be very thankful if you could elaborate a little bit more.
    Appreciate it!

    Reply
  45. Asking questions are genuinely good thing if you are not understanding something fully,
    but this piece of writing offers good understanding yet.

    Reply

Leave a Reply