Even Faster Web Sites

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

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

3. time spent on the frontend April 2008

4. Make fewer HTTP requests • Use a CDN • Add an Expires header • Gzip components • Put stylesheets at the top • Put scripts at the bottom • Avoid CSS expressions • Make JS and CSS external • Reduce DNS lookups • Minify JS • Avoid redirects • Remove duplicate scripts • Configure ETags • Make AJAX cacheable 14 Rules

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 (StoyanStefanov, Nicole Sullivan)

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

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

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

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

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

17. XHR Injection varxhrObj = 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

18. Script in Iframe <iframe src='A.html' width=0 height=0 frameborder=0 id=frame1></iframe> • iframe must have same domain as main page • must refactor script: • // access iframe from main page • window.frames[0].createNewDiv(); • // access main page from iframe • parent.document.createElement('div'); http://stevesouders.com/cuzillion/?ex=10012

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("<scr" + "ipt type='text/javascript' src='A.js'>" + "</scr" + "ipt>"); parallelization only works in IE parallel downloads for scripts, nothing else all document.writes must be in same script block http://stevesouders.com/cuzillion/?ex=10014

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

24. asynchronous JS example: menu.js script DOM element approach <script type="text/javascript"> vardomscript = document.createElement('script'); domscript.src = "menu.js"; document.getElementsByTagName('head')[0].appendChild(domscript); varaExamples = [ ['couple-normal.php', 'Normal Script Src'], ['couple-xhr-eval.php', 'XHR Eval'], ... ['managed-xhr.php', 'Managed XHR'] ]; function init() { EFWS.Menu.createMenu('examplesbtn', aExamples); } init(); </script>

25. before after

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

27. what about inlined code that depends on the script?

28. coupling techniques hardcoded callback window onload timer degrading script tags script onload

29. technique 5: script onload <script type="text/javascript"> varaExamples = [['couple-normal.php', 'Normal Script Src'], ...]; function init() { EFWS.Menu.createMenu('examplesbtn', aExamples); } vardomscript = document.createElement('script'); domscript.src = "menu.js"; domscript.onloadDone = false; domscript.onload = function() { if ( ! domscript.onloadDone ) { init(); } domscript.onloadDone = true; }; domscript.onreadystatechange = function() { if ( "loaded" === domscript.readyState ) { if ( ! domscript.onloadDone ) { init(); } domscript.onloadDone = true; } } document.getElementsByTagName('head')[0].appendChild(domscript); </script> pretty nice, medium complexity

30. case study: Google Analytics recommended pattern:1 <script type="text/javascript"> vargaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> varpageTracker = _gat._getTracker("UA-xxxxxx-x"); pageTracker._trackPageview(); </script> document.write Script Tag approach blocks other resources 1http://www.google.com/support/analytics/bin/answer.py?hl=en&answer=55488

31. case study: dojox.analytics.Urchin1 _loadGA: function(){ vargaHost = ("https:" == document.location.protocol) ? "https://ssl." : "http://www."; dojo.create('script', { src: gaHost + "google-analytics.com/ga.js" }, dojo.doc.getElementsByTagName("head")[0]); setTimeout(dojo.hitch(this, "_checkGA"), this.loadInterval); }, _checkGA: function(){ setTimeout(dojo.hitch(this, !window["_gat"] ? "_checkGA" : "_gotGA"), this.loadInterval); }, _gotGA: function(){ this.tracker = _gat._getTracker(this.acct); ... } Script DOM Element approach "timer" coupling technique (script onload better) 1http://docs.dojocampus.org/dojox/analytics/Urchin

32. asynchronous loading & coupling async technique: Script DOM Element • easy, cross-browser • doesn't ensure script order coupling technique: script onload • fairly easy, cross-browser • ensures execution order for external script and inlined code

33. bad: stylesheet followed by inline script browsers download stylesheets in parallel with other resources that follow... ...unless the stylesheet is followed by an inline script http://stevesouders.com/cuzillion/?ex=10021 best to move inline scripts above stylesheets or below other resources use Link, not @import

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

35. iframes: most expensive DOM element load 100 empty elements of each type tested in all major browsers1 1IE 6, 7, 8; FF 2, 3.0, 3.1b2; Safari 3.2, 4; Opera 9.63, 10; Chrome 1.0, 2.0

36. iframes block onload parent's onload doesn't fire until iframe and all its components are downloaded workaround for Safari and Chrome: set iframe src in JavaScript <iframe id=iframe1 src=""></iframe> <script type="text/javascript"> document.getElementById('iframe1').src="url"; </script>

37. scripts block iframe IE script no surprise – scripts in the parent block the iframe from loading Firefox script script Safari Chrome Opera

38. stylesheets block iframe (IE, FF) IE stylesheet surprise – stylesheets in the parent block the iframe or its resources in IE & Firefox Firefox stylesheet stylesheet Safari Chrome Opera

39. stylesheets after iframe still block (FF) IE stylesheet surprise – even moving the stylesheet after the iframe still causes the iframe's resources to be blocked in Firefox Firefox stylesheet Safari Chrome Opera stylesheet

40. iframes: no free connections iframe shares connection pool with parent (here – 2 connections per server in IE 7) parent iframe

41. flush the document early gotchas: • PHP output_buffering – ob_flush() • Transfer-Encoding: chunked • gzip – Apache's DeflateBufferSize before 2.2.8 • proxies and anti-virus software • browsers – Safari (1K), Chrome (2K) other languages: $| or FileHandleautoflush (Perl), flush (Python), ios.flush (Ruby) html image image script call PHP's flush() html image image script

42. flushing and domain blocking you might need to move flushed resources to a domain different from the HTML doc html image image script blocked by HTML document html image image script different domains case study: Google search google image image script image 204

43. takeaways focus on the frontend run YSlow: http://developer.yahoo.com/yslow this year's focus: JavaScript speed matters

44. impact on revenue Google: Yahoo: Amazon: +500 ms  -20% traffic1 +400 ms  -5-9% full-page traffic2 +100 ms  -1% sales1 1 http://home.blarg.net/~glinden/StanfordDataMining.2006-11-29.ppt 2 http://www.slideshare.net/stoyan/yslow-20-presentation

45. cost savings hardware – reduced load bandwidth – reduced response size http://billwscott.com/share/presentations/2008/stanford/HPWP-RealWorld.pdf

46. if you want better user experience more revenue reduced operating expenses the strategy is clear Even Faster Web Sites

47. Steve Souders souders@google.com http://stevesouders.com/docs/sxsw-20090314.ppt