rmurphey

adventures in front-end consulting

« Back to blog

Viewed 202 times
Favorited 0 times
About Me

I am a JavaScript application developer and consultant,
working to help clients write client-side applications that treat
JavaScript as a rich and powerful language, not a toy. I'm the
co-host of the rollicking yayQuery podcast, the organizer of the unexpectedly epic TXJS, a contributor to the jQuery Cookbook from O'Reilly, and the author of jQuery Fundamentals. I'm also active in trying to get more women to participate in the tech community, even if it means I have to get up on stage myself. I live in Durham, North Carolina, with my partner, two dogs, and two terrible cats.

Get Updates
 

Fix for slow-loading Google ads

Google's AdSense ads, and lots of others, are added to pages using Javascript, and if that Javascript appears early in the page's HTML, it can seriously slow down the rendering of the rest of the page. That's because browsers generally refuse to do any further rendering of the page until they have a requested Javascript file in hand. We ran into this with the ad in the left column of some pages on DailyStrength.org, which appears above the page content in the HTML; when we switched to a new ad provider, which required fetching multiple Javascript files, the issue was even more pronounced. Since these ads only work when Javascript is enabled anyway, I decided to use some DOM manipulation (via jQuery, which is already on the page) to load the ad script in a hidden div at the bottom of the HTML, and then relocate the Javascript-generated iframe containing the ad to an empty, visible div where the ad needed to be: 

$('#ad_hide').find('iframe').appendTo('#ad');
Now, loading the Javascript doesn't slow down the rendering of the content, and the ad appears right after the page is loaded.

Loading mentions Retweet

Posted over 2 years ago

4 comments

Apr 11, 2008
rdmey | Remote Javascript with document.write() is killing me said...
[...] Fix for slow-loading Google ads [...]
Dec 22, 2008
Kelsey said...
Can you explain why you need the find iframe?

I must be doing something wrong as I can't get it to work (I am fairly new at this)...

Do you run that code snippet in the head with a document ready?

thanks...(Feel free to email me as well)

Nov 23, 2009
lampstax said...
Genious .. I spent a long time trying to lazy load google ads .. this solution pure genious.

Thanks for sharing

Mar 27, 2010
links for 2010-03-27 @ Webmaster Chronic Blog said...
[...] Fix for slow-loading Google ads | blog.rebeccamurphey.com jquery code [...]

Leave a comment...