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
Todd – keep up the great work. BuySellAds just keeps getting better and better!
Congrats, guys! What a great feature to be a part of.
Congrats on the big upgrade, look forward to speeding up my sites :)
I believe we need to put “Main snippet” in the Footer instead of the HEAD tag.
The main snippet should be added right after the opening BODY tag on your site.
Nice move! I’m updating mine asap. :)
Code didnt work when placed in header but when placed below header it worked…
Worked when placed in the footer but did not work when placed below the tag… Awaiting response from support.
Hi Jonathan, the snippet should be placed right after the opening BODY tag on your site.
same problem here!!
the issue with your site is that you will need to convert ALL of your zones to the new async version. A bit different from Jonathan’s above for those reading. We’re still working on his and will update here with info.
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)
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
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.
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 :)
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?
To clarify: I have two zones on the pages that don’t work properly, and I have replaced both code snippets.
I am experiencing this problem on IE8 & Chrome. Firefox & Safari however work fine.
I’m having the issue in Firefox and Chrome, as well as Safari. I don’t have IE readily available to test through, at the moment.
having the same issue. some ads load and some don’t. frustrating…!
I’m having the same issue. I’m going to stick with the old codes for now.
All known issues have been fixed :) You should be all set now.
hi guys, the snippet should be placed right after the opening BODY tag on your site.
Ah, well that works. Thanks for the quick fix.
mine aren’t firing on permalink pages, or even on homepages sometimes. very spotty.
Hi John, you should be all set now. The fix for this went out late yesterday and all of the expires headers should have updated for everyone.
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)
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 :)
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!
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!
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
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.
Hi Jensa, just wanted to let you know that we have switched this up a bit so that the code now validates :)
In Firefox 5 the Advertise Here box doesn’t appear:
http://wallpaperstock.net/
Only the ads appear.
Firefox 5 :) Did you mean something else? I don’t think Firefox 5 exists yet :)
:) Sorry about that! I meant Firefox 2.0
Hi Toni, all known issues have been fixed at this time and you should be all set.
Still have some significant issues with the ads “not firing”… argh…
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.
Please count me in with this issue on ’spotty’ ad firing. Thanks very much! Love it regardless!
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.
fyi, as we confirmed via support, everything is all set now.
Shouldn’t be any issues using W3 Total Cache, right?
http://wordpress.org/extend/plugins/w3-total-cache/
no, W3TC is not the issue. W3TC rocks :)
I use it and have no problems, but do remember to flush your cache after updating.
Very cool feature, nice work Todd!
Yay! Going to implement it right now.
not working properly.. some ads not showing up… reverted back to normal code. waiting got update……
all known issues have been fixed at this time, you should be good to go.
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”.
Ooh! I figured it out (at least the problem in my last paragraph). There seems to be a fatal incompatibility with the LinkWithin plugin. I disabled it and ads load fine on index & single posts pages.
Still having probs with the css etc though.
thanks for the extra info, we have the fix for this that we are still in the process of testing. your issues are all related to the same core issue causing pain for some of you. we’ll have this testing finished asap, we’re just taking our time to be 100% sure since an ad code release is a serious thing :)
Awesome Todd. You guys rock!
any new ETA?
it’s live now, but we’re waiting until we are sure the cache/headers have expired before telling the world :) (so, anyone who reads this comment will no obviously know).
I will test it out again tonight. Thanks Todd :P
I’m still experiencing the problem with the CSS. Help?
disregard, found a workaround. thx!
What is your workaround? I’m still having issues with CSS.
hi Quan, you should be all set with the CSS now. We found an issue with the right margin on the Anchor element that has now been fixed. If you need a hand with something else, please don’t hesitate to ping us at support@buysellads.com and we’ll dig in and help you figure this out.
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?
Please post the complete code with “float:left;”. My sidebar is showing 1 ad unit instead of 4 blocks horizontally.
Hi Dana, seems like everything is all set for you now? We’re not seeing the issue indicated here in the comment.
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 ?
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.
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.
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
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.
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
Thanks Todd. Everything is perfect now :)
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 :)
Great work Todd, just updated the code on my blog :D
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!
Thanks! Its working fine now :)
hi Todd,
please technically explain why you cannot place the script in the HEAD, but only in BODY?
Txs!
Aaron
- 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.
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
Hi Lewis, you can find our contact info on this page here: http://buysellads.com/about/contact or you can click on the “support” link in the header and submit a support ticket.
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?
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>
THANK YOU! That’s awesome and exactly what I needed.
This ad installation code in not working on chrome and firefox, however its working on IE
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.