Dear Google: W-W-W-WHY Y-YOU DO DAT?
March 13th, 2011
Complete Asynchronous ad loading using DFP and LABjs
March 3rd, 2011UPDATE: 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) :-
<script type='text/javascript' src='http://partner.googleadservices.com/gampad/google_service.js'>
</script>
<script type='text/javascript'>
GS_googleAddAdSenseService("ca-pub-7046344781760701");
GS_googleEnableAllServices();
</script>
<script type='text/javascript'>
GA_googleUseIframeRendering();
</script>
Then wherever we want the ads to display, we put something like this :-
<script type='text/javascript'>
GA_googleFillSlotWithSize("ca-pub-7046344781760701", "test_async_lb", 728, 90);
</script>
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.
Internet connectivity in Myanmar (Burma)
February 21st, 2011Last weekend ( Feb 19th & 20th) I was in Yangon for BarCamp Yangon.
It probably had an attendance of > 4k participants… Probably one of the largest BarCamps ever, despite the fact that the internet connectivity in Myanmar sucks big time…. Really unusable…
I used internet at the free “wifi” internet at the hotel and the wifi arranged by the organizers. Both places, the speeds I’ve seen range from 0 kbps to ~50 kbps…. most of the time around 0 kbps 
Internet access
Most locals use internet at cafes/internet shops. The average shop would have 512 kbps connection shared between 15 to 20 computers charging 300 to 500 MKY ( US$ 0.3 to 0.5 ) per hour for usage. Some give discount if you bring your own laptop, some don’t. I didn’t get a chance to visit a cafe, this is based on what people told me.
Most geeks have a computer at home, very few have laptops. ADSL is available but is very expensive. It costs > $1000 setup fee + $120/month for a mere 512 kbps. Only the very rich people can afford it.
Mobile internet was unheard of until few weeks ago. They don’t have gprs there, but recently they launched 3G and CDMA for wireless internet. CDMA would charge around $0.10/minute for 1 or 2 mbps (don’t remember clearly).
Out of the few sites i tried opening, only Facebook seemed to be usable. This is due to the enormous effort they invest in frontend performance. Google search was also fast, but none of the sites in the results seemed to open.
The average DNS query took me 2+ seconds to resolve. DNS access is limited to the ISPs crappy nameserver, I couldn’t use opendns or any external nameservers.
Almost all local sites are hosted outside of Myanmar cause domestic connectivity is as bad as international routes. Server co-location fees are 10x in Burma than in America.
Censorship
I didn’t use the internet much… but here is what I found.
Among the sites/services blocked :-
- My secret project – Details/screenshot below
- Twitter – Blocked normally, but works using https or apps.
- Gmail – works on browser but IMAP doesn’t work at all… The most surprising aspect of it is that 99% of ppl there use gmail.
- SSH – connections to port 22 are completely blocked, but I’ve been told that setting ssh server on port 443 works fine. I used DNS tunnel and it kinda worked occasionally for emergency usage – after trying for 10 – 15 mins i could get 1 min or so of connectivity.
- gtalk – Using Pidgin – doesn’t work at all.
I am building a new webservice called www.{secret}.com . Hardly anyone knows about it. Its got only 3 users, and has nothing to do with Burma. That site was somehow blocked in Burma (only one ISP). I cant understand how {secret} could trigger any phrase based blocklists or something.. Makes me feel important if governments block my site…
My moment of pride :-
Summary
BarCamp Yangoon 2011 was probably the biggest barcamp ever with about 4500 to 5000 participants (with about 20 – 30 foreigners traveling in from abroad). An interesting activity was file swapping. There were about 20 – 30 computers setup with shared folders which participants used to exchange software/music/etc.
Based on a simple survey, everyone uses Firefox. Very few people use Linux. Windows is very popular due to rampant piracy.
I was considering giving a talk on web performance optimization on day 2 of the event, but didn’t go thru with it cause an American expat covered the topic well on day 1.
One thing that I should have done would be to download all the Velocity Conference videos and pass it around… unfortunately it occurred to me to late. Ill try to arrange it now…
The country has great people… It can succeed in this digital age if only America and other western countries lift sanctions on Burma..
DreamHost: Best customer service ever!
January 13th, 2011Please wait for a site operator to respond.
You are now chatting with ‘Brandon’
Brandon: Hi, how may I help you?
sajal: hi this is a clients account where im supposed to setup the VPS. its been almost a day since the VPS was requested…. when can i expect it to be provisioned? it still tells me “You currently have 1 pending VPS web server order in our queue.”
Brandon: Unfortunately it can take up to a couple of days at times. If you’d like to have this expedited, please submit a ticket via “Support” > “Contact Support”
sajal: wow.. couple of days.. seems like i made a mistake recommending dreamhost… let me try the support ticket… hope any issues with hosting in the future also dont take couple of days…
Brandon: Thanks, take care.
Chat session has been terminated by the site operator.
Don’t get it? couple of days to provision a damn VPS? I am used to getting physical dedicated servers provisioned at Softlayer in < 4 hours. Amazon EC2 instances in < 1 minute…
The only reason im using DreamHost is cause this is a clients project where fancy panels for domains, settings, etc would be easily user maintainable.
SimpleCDN goes down – a case for using multiple CDN providers
December 12th, 2010CDN provider SimpleCDN has been down since last few days, with their customers venting their anger via online channels such as twitter.
To know more about what a CDN is, please read this post.
The reason given by them :-
Dear SimpleCDN Customer,
I am writing this letter to update you on a situation that has been developing for the past 72 hours between SimpleCDN and our technology and infrastructure providers, SoftLayer and Hosting Services, Inc.
Two days ago these organizations decided to immediately terminate our contract and suspend service on much of our infrastructure in Dallas, Seattle and Washington, D.C. This infrastructure constitutes the majority of our delivery network for our value services, including on-demand and live streaming services.
[...]
Their full statement can be read at http://admin.simplecdn.com/. Quite likely this won’t be the permanent url for their rant.
My first thought was that they didn’t pay their bills.. but this doesn’t seem to be the case here. I’d speculate that this is related to DMCA or even some connection to Wikileaks. We need Softlayer’s side of the story to make an opinion. I’m a Softlayer user for few years, I refuse to believe it that they did it for competitive advantage. There is more to it!
MaxCDN has stepped in to help stranded SimpleCDN customers to get their sites up asap at lower costs.
So… let me be Captain Hindsight here and say what SimpleCDN users should have done all along.
Keep a hot spare CDN ready to be deployed at a moments notice.
There are many CDN services, like Softlayer, CloudFront, etc which have pay as you go plans, no upfront or monthly costs. Sign up for them, set up your zones, and keep the required CNAMEs handy. If your prime CDN provider goes under, has high latency, or any other issue, switching to these alternate CDNs is simply a change in the DNS zone. This could be automated with Amazon Route 53.
Very easy to implement for origin pull, for uploaded content it doesn’t hurt to store your content on multiple services for redundancy.
Had the users kept a hot spare CDN provider ready, it would have taken them 5 mins (plus the DNS propagation time) to switch to another provider.
In most cases, where only css, javascript, images are served by the CDN, frequent users such as admins would have these files in their browser cache and may not feel that anything is broken. For such situations, the answer is passive monitoring.
Bottomline: Everything FAILs…. eventually…
Notes:-
- This blog is hosted at softlayer
- This blog uses MaxCDN
- This blog uses Softlayer’s CDN service
- Before today i hadn’t heard about SimpleCDN
UPDATED: 11:20 (EST) Dec 15
The only 2 statements by SoftLayer on this issue comes in the form of tweets.
FYI, our privacy policy prevents us from discussing customer issues in public. We definitely can’t discuss customers of customers. – twitter
@simplecdn happy to have you as a direct customer. Send over your requirements so we can price it out for you. ^SK – twitter
IMHO the second tweet is rubbing salt on SimpleCDN’s wound.
It is common for companies under legal threat to not make any statements which may or maynot be used against them during litigation.
