Fri, Sep 10, 2010
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.
Show the story title and body to the user As Soon As Possible
The instructions of implementing the Iframe tagging is as such.
In the <head>...</head> section :-
<!-- PUT THIS TAG IN THE head SECTION -->
<!-- END OF TAG FOR head SECTION -->
And where the ad slot needs to be displayed always in the <body>...</body>:-
GA_googleFillSlotWithSize("ca-pub-xxxxxxxxxxxxxxxx", "slot_name", 728, 90);
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
The browser is doing nothing else while downloading these files.
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.
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.