Download
even faster web sites n.
Skip this Video
Loading SlideShow in 5 Seconds..
Even Faster Web Sites PowerPoint Presentation
Download Presentation
Even Faster Web Sites

Even Faster Web Sites

123 Vues Download Presentation
Télécharger la présentation

Even Faster Web Sites

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  19. 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/

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

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

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

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

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

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

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

  27. 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); } }

  28. coupling wrap-up

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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