Fri, Sep 10, 2010
Tweet
Vote on HN
Ive been using DFP (DoubleClick for Publishers - formerly Google Ad Manager) to serve ads as it has some certain features I really need.
The downside of using DFP is that its browser side performance sucks big time. On my site, I use the experimental Iframe tagging, which basically writes an iframe in place of the ad and loads the third party ad codes into it. This runs asynchronously and is nice, but the DFP's bootstrap javascript blocks rendering and it needs to load 3 javascript files from Google serially. This bootstrap must be available before trying to fill an ad slot.
The Goal
Show the story title and body to the user As Soon As Possible
The Problem
The instructions of implementing the Iframe tagging is as such.
In the <head>...</head> section :-
<!-- PUT THIS TAG IN THE head SECTION -->
<script src="http://partner.googleadservices.com/gampad/google_service.js" type="text/javascript"></script>
<script type="text/javascript">
GS_googleAddAdSenseService("ca-pub-xxxxxxxxxxxxxxxx");
GS_googleEnableAllServices();
</script>
<script type="text/javascript">
GA_googleUseIframeRendering();
</script>
<!-- END OF TAG FOR head SECTION -->
And where the ad slot needs to be displayed always in the <body>...</body>:-
<script type="text/javascript">
GA_googleFillSlotWithSize("ca-pub-xxxxxxxxxxxxxxxx", "slot_name", 728, 90);
</script>
The resulting waterfall chart of this method :-
Requests #3, #4 and #5 is the bootstrap for DFP. The green line indicates the first paint event.
It is clear that
The browser needs to make 3 sequential requests
Until these 3 javascripts are downloaded and parsed, the rendering cannot begin. - The user is affectively staring at a blank screen.
The browser is doing nothing else while downloading these files.
The Workaround
I was going to mark this section as a "solution" to the problem... but it isint. The page is still susceptible to frontend SPOF .. That is if the servers hosting the DFP JavaScripts is unaccessible, that calls for a terrible user experience on my site.
What I did was simply moved the bootstrap to just before the first time the GA_googleFillSlotWithSize() function was called. i.e. move the bootstrap from the <head> to the <body> part of the page.
The waterfall chart for this is :-
Requests #3, #7 and #8 is the bootstrap for DFP. The green line indicates the first paint event.
It is clear that
The browser still needs to make 3 sequential requests
While the bootstrap was loading, the user can see the header of the site, providing visual feedback that something is happening. - The start render did not have to wait.
The browser is downloading images, etc referred to earlier while downloading the bootstrap.
There is 200ms improvement in the time at which the user can start reading the story.
Here is a video comparing the 2 loading methods :-
If anyone has better ways to embed DFP, please let me know via comments below.
The Solutions
There are 2 ways to solve this
Have source ordered HTML where the adcodes are always after the content in the HTML source of the page. This ensures that the user can start reading while DFP does its blocking thing. - A site redesign is in planning and that would implement this step.
DFP changes the way it works... by replacing the evil document.write with DOM manipulation techniques so the scripts can be loaded asynchronously.
So next time if a third party script provider tells you that certain code must be in the <head> of the HTML, don't believe them and question them.
PS: All tests were done from ie7 from Dulles, VA using WebPageTest.org, ie8 also showed similar behavior.
Requests #3, #4 and #5 is the bootstrap for DFP. The green line indicates the first paint event.
It is clear that
Requests #3, #7 and #8 is the bootstrap for DFP. The green line indicates the first paint event.
It is clear that