First off, if you haven’t installed both Yahoo YSlow! and Google Page Speed then bookmark this page and come back to it later. Chances are you have bigger fish to fry on the rest of your website.
Now that you’re using these tools, your noticing some of these AdSense calls are taking 300ms to render – sometimes multiple SECONDS…wait but when I combine those two facts that means my content below the ads isn’t rendering yet…
The good news, is, it’s possible to unblock the rendering of your page’s content. The bad news, is, it involves repositioning the ads after the page has been loaded (a little bit of a flicker).
The mechanics of the solution involve three pieces:
- A placeholder <div> where the ad should be displayed
- Shoving the actual ad elements as one of the last items in your HTML document (so everything else gets rendered first)
- jQuery code to reposition the ad back into its placeholder slot
The container for your ads should be pretty straightforward, you know what size ad unit you’re including so block out the section of your page:
<div> <div id="fmad_placeholder_Detail_Page_Bottom" style="height: 90px; line-height: 90px;"> </div> </div>
Bottom Page Content:
Your moving div that actually calls AdSense/Ad Manager code:
jQuery Magic to reposition your ads back to where they should be:
Now, if you have any other dynamic content on the pages, you may have to manually reposition the ads again. This is simply done by calling:
Hope that helps!
Leave a Reply