Complete Asynchronous ad loading using DFP and LABjs
Wed, Mar 2, 2011
Tweet
Vote on HN
UPDATE: The hack is now available on GitHub.
8th May 2011: This seems to be having problems, will investigate and update when i have time. Pls revert to normal DFP tags for now.
One of the biggest challenges when optimizing performance of websites is third party content - specifically advertisements.
Most ad networks and servers use evil document.write() in their JavaScript(and even nested document.writes) which block further rendering of the page until their code has completed execution. In this blogpost, I'll show how you can use DFP's iframe tagging(read warnings there) combined with LABjs and little bit of JavaScript hackery to make any ad load asynchronously with negligible impact on rest of the pageload.
Attention Deficit Disorder version : Before - After
NOTE: Use the method below entirely at your own risk! Use only if you know what you are doing...
Current blocking method
DFP has an experimental method to load ads called iframe tagging. The JS looks like this :-
The Bootstrap: In <head> (Does not have to be in <head> but before the first GA_googleFillSlotWithSize call) :-
With this method, the bootstrap does some blocking. First it loads a JavaScript then the following functions document.write another <script> tag which must load sequentially again. The GA_googleFillSlotWithSize function is relatively inexpensive. All it seems to do is document.write an iframe with various targeting information as parameters in the URL and does not block further rendering. The advantage of iframe tagging is that slow ad networks don't fuck up your page. But the bootstrap is very expensive as shown in this waterfall chart.
This is what it looks like.
The hack
Last few days, I've been playing a little with LABjs, specifically its complete async loader.
After playing with LABjs, ive come up with the following LABjs snippet :-
// intercepts the script inserted via document.write and loads it via LABjs
function docwrt(str){
var script = str.replace(/(.*)\=\"/g, '').replace(/\"(.*)/g, '');
$LAB.script(script).wait(function(){
GA_googleUseIframeRendering();
// following function makes the magic happen!
function Wrapper_googleFillSlotWithSize(pubid, slotname, width, height, target){
var docwrttemp = function(str){
target = document.getElementById(target);
target.innerHTML = str;
};
document.write = docwrttemp;
GA_googleFillSlotWithSize(pubid, slotname, width, height);
}
// usage of the new wrapper here "leaderboard" and "skyscraper" are target div ids
Wrapper_googleFillSlotWithSize("ca-pub-7046344781760701", "test_async_lb", 728, 90, "leaderboard");
Wrapper_googleFillSlotWithSize("ca-pub-7046344781760701", "test_async_sky", 160, 600, "skyscraper");
});
}
document.write = docwrt; //intercepts document.write from below script
$LAB.script("http://partner.googleadservices.com/gampad/google_service.js").wait(function(){
GS_googleAddAdSenseService("ca-pub-7046344781760701");
GS_googleEnableAllServices();
});
(note: Since I'm lazy, I haven't restored document.write back to its original glory.)
Here Wrapper_googleFillSlotWithSize is a wrapper around GA_googleFillSlotWithSize which takes a 5th argument - target - This is the id of <div> where we want to show the ad.
Here is a sample page using this hack. Id appreciate it if I get some feedback about this method via comments below. As I said earlier, use your own better judgment before using this snippet in production. I welcome criticism but will not accept blame if this doesn't work for you.
In my simple example, it may seem it takes longer to fully load the page, but if you have many other things on the page, the overall effect will be better with this hack. Moreover, if you are already using LABjs on your site, this is a no-brainer. With this method, even if Google is inaccessible(for whatever reasons) it wont SPOF your page.
Slow motion video of pageloads on IE8:-
Generated via webpagetest.org
Left is normal method, right is hacked version.
Currently tested on IE(7 thru 9), Firefox 3.6.11, Chrome 10.0.648.45 dev and an unknown version of Safari.
Conclusions...
The world would be a much better place without the evil document.write(). Google should know better. They should make a function like Wrapper_googleFillSlotWithSize by default.
