Thursday, March 17, 2011

Your Web, Half a Second Sooner

At Google we’re constantly trying to make the web faster — not just our corner of it, but the whole thing. Over the past few days we’ve been rolling out a new and improved version of show_ads.js, the piece of JavaScript used by more than two million publishers to put AdSense advertisements on their web pages. The new show_ads is small and fast, built so that your browser can turn its attention back to its main task — working on the rest of the web page — as soon as possible. This change is now making billions of web pages every day load faster by half a second or more.

The old show_ads did lots of work: loading additional scripts, gathering information about the web page it was running on, and building the ad request to send back to Google. The new show_ads has a different job. It creates a friendly (same-origin) iframe on the web page, and starts the old script with a new name, show_ads_impl, running inside that iframe. The _impl does all the heavy lifting, and in the end the ads look exactly the same. But there’s a substantial speed advantage: many things happening inside an iframe don’t block the web browser’s other work.

How much of an effect this has depends on context: a page with nothing but ads on it isn’t going to get any faster. But on the real-world sites we tested, the latency overhead from our ads is basically gone. Page load times with the new asynchronous AdSense implementation are statistically indistinguishable from load times for the same pages with no ads at all.

The new show_ads is a drop-in replacement for the old one: web site owners don’t need to do anything to get this speed-up. But these dynamically-populated friendly iframes are finicky beasts. For now, we’re only using this technique on Chrome, Firefox, and Internet Explorer 8, with more to come once we’re sure that it plays well with other browsers.

And what if you’ve built a page that loads AdSense ads and then manipulates them in exotic ways not compatible with friendly iframes? (This is the web, after all, land of “What do you mean that’s ‘not supported’? I tried it, and it worked!”) You can set “google_enable_async = false” for any individual ad slot to revert to the old blocking behavior. But if your site loads ads in some tortuous way because you were looking for latency benefits, consider giving the straightforward invocation of show_ads.js a whirl. Because now, we’re fast.

31 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. Congratulations! I couldn't help thinking though that if the latency overhead from Google ads is "basically gone", then the Ads Latency Team is now... redundant! Oh well - I hear Facebook's hiring ;-p

    ReplyDelete
  3. Excellent news for wpo workers!

    ReplyDelete
  4. Sweet, this is awesome! Nice work Michael and team. Is it possible to load the code itself asynchronously as well (ok, now I'm just greedy).

    ReplyDelete
  5. I understand the need to limit browsers, but it seems like just those 3 is a little restrictive. For example, I use Opera, which would likely work with this new method if I masked my user agent. Would it make more sense to blacklist?

    ReplyDelete
  6. Is Adsense still serving content from third parties? (Bad example: an ad for McDonalds coming from mcdonalds.com.) Last time I checked this is what caused the biggest slowdown, at least according to the timelines on various speed test sites.

    @Brian: Chrome, Firefox and IE8 cover at least 80% of visitors which is a pretty big chunk.

    ReplyDelete
  7. Would you consider making it possible for sites to directly include the appropriate iframe, rather than having the script construct it? That would allow Google ads without including third-party scripts directly on the site.

    ReplyDelete
  8. @BrianH, they did say they'll roll it out to other browsers once they're sure it works well with them. Patience, good sir, they're working as fast as they want. :P

    ReplyDelete
  9. And so interesting how this excludes Safari (built with webkit which is same underlying engine as Chrome so therefore more likely to be supported...)

    And note, this basically suggests that google is admitting that their ad code was previously slowing down the internet in a visible way.

    ReplyDelete
  10. Why not just run Adblock Plus and never pay to see those ads again -- and block adware spying/tracking at the same time?

    ReplyDelete
  11. This comment has been removed by the author.

    ReplyDelete
  12. or, put another way, you've fixed code that was slowing down our web.

    good spin though

    ReplyDelete
  13. Fans of other browsers: fear not, we plan to extend as soon as it's safe to do so. The async iframe technique is delicate enough, though, that each of the three browsers we're launching on now had some idiosyncrasies that we had to address — and several we didn't launch on certainly have new and different ones.

    @Matt, thanks for your concern for my job security. But see the comments from @Patrick Meenan and @Anon4yqABAte: Ads Latency Team has no shortage of future work.

    —Michael Kleber

    ReplyDelete
  14. So I guess I'll turn on an adblocker for adsense then until you fix the performance bug for Safari.

    ReplyDelete
  15. I would read this, if I didn't have to squint.

    Setting the line-height to 160% and using a slightly bigger font to reduce the words per line would make this blog a much better read.

    ReplyDelete
  16. I'd love to see the code. Is there an unminified version available?

    ReplyDelete
  17. That was much needed as Google Pagespeed always use to show up an optimization tip for external scripts loading on my blog.

    - Sagar
    http://aspiredtechie.com

    ReplyDelete
  18. Michael,
    While this is a welcome move, it is still not as efficient as it should be.

    Right now, our website uses 8 js files 1 is ours (minified and combined) and 7 from Google:
    1 G Analytics js file
    6 Adsense js files

    We are seriously thinking of dropping Adsense because of that.

    Cheers

    ReplyDelete
  19. Definitely a welcome move, but Adsense is still slow and unfortunately this also didn't fix a core issue causing javascript errors for many users over many years (which should be an easy fix...). Very frustrating...

    "Unable to post message to http://googleads.g.doubleclick.net. Recipient has origin mydomain.com"

    Solution is at the following, please deploy:
    http://stackoverflow.com/questions/2541797/javascript-errors-from-google-adsense

    ReplyDelete
  20. Yeah, sam feeling as comment from CXNET and MISH15 ... there are several errors that need to be fixed. Since this new feature is up, we also noticed problems in Firefox 3.6, that loading of the page freezes on loading AdSense files and scripts, and never finishes ! Reloading page brings up the adsense banners almost immediatly and page works ok. Till next click ...

    Also, most of the adsense codes and scripts come up as problematic and slow on ANY measurement tool, including Google Webmaster Tools !!! Google Chrome says

    Combine external JavaScript (7)
    7 JavaScript resources served from pagead2.googlesyndication.com.

    ReplyDelete
  21. I'm not seeing these improvements on DFP. When will these be rolled out?

    ReplyDelete
  22. How about dfp? It is still blocking loads. When will this been upgraded?

    ReplyDelete
  23. Hey hotshots, how do you handle expandable ads without a buster?

    ReplyDelete
  24. Firefox for Mobile is blocking Adsense ads by default, leaving a white spot. This is killing revenue streams. How can FF block ads by default? It is time to stop using Firefox? What is Google doing about it?

    ReplyDelete
  25. When can we expect SSL support? Can i have a copy of the .js file in my server and point to that file istead of google server?

    ReplyDelete
  26. I was happy with the new iframe method until I noticed flash ads now overlap *everything*, including lightboxes and the semi-transparent backgrounds behind lightboxes. It looks incredibly tacky when it happens, like I'm trying to force visitors to click ads or something by having them overlap lightboxed content.

    Can't flash ads be set to wmode=transparent to fix this? I do it manually with the new YouTube iframes, but I don't dare try anything with Adsense.

    ReplyDelete
  27. I've noticed that even with the faster loading ads, they still have to finish loading before body.onload is called. This isn't exactly "async".

    I need to run script in body.onload that decides which form field to focus on. But this script doesn't run until the ads are finished loading. This makes it appear that my site is a poor performer.

    Can this be addressed somehow?

    ReplyDelete
  28. Hi

    Load time without adsense is 1.4 seconds
    Load time with 1 adsense block is 2.9 seconds


    You say it basically does not take any extra time. Thats either completely wrong, or there might be some extra tricks I don't know.

    ReplyDelete
  29. The saga continues. I just started using head.js to async. load all my large script's (jQuery, jQuery-UI, etc.) and the speed difference is incredible! In Chrome (Linux 15.0.874.106), pages load almost twice as fast. Simply incredible.

    But, now the pages load so fast that the google adsense code, even at the bottom of the page, loads before all external css has had a chance to been fully applied, and thus seems to trigger adsense meltdown. My guess is, that since my adsense div's are "resized" by incoming application of ext. css (some added dynamically for mobile vs. pc), adsense code believes them to be moved or manipulated.

    What a shame. I can't fully use the new speed because the google ad's die prematurely. If anyone knows of a way to make the ad's wait until the async. javascript and ext. css loads, I would love to hear about it.

    ReplyDelete