Presented at SXSW '09, this talk covers five best practices from my next book: Load scripts without blocking, Coupling asynchronous scripts, Don't scatter inline scripts, Use iframes sparingly, and Flush the document early.

1. Steve Souders [email_address] http://stevesouders.com/docs/sxsw-20090314.ppt Even Faster Web Sites Disclaimer: This content does not necessarily reflect the opinions of my employer.

2. the importance of frontend performance 17% 83% iGoogle, primed cache 9% 91% iGoogle, empty cache

3. time spent on the frontend April 2008 Empty Cache Primed Cache www.aol.com 97% 97% www.ebay.com 95% 81% www.facebook.com 95% 81% www.google.com/search 47% 0% search.live.com/results 67% 0% www.msn.com 98% 94% www.myspace.com 98% 98% en.wikipedia.org/wiki 94% 91% www.yahoo.com 97% 96% www.youtube.com 98% 97%

8. 25% discount code: "ssouders25"

9. Sept 2007

10. June 2009

11. Even Faster Websites Split the initial payload Load scripts without blocking Couple asynchronous scripts Don't scatter inline scripts Split the dominant domain Flush the document early Use iframes sparingly Simplify CSS Selectors Ajax performance (Doug Crockford) Writing efficient JavaScript (Nicholas Zakas) Creating responsive web apps (Ben Galbraith, Dion Almaer) Comet (Dylan Schiemann) Beyond Gzipping (Tony Gentilcore) Optimize Images (Stoyan Stefanov, Nicole Sullivan)

12. why focus on JavaScript? AOL eBay Facebook MySpace Wikipedia Yahoo! YouTube

13. scripts block <script src=&quot;A.js&quot;> blocks parallel downloads and rendering http://stevesouders.com/cuzillion/?ex=10008

14. MSN.com: parallel scripts Scripts and other resources downloaded in parallel! How? Secret sauce?! var p= g.getElementsByTagName(&quot;HEAD&quot;)[0]; var c=g.createElement(&quot;script&quot;); c.type=&quot;text/javascript&quot;; c.onreadystatechange=n; c.onerror=c.onload=k; c.src=e; p.appendChild(c) MSN

15. asynchronous script loading XHR Eval XHR Injection Script in Iframe Script DOM Element Script Defer document.write Script Tag

16. XHR Eval script must have same domain as main page must refactor script var xhrObj = getXHRObject(); xhrObj.onreadystatechange = function() { if ( xhrObj.readyState != 4 ) return; eval(xhrObj.responseText); }; xhrObj.open('GET', 'A.js', true); xhrObj.send(''); http://stevesouders.com/cuzillion/?ex=10009

17. XHR Injection var xhrObj = getXHRObject(); xhrObj.onreadystatechange = function() { if ( xhrObj.readyState != 4 ) return; var se=document.createElement('script'); document.getElementsByTagName('head') [0].appendChild(se); se.text = xhrObj.responseText; }; xhrObj.open('GET', 'A.js', true); xhrObj.send(''); script must have same domain as main page http://stevesouders.com/cuzillion/?ex=10015

19. Script DOM Element var se = document.createElement('script'); se.src = 'http://anydomain.com/A.js'; document.getElementsByTagName('head')[0] .appendChild(se); script and main page domains can differ no need to refactor JavaScript http://stevesouders.com/cuzillion/?ex=10010

20. Script Defer <script defer src='A.js'></script> only supported in IE (just landed in FF 3.1) script and main page domains can differ no need to refactor JavaScript http://stevesouders.com/cuzillion/?ex=10013

21. document.write Script Tag document.write (&quot;<scr&quot; + &quot;ipt type='text/javascript' src='A.js'>&quot; + &quot;</scr&quot; + &quot;ipt>&quot;); parallelization only works in IE parallel downloads for scripts, nothing else all document.write s must be in same script block http://stevesouders.com/cuzillion/?ex=10014

22. browser busy indicators

23. browser busy indicators good to show busy indicators when the user needs feedback bad when downloading in the background

25. load scripts without blocking * Only other document.write scripts are downloaded in parallel (in the same script block).

26. and the winner is... XHR Eval XHR Injection Script in iframe Script DOM Element Script Defer Script DOM Element Script Defer Script DOM Element Script DOM Element (FF) Script Defer (IE) XHR Eval XHR Injection Script in iframe Script DOM Element (IE) XHR Injection XHR Eval Script DOM Element (IE) Managed XHR Injection Managed XHR Eval Script DOM Element Managed XHR Injection Managed XHR Eval Script DOM Element (FF) Script Defer (IE) Managed XHR Eval Managed XHR Injection Script DOM Element (FF) Script Defer (IE) Managed XHR Eval Managed XHR Injection different domains same domains no order preserve order no order no busy show busy show busy no busy preserve order

31. before after

32. load scripts without blocking * Only other document.write scripts are downloaded in parallel (in the same script block). !IE

35. baseline coupling results (not good) * Scripts download in parallel regardless of the Defer attribute. need a way to load scripts asynchronously AND preserve order

48. technique 2: DOM Element and Doc Write Firefox & Opera – use Script DOM Element IE – use document.write Script Tag Safari, Chrome – no benefit; rely on Safari 4 and Chrome 2

51. asynchronous scripts wrap-up

56. don't scatter inline scripts eBay MSN MySpace Wikipedia

69. Steve Souders [email_address] http://stevesouders.com/docs/sxsw-20090314.ppt