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

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

4. time spent on the frontend Empty CachePrimed Cache www.aol.com97% www.ebay.com95%81% www.facebook.com95%81% www.google.com/search47%0% search.live.com/results67%0% www.msn.com98%94% www.myspace.com98% en.wikipedia.org/wiki94%91% www.yahoo.com97%96% www.youtube.com98%97% April 2008

5. The Performance Golden Rule 80-90% of the end-user response time is spent on the frontend. Start there. greater potential for improvement simpler proven to work

9. Sept 2007

10. June 2009

11. 14 R ULES 1.M AKE FEWER HTTP REQUESTS 2.U SE A CDN 3.A DD AN E XPIRES HEADER 4.G ZIP COMPONENTS 5.P UT STYLESHEETS AT THE TOP 6.P UT SCRIPTS AT THE BOTTOM 7.A VOID CSS EXPRESSIONS 8.M AKE JS AND CSS EXTERNAL 9.R EDUCE DNS LOOKUPS 10.M INIFY JS 11.A VOID REDIRECTS 12.R EMOVE DUPLICATE SCRIPTS 13.C ONFIGURE ET AGS 14.M AKE AJAX CACHEABLE

12. Even Faster Web Sites Splitting the initial payload Loading scripts without blocking Coupling asynchronous scripts Positioning inline scripts Sharding dominant domains Flushing the document early Using iframes sparingly Simplifying CSS Selectors Understanding Ajax performance..........Doug Crockford Creating responsive web apps............Ben Galbraith, Dion Almaer Writing efficient JavaScript.............Nicholas Zakas Scaling with Comet.....................Dylan Schiemann Going beyond gzipping...............Tony Gentilcore Optimizing images...................Stoyan Stefanov, Nicole Sullivan

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

14. scripts block blocks parallel downloads and rendering 7 secs: IE 8, FF 3.5(?), Chr 2, Saf 4 http://stevesouders.com/cuzillion/?ex=10008 What's Cuzillion? 9 secs: IE 6-7, FF 3.0, Chr 1, Op 9-10, Saf 3

15. a tool for quickly constructing web pages to see how components interact Open Source http://stevesouders.com/cuzillion/ Cuzillion 'cuz there are a zillion pages to check

16. JavaScript Functions Executed before onload www.aol.com115K30% www.ebay.com183K44% www.facebook.com1088K 9% www.google.com/search15K45% search.live.com/results17K24% www.msn.com131K31% www.myspace.com297K18% en.wikipedia.org/wiki114K32% www.yahoo.com321K13% www.youtube.com240K18% 26% avg 252K avg Splitting the Initial Payload

17. split your JavaScript between what's needed to render the page and everything else load "everything else" after the page is rendered separate manually (Firebug); tools needed to automate this (Doloto from Microsoft) load scripts without blocking – how?

18. 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) MSN.com: parallel scripts

19. Loading Scripts Without Blocking XHR Eval XHR Injection Script in Iframe Script DOM Element Script Defer document.write Script Tag

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

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

22. Script in Iframe <iframe src='A.html' width=0 height=0 frameborder=0 id=frame1> 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

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

24. Script Defer 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

25. document.write Script Tag document.write(" "); 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

26. browser busy indicators

27. status bar progress bar logocursor block render block onload normal Script Src FFIE,FF FFIE,FF XHR Eval no XHR Injection no Script in Iframe IE,FFFFIE,FFFFnoIE,FF Script DOM Element FF noFF Script Defer FF IE,FF document.write Script Tag FFIE,FF FFIE,FF good to show busy indicators when the user needs feedback bad when downloading in the background

28. Ensure scripts execute in order: necessary when scripts have dependencies IE: http://stevesouders.com/cuzillion/?ex=10017 http://stevesouders.com/cuzillion/?ex=10017 FF: http://stevesouders.com/cuzillion/?ex=10018 http://stevesouders.com/cuzillion/?ex=10018 Avoid scripts executing in order: faster – first script back is executed immediately http://stevesouders.com/cuzillion/?ex=10019 ensure/avoid ordered execution

29. Loading Scripts Without Blocking || down- loads domains can differ existing scripts browser busy ensures order size (bytes) normal Script Src noyes IE,FF ~50 XHR Eval IE,FFno ~500 XHR Injection IE,FFnoyesno ~500 Script in Iframe IE,FFno IE,FFno~50 Script DOM Element IE,FFyes FF ~200 Script Defer IEyes IE,FFIE~50 document.write Script Tag IE * yes IE,FFIE~100 * Only other document.write scripts are downloaded in parallel (in the same script block).

30. 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 orderno order no busy show busy no busy preserve order

31. Loading Scripts Without Blocking don't let scripts block other downloads you can still control execution order, busy indicators, and onload event What about inline scripts?

33. synchronous JS example: menu.js var aExamples = [ ['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();

34. asynchronous JS example: menu.js var domscript = document.createElement('script'); domscript.src = "menu.js"; document.getElementsByTagName('head')[0].appendChild(domscri pt); var aExamples = [ ['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 DOM element approach

35. before after

36. Loading Scripts Without Blocking || down- loads domains can differ existing scripts browser busy ensures order size (bytes) normal Script Src noyes IE,FF ~50 XHR Eval IE,FFno ~500 XHR Injection IE,FFnoyesno ~500 Script in Iframe IE,FFno IE,FFno~50 Script DOM Element IE,FFyes FF ~200 Script Defer IEyes IE,FFIE~50 document.write Script Tag IE * yes IE,FFIE~100 * Only other document.write scripts are downloaded in parallel (in the same script block). !IE

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

38. baseline coupling results (not good) Preserve Execution Order Load Script & Image in Parallel normal Script Src allIE8, Saf4, Chr2 XHR Eval -all XHR Injection -all Script in Iframe -all Script DOM Element FF, OpIE, FF, Saf, Chr Script Defer FF, Saf, Chr, OpIE, (Saf4, Chr2) * document.write Script Tag allSaf4, Chr2 * Scripts download in parallel regardless of the Defer attribute. need a way to load scripts asynchronously AND preserve order

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

40. technique 1: hardcoded callback var aExamples = [['couple-normal.php', 'Normal Script Src'],...]; function init() { EFWS.Menu.createMenu('examplesbtn', aExamples); } var domscript = document.createElement('script'); domscript.src = "menu.js"; document.getElementsByTagName('head')[0].appendChild(domscri pt); init() is called from within menu.js not very flexible doesn't work for 3 rd party scripts

41. technique 2: window onload var aExamples = [['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); } 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

42. technique 3: timer var domscript = document.createElement('script'); domscript.src = "menu.js"; document.getElementsByTagName('head')[0].appendChild(domscript); var aExamples = [['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); load if interval too low, delay if too high slight increased maintenance – EFWS

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

44. technique 4: degrading script tags var aExamples = [['couple-normal.php', 'Normal Script Src'],...]; function init() { EFWS.Menu.createMenu('examplesbtn', aExamples); } var domscript = 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); elegant, flexible (cool!) not well known doesn't work for 3 rd party scripts (unless...)

45. technique 5: script onload var aExamples = [['couple-normal.php', 'Normal Script Src'],...]; function init() { EFWS.Menu.createMenu('examplesbtn', aExamples); } var domscript = 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); pretty nice, medium complexity

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

47. multiple script example: menutier.js var aRaceConditions = [['couple-normal.php', 'Normal...]; var aWorkarounds = [['hardcoded-callback.php', 'Hardcod...]; var aMultipleScripts = [['managed-xhr.php', 'Managed XH...]; var aLoadScripts = [['loadscript.php', 'loadScript'],...]; var aSubmenus = [["Race Conditions", aRaceConditions], ["Workarounds", aWorkarounds], ["Multiple Scripts", aMultipleScripts], ["General Solution", aLoadScripts]]; function init() { EFWS.Menu.createTieredMenu('examplesbtn', aSubmenus); }

48. technique 1: managed XHR var aRaceConditions = [['couple-normal.php', 'Normal...]; var aWorkarounds = [['hardcoded-callback.php', 'Hardcod...]; var aMultipleScripts = [['managed-xhr.php', 'Managed XH...]; var aLoadScripts = [['loadscript.php', 'loadScript'],...]; var aSubmenus = [["Race Conditions", aRaceConditions],...]; function init() { EFWS.Menu.createTieredMenu('examplesbtn', aSubmenus); } EFWS.Script.loadScriptXhrInjection("menu.js", null, true); EFWS.Script.loadScriptXhrInjection("menutier.js", init, true); XHR Injection asynchronous technique does not preserve order – we have to add that before after

49. EFWS.loadScriptXhrInjection // Load an external script. // Optionally call a callback and preserve order. loadScriptXhrInjection: function(url, onload, bOrder) { var iQ = EFWS.Script.queuedScripts.length; if ( bOrder ) { var qScript = { response: null, onload: onload, done: false }; EFWS.Script.queuedScripts[iQ] = qScript; } var xhrObj = 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(''); } process queue (next slide)or... eval now, call callback save response to queue add to queue (if bOrder)

50. EFWS.injectScripts // Process queued scripts to see if any are ready to inject. injectScripts: function() { var len = EFWS.Script.queuedScripts.length; for ( var i = 0; i < len; i++ ) { var qScript = 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 ordernon-blocking works in all browserscouples with inlined code works with scripts across domains

51. technique 2: DOM Element and Doc Write Preserve Execution Order Load Scripts in Parallel Load Script & Image in Parallel Script DOM Element FF, Op FF, Op, IE, Saf, Chr FF, IE, Saf, Chr Script Defer IE, Saf, Chr, FF, Op IE document.write Script Tag IE, Saf, Chr, FF, Op IE, Op Firefox & Opera – use Script DOM Element IE – use document.write Script Tag Safari, Chrome – no benefit; rely on Safari 4 and Chrome 2

52. EFWS.loadScripts loadScripts: function(aUrls, onload) { // first pass: see if any of the scripts are on a different domain var nUrls = aUrls.length; var bDifferent = false; for ( var i = 0; i < nUrls; i++ ) { if ( EFWS.Script.differentDomain(aUrls[i]) ) { bDifferent = true; break; } // pick the best loading function var loadFunc = 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 ( var i = 0; i < nUrls; i++ ) { loadFunc(aUrls[i], ( i+1 == nUrls ? onload : null ), true); }

53. multiple scripts with dependencies var aRaceConditions = [['couple-normal.php', 'Normal...]; var aWorkarounds = [['hardcoded-callback.php', 'Hardcod...]; var aMultipleScripts = [['managed-xhr.php', 'Managed XH...]; var aLoadScripts = [['loadscript.php', 'loadScript'],...]; var aSubmenus = [["Race Conditions", aRaceConditions],...]; function init() { EFWS.Menu.createTieredMenu('examplesbtn', aSubmenus); } EFWS.Script.loadScripts(["menu.js", "menutier.js"], init); scripts on same domain: order preserved, no blocking scripts on different domain: order preserved: all loads scripts in parallel: all except Saf3, Chr1 load script and image in parallel: FF, Saf4, Chr2

54. asynchronous scripts wrap-up Technique Preserve Order Load Scripts in Parallel Load Script & Image in Parallel single script Script DOM Element na all multiple scripts, no dependencies Script DOM Element naall multiple scripts, dependencies, same domain Managed XHRall multiple scripts, dependencies, same domain Script DOM Element (FF, Op), Doc Write (IE, Saf, Chr) all !Saf3, !Chr1 FF, Saf4, Chr2

55. case study: Google Analytics recommended pattern: 1 var gaJsHost = (("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")); var pageTracker = _gat._getTracker("UA-xxxxxx-x"); pageTracker._trackPageview(); document.write Script Tag approach blocks other resources 1 http://www.google.com/support/analytics/bin/answer.py?hl=en&answer=55488

56. case study: dojox.analytics.Urchin 1 _loadGA: function(){ var gaHost = ("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) 1 http://docs.dojocampus.org/dojox/analytics/Urchin

57. 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 multiple interdependent external and inline scripts: much more complex (see hidden slides) concatenate your external scripts into one!

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

59. eBay MSN MySpace Wikipedia Positioning Inline Scripts

60. remember inline scripts carry a cost avoid long-executing inline scripts don't put inline scripts between stylesheets and other resources

61. Sharding Dominant Domains but Rule 9 says "Reduce DNS lookups"?! remove DNS lookups that aren't heavily used split domains that are on the critical path how find "critical path"?

62. www.yahoo.com

63. http://news.google.com news.google.com

64. downgrading to HTTP/1.0 HTTP/1.1 – 2 connections/server HTTP/1.0 – 4 (IE 6,7), 8 (FF2) HTTP/1.1 has fewer connections because persistent connections are on by default best for static content example: http://wikipedia.org/http://wikipedia.org/

65. connections per server by browser newer browsers open more connections* best to shard across 2-4 domains** HTTP/1.1HTTP/1.0 IE 6,724 IE 866 Firefox 1.5, 228 Firefox 366 Safari 3,444 Chrome66 Opera 944 * http://www.stevesouders.com/blog/2008/03/20/roundup-on-parallel-connections/ ** http://yuiblog.com/blog/2007/04/11/performance-research-part-4/

66. flushing 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 document blocks resources other languages: $| or FileHandle autoflush (Perl), flush (Python), ios.flush (Ruby) html image script html image script call PHP's flush()

67. flushing and domain blocking you might need to move flushed resources to a domain different from the HTML doc html image script html image script blocked by HTML document different domains

68. successful flushing Google Search external resource downloaded early content visible to the user google image script image 204 http://www.google.com/images/nav_logo4.png

69. most expensive DOM element blocks parent's onload workaround: set iframe src via setTimeout Using Iframes Sparingly function setSrc() { document.getElementById('if1').src="url"; } setTimeout(setSrc, 0);

70. types of CSS selectors ID selectors: #toc {} class selectors:.chapter {} type selectors: A {} adjacent sibling selectors: H1 + #toc {} child selectors: #toc > LI {} descendant selectors: #toc A {} universal selectors: * {} attribute selectors: href="#index"] {} psuedo classes and elements: A:hover {}

71. writing efficient CSS https://developer.mozilla.org/en/Writing_Efficient_CSS "The style system matches a rule by starting with the rightmost selector and moving to the left through the rule's selectors. As long as your little subtree continues to check out, the style system will continue moving to the left until it either matches the rule or bails out because of a mismatch." #toc > LI { font-weight: bold; } find every LI whose parent is id="toc" #toc A { color: #444; } find every A and climb its ancestors until id="toc" or DOM root (!) is found

72. real world levels of CSS # Rules# elements Avg Depth AOL2289162813 eBay30558814 Facebook2882196617 Google Search925528 Live Search37644912 MSN.com103888611 MySpace9324449 Wikipedia795133310 Yahoo!80056413 YouTube8218179 average103392312

73. testing typical CSS "costly"selectors aren't always costly (at typical levels) are these selectors "costly"? DIV DIV DIV P A.class0007 {... } 1K rules (vs. 20K) same amount of CSS in all test pages 30 ms avg delta http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/

74. testing expensive selectors 1K rules (vs. 20K) same amount of CSS in all test pages 2126 ms avg delta! truly expensive selector A.class0007 * {... } compare to: DIV DIV DIV P A.class0007 {... } the key is the key selector – the rightmost argument

75. Simplifying CSS Selectors efficient CSS comes at a cost – page weight focus optimization on selectors where the key selector matches many elements reduce the number of selectors

76. Performance Tools HttpWatch http://www.httpwatch.com/ Firebug http://getfirebug.com/ Page Speed http://code.google.com/speed/page-speed/ YSlow http://developer.yahoo.com/yslow/ Smush.it http://smush.it/ CSS Sprite Generator http://spritegen.website- performance.org/ SpriteMe http://spriteme.org/ (in progress) Hammerhead http://stevesouders.com/hammerhead/ Cuzillion http://cuzillion.com/

77. Performance Analyzers: HPWS rules YSlow Page SpeedPagetestVRTAneXpert combine JS & CSSXXX use CSS spritesXX use a CDNXX set Expires in the futureXXXXX gzip text responsesXXXXX put CSS at the topXX put JS at the bottomX avoid CSS expressionsXX make JS & CSS external reduce DNS lookupsXX minify JSXXX avoid redirectsXXXX remove dupe scriptsX remove ETagsXXX

78. Performance Analyzers: EFWS rules YSlow Page SpeedPagetestVRTAneXpert don't block UI thread split JS payloadX load scripts async X inline JS b4 stylesheetX write efficient JS min. uncompressed size optimize imagesX X shard domainsX X flush the document avoid iframes simplify CSS selectorsX X

79. Performance Analyzers: other rules YSlow Page SpeedPagetestVRTAneXpert use persistent conns XX X reduce cookies 2.0 X X X avoid net congestion X increase MTU, TCP win X avoid server congestion X remove unused CSSX specify image dimsX use GET for Ajax 2.0 reduce DOM elements 2.0 avoid 404 errors 2.0 avoid Alpha filters 2.0 don't scale images 2.0 X optimize favicon 2.0

80. Top 10 Performance YSlow Page Speed AOL?*yellow eBay82yellow Facebook68red Google Search95green Live Search93green MSN.com72yellow MySpace84yellow Wikipedia66yellow Yahoo!96yellow YouTube77yellow * YSlow wouldn't start.

81. Wikipedia combine 6 scripts, 8 stylesheets add Expires header minify JavaScript, save 39K (36%) avoid inline script after stylesheet 31K (41%) unused CSS remove ETags

82. Yahoo! shard l.yimg.com 46K (49%) unused CSS ~90 very inefficient CSS selectors

83. 1.long HTML doc response 2.flush (good) 3.inline script blocks.js var pageName='HomePagePortal'; 4.scripts block 5.ads.js non-blocking (good) 6.26 bg images – no sprites 7.sharded domains – pics & rtm (good) 8.compress images by 20% 9.thumbs load slowly – HTTP/1.0? 10. remove ETags (?) 11. ~40 inefficient CSS selectors.playgrnd * {} 1 9 76 5 4 3 2 4 4 4 8 www.ebay.com

84. AOL shard portal.aolcdn.com combine 8 scripts simplify CSS selectors avoid inline script after stylesheet jQueryEnabled = true; remove 97K (49%) unused CSS

85. Facebook combine 13 scripts, 6 stylesheets sprite 31 background images reduce images by 106K (44%) put stylesheets above scripts remove 102K (50%) unused CSS

86. MSN.com combine 13 scripts sprite 26 background images put stylesheets above scripts avoid inline script after stylesheet

87. YouTube add Expires header (can't?) minify JavaScript, save ~29K (14%

88. CNet Performance Analysis cool flushed document HTTP/1.0 downgrade opportunities load oreo.moo.rb.combined.js async split i.i.com.com across two domains concatenate 10 scripts sprite 25 CSS background images 30 resources with short Expires 62% (62K) of CSS not used requests: 107 load time: 3.7 secs xfer size: 436K YSlow: F (48)

89. http://www.shopping.com slow spots: top – shard CSS and JS, flush middle – shard images bottom – scripts (async?) use CSS sprites (42 bg images) add future Expires header optimize images (50K, 20%) remove ETags

90. takeaways focus on the frontend run Page Speed and YSlow speed matters

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

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

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

94. Steve Souders souders@google.com http://stevesouders.com/docs/velocity-20090622.ppt