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
