Even Faster Web Sites - PowerPoint PPT Presentation

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

play fullscreen
1 / 47
Download Presentation
Even Faster Web Sites
519 Views
Download Presentation

Even Faster Web Sites

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

  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

  5. 25% discount code: "ssouders25"

  6. Sept 2007

  7. June 2009

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

  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. asynchronous script loading XHR Eval XHR Injection Script in Iframe Script DOM Element Script Defer document.write Script Tag

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

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

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

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

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

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

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

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

  21. before after

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

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

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

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

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

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

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

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

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

  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) other languages: $| or FileHandleautoflush (Perl), flush (Python), ios.flush (Ruby) html image image script call PHP's flush() 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 blocked by HTML document html image image script different domains case study: Google search google image image script image 204

  39. takeaways focus on the frontend run YSlow: http://developer.yahoo.com/yslow this year's focus: JavaScript 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/sxsw-20090314.ppt