Even Faster Web Sites

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

2. 14 Rules • 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

8. Even Faster Web Sites 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) O'Reilly, June 2009

9. Why focus on JavaScript? Yahoo! Wikipedia eBay AOL MySpace YouTube Facebook

10. Scripts Block <script src="A.js"> blocks parallel downloads and rendering http://stevesouders.com/cuzillion/?ex=10008

11. 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)

12. Advanced Script Loading XHR Eval XHR Injection Script in Iframe Script DOM Element Script Defer document.write Script Tag

13. Summary of Traits *Only other document.write scripts are downloaded in parallel (in the same script block).

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

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

17. synchronous JS example: menu.js <script src="menu.js" type="text/javascript"></script> <script type="text/javascript"> 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>

18. asynchronous JS example: menu.js <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> before after

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

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

22. technique 1: hardcoded callback <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"; document.getElementsByTagName('head')[0].appendChild(domscript); </script> init() is called from within menu.js not very flexible doesn't work for 3rd party scripts

23. technique 2: window onload <iframe src="menu.php" width=0 height=0 frameborder=0> </iframe> <script type="text/javascript"> varaExamples = [['couple-normal.php', 'Normal Script Src'], ...]; function init() { EFWS.Menu.createMenu('examplesbtn', aExamples); } if ( window.addEventListener ) { window.addEventListener("load", init, false); } else if ( window.attachEvent ) { window.attachEvent("onload", init); } </script> init() is called at window onload must use async technique that blocks onload: Script in Iframe does this across most browsers init() called later than necessary

24. technique 3: timer <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'], ...]; function init() { EFWS.Menu.createMenu('examplesbtn', aExamples); } function initTimer(interval) { if ( "undefined" === typeof(EFWS) ) { setTimeout(initTimer, interval); } else { init(); } } initTimer(300); </script> load if interval too low, delay if too high slight increased maintenance – EFWS

25. technique 4: 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() { domscript.onloadDone = true; init(); }; domscript.onreadystatechange = function() { if ( "loaded" === domscript.readyState && ! domscript.onloadDone ) { domscript.onloadDone = true; init(); } } document.getElementsByTagName('head')[0].appendChild(domscript); </script> pretty nice, more complicated

26. John Resig's degrading script tags <script src="menu-degrading.js" type="text/javascript"> varaExamples = [['couple-normal.php', 'Normal Script Src'], ...]; function init() { EFWS.Menu.createMenu('examplesbtn', aExamples); } init(); </script> cleaner clearer safer – inlined code not called if script fails at the end of menu-degrading.js: var scripts = document.getElementsByTagName("script"); varcntr = scripts.length; while ( cntr ) { varcurScript = scripts[cntr-1]; if (curScript.src.indexOf("menu-degrading.js") != -1) { eval( curScript.innerHTML ); break; } cntr--; } http://ejohn.org/blog/degrading-script-tags/

27. technique 5: degrading script tags <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-degrading.js"; if ( -1 != navigator.userAgent.indexOf("Opera") ) { domscript.innerHTML = "init();"; } else { domscript.text = "init();"; } document.getElementsByTagName('head')[0].appendChild(domscript); </script> elegant, flexible (cool!) not well known doesn't work for 3rd party scripts (unless...)

28. what about multiple scripts that depend on each other, andinlined code that depends on the scripts? • two solutions: • Managed XHR • DOM Element and Doc Write

29. multiple script example: menutier.js <script src="menu.js" type="text/javascript"></script> <script src="menutier.js" type="text/javascript"></script> <script type="text/javascript"> varaRaceConditions = [['couple-normal.php', 'Normal...]; varaWorkarounds = [['hardcoded-callback.php', 'Hardcod...]; varaMultipleScripts = [['managed-xhr.php', 'Managed XH...]; varaLoadScripts = [['loadscript.php', 'loadScript'], ...]; varaSubmenus = [["Race Conditions", aRaceConditions], ["Workarounds", aWorkarounds], ["Multiple Scripts", aMultipleScripts], ["General Solution", aLoadScripts]]; function init() { EFWS.Menu.createTieredMenu('examplesbtn', aSubmenus); } </script>

30. technique 1: managed XHR <script type="text/javascript"> varaRaceConditions = [['couple-normal.php', 'Normal...]; varaWorkarounds = [['hardcoded-callback.php', 'Hardcod...]; varaMultipleScripts = [['managed-xhr.php', 'Managed XH...]; varaLoadScripts = [['loadscript.php', 'loadScript'], ...]; varaSubmenus = [["Race Conditions", aRaceConditions], ...]; function init() { EFWS.Menu.createTieredMenu('examplesbtn', aSubmenus); } EFWS.Script.loadScriptXhrInjection("menu.js", null, true); EFWS.Script.loadScriptXhrInjection("menutier.js", init,true); </script> XHR Injection asynchronous technique does not preserve order – we have to add that before after

31. EFWS.loadScriptXhrInjection // Load an external script. // Optionally call a callback and preserve order. loadScriptXhrInjection: function(url, onload, bOrder) { variQ = EFWS.Script.queuedScripts.length; if ( bOrder ) { varqScript = { response: null, onload: onload, done: false }; EFWS.Script.queuedScripts[iQ] = qScript; } varxhrObj = EFWS.Script.getXHRObject(); xhrObj.onreadystatechange = function() { if ( xhrObj.readyState == 4 ) { if ( bOrder ) { EFWS.Script.queuedScripts[iQ].response = xhrObj.responseText; EFWS.Script.injectScripts(); } else { eval(xhrObj.responseText); if ( onload ) { onload(); } } } }; xhrObj.open('GET', url, true); xhrObj.send(''); } save response to queue process queue (next slide) or... eval now, call callback add to queue (if bOrder)

32. EFWS.injectScripts // Process queued scripts to see if any are ready to inject. injectScripts: function() { varlen = EFWS.Script.queuedScripts.length; for ( vari = 0; i < len; i++ ) { varqScript = EFWS.Script.queuedScripts[i]; if ( ! qScript.done ) { if ( ! qScript.response ) { // STOP! need to wait for this response break; } else { eval(qScript.response); if ( qScript.onload ) { qScript.onload(); } qScript.done = true; } } } } ready for this script, eval and call callback bail – need to wait to preserve order if not yet injected preserves external script order non-blocking couples with inlined code works in all browsers works with scripts across domains works with scripts across domains

33. 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

34. EFWS.loadScripts loadScripts: function(aUrls, onload) { // first pass: see if any of the scripts are on a different domain varnUrls = aUrls.length; varbDifferent = false; for ( vari = 0; i < nUrls; i++ ) { if ( EFWS.Script.differentDomain(aUrls[i]) ) { bDifferent = true; break; } } // pick the best loading function varloadFunc = EFWS.Script.loadScriptXhrInjection; if ( bDifferent ) { if ( -1 != navigator.userAgent.indexOf('Firefox') || -1 != navigator.userAgent.indexOf('Opera') ) { loadFunc = EFWS.Script.loadScriptDomElement; } else { loadFunc = EFWS.Script.loadScriptDocWrite; } } // second pass: load the scripts for ( vari = 0; i < nUrls; i++ ) { loadFunc(aUrls[i], ( i+1 == nUrls ? onload : null ), true); } }

35. coupling wrap-up

36. 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

37. case study: Google Analytics dojox.analytics.Urchin:1 _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

38. 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

39. 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>

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

41. 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

42. 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

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

44. 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) html image image script html image image script

45. flushing and domain blocking you might need to move flushed resources to a domain different from the HTML doc html image image script html image image script google image image script image 204

46. Takeaways focus on the frontend run YSlow: http://developer.yahoo.com/yslow this year's focus: JavaScript Split the Initial Payload Load Scripts without Blocking Don't Scatter Inline Scripts speed matters

47. 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

48. Cost Savings hardware – reduced load bandwidth – reduced response size http://billwscott.com/share/presentations/2008/stanford/HPWP-RealWorld.pdf

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

50. Steve Souders souders@google.com http://stevesouders.com/docs/google-20090305.ppt