June 23, 2010

Speeding up 3rd party widgets using ASWIFT

This is a summary of the talk by Arvind Jain, Michael Kleber from Google at velocityconf about how to write widgets using same domain iframe using document.write. Speed improvements of over 90% in loading widgets with this change.

  • Web is slow
    • Avg page load time 4.9s
    • 44 resources, 7 dns requests, 320kb
    • Lot of 3rd party widgets
      • digg/facebook/etc
  • Measurements of 3rd party widgets
    • Digg widget
      • 9 HTTP requests, 52 kB
      • scripts block the main page from downloading
      • stylesheets blocks the main page from rendering in IE
    • Adsense takes up  12.8% page load time
    • Analytics takes up < 5%   ( move to async widget )
    • Doubleclick takes up 11%
  • How to make Google AdSense “fast by default”
    • Goals / Challenges
      • Minimize blocking the publishers page
      • Show the ad right where the code is inserted
      • Must run in publishers Domain
    • Solution (ASWIFT) - Asynchronous Script Written into IFrame Tag
      • Make show_ads.js a tiny loader script
      • Loader creates a same-domain iframe (using document.write)
      • Loads the rest of the show_ads into the iframe by document.write() of a <script> tag
      • This loading of iframe is asynchronous.
    • Browser specific surprises
      • Problems with parallel downloads of same script in IE
      • Iframe creation inside <head> in Firefox has a problem
      • Requesting headers in Chrome was buggy
      • Forward-Back-Reload behavior is buggy (refetching instead of using cache)
      • document.domain vs friendly iframes

1 comment:

5 Quick Changes To Improve Your Website’s Performance « Web Dev & Design said...

[...] You would think that these would all be well engineered, but many are not. For example, the Digg widget makes nine requests, is 52 KB and blocks the main page from [...]