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

3. 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 time spent on the frontend

4. 80-90% of the end-user response time is spent on the frontend. Start there. greater potential for improvement simpler proven to work the performance golden rule

8. Sept 2007

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

10. June 2009

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

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

13. scripts block blocks parallel downloads and rendering 7 secs: IE 8, FF 3.5(?), Chr 2, Saf 4 9 secs: IE 6-7, FF 3.0, Chr 1, Op 9-10, Saf 3

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

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

16. 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('');

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

18. 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');

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

20. only supported in IE (just landed in FF 3.1) script and main page domains can differ no need to refactor JavaScript Script Defer

21. document.write(" "); parallelization only works in IE parallel downloads for scripts, nothing else all document.write s must be in same script block document.write Script Tag

22. browser busy indicators

23. 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 browser busy indicators

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

25. || 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). Load Scripts Without Blocking

26. 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 and the winner is...

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

29. 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();

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

31. before after

32. || 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 Loading Scripts Without Blocking

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

34. 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 baseline coupling results (not good)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

53. 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!

54. Avoiding @import – @import @import @import url('stylesheet1.css'); @import url('stylesheet2.css'); no blocking in fact, improves progressive rendering in IE http://stevesouders.com/tests/atimport/import-import.php

55. link @import @import url('stylesheet2.css'); blocks in IE http://stevesouders.com/tests/atimport/link-import.php

56. link with @import blocks in all browsers! http://stevesouders.com/tests/atimport/link-with-import.php @import url('stylesheet2.css'); includes

57. link blocks @import blocks in IE http://stevesouders.com/tests/atimport/link-blocks-import.php @import url('stylesheet2.css'); includes

58. many @imports @import url('stylesheet1.css');... @import url('stylesheet6.css'); loads script before stylesheets in IE http://stevesouders.com/tests/atimport/many-imports.php

59. link no blocking in all browsers http://stevesouders.com/tests/atimport/link-link.php

60. going beyond gzipping Tony Gentilcore, Chapter 9, Even Faster Web Sites Rule 4: Gzip Components from HPWS HTTP/1.1 request: Accept-Encoding: gzip,deflate response: Content-Encoding: gzip Apache 2.x: AddOutputFilterByType DEFLATE text/html text/css application/x- javascript

61. benefits of gzipping 70% reduction in transfer size not just for HTML!! all text: JavaScript, CSS, XML, JSON not binary: images, PDF, Flash

62. so what's the issue? 15% of your users get uncompressed responses surprize! why? old browsers? no Netscape Navigator 3 – 0.0% Netscape Communicator 4 – 0.1% Opera 3.5 – 0.0% IE <3 – 0.01% clue: most prevalent in the Middle East

63. who's stripping? proxy, A-V softwareAccept-Encoding header Ad Muncherstripped CA Internet Security Suite Accept-EncodXng: gzip, deflate CEQURUXstripped Citrix Application Firewallstripped ISA 2006stripped McAfee Internet Security 6.0 XXXXXXXXXXXXXXX: +++++++++++++ Norton Internet Security 6.0 ---------------: ------------- Novell iChain 2.3stripped Novell Client Firewallstripped WebWasherstripped ZoneAlarm Pro 5.5 XXXXXXXXXXXXXXX: XXXXXXXXXXXXX proxies and anti-virus software disable compression for easier response filtering

64. check your site (http://stevesouders.com) recorded headers for 500 unique users 14% missing A-E, 1% munged A-E ACCEPT_ENCODING=gzip, deflate ACCEPT_ENCODXNG=gzip, deflate _______________=----- ------- indicators overallnull A-E VIA53 (11%)28 (41%) PROXY_CONNECTION12 (2%)12 (18%) CONNECTION missing24 (5%)15 (22%) ACCEPT_CHARSET missing173 (35%)54 (79%) SERVER_PROTOCOL = HTTP/1.045 (9%)17 (25%) UA_CPU = x86111 (22%)43 (63%)

65. 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 performance analyzers (HPWS)

66. performance analyzers (EFWS) 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

67. performance analyzers (other) 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

68. what to do don't assume compression go the extra mile to reduce response size event delegation (-5%) relative URLs (-3%) minify HTML, JavaScript, and CSS (-4%) use CSS rules over inline styles (-1%) alias long JavaScript symbol names (??) Thanks, Tony! see Tony's chapter in Even Faster Web Sites

69. homage to Open Source UA Profiler Cuzillion Episodes Hammerhead SpriteMe

71. UA Profiler tracks browser performance traits http://stevesouders.com/ua/ go to the test page your browser automatically walks through the tests (requires JS) results recorded and shared publicly currently 20K test results, 13K unique testers, 70 browsers help out by running the test!

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

75. Episodes framework for timing web sites based on JavaScript timers works on Ajax web apps uses window.postMessage (multiple listeners) potential industry standard http://stevesouders.com/episodes/

76. Measuring Performance Episodes dev boxsynthetic testing bucket testing real user data Hammerhead

78. Hammerhead moving performance testing upstream http://stevesouders.com/hammerhead/ Firebug extension load M URLs N times, empty & primed cache record average & median time add'l features: export data load time measurement modal cache clearing combine with bandwidth throttler

80. SpriteMe don't say "bite me!#*", say "SpriteMe!" create sprites with ease http://spriteme.org/ bookmarklet sprite generator: coolRunnings by Jared Hirsch http://jaredhirsch.com/coolrunnings/about/ http://bitbucket.org/jared/coolrunnings/

81. focus on the frontend run YSlow ( http://developer.yahoo.com/yslow) and Page Speed! ( http://code.google.com/speed/page-speed/ ) speed matters takeaways

82. Bing: Yahoo: Google: AOL: Shopzilla: 1 http://en.oreilly.com/velocity2009/public/schedule/detail/8523 2 http://www.slideshare.net/stoyan/yslow-20-presentation 3 http://en.oreilly.com/velocity2009/public/schedule/detail/7579 4 http://en.oreilly.com/velocity2009/public/schedule/detail/7709 +2000 ms -4.3% revenue/user 1 +400 ms -5-9% full-page traffic 2 +400 ms -0.59% searches/user 1 fastest users +50% page views 3 -5000 ms +7-12% revenue 4 impact on revenue

83. hardware – reduced load Shopzilla – 50% fewer servers bandwidth – reduced response size http://billwscott.com/share/presentations/2008/stanford/HPWP-RealWorld.pdf cost savings

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

85. Steve Souders souders@google.com http://stevesouders.com/docs/oscon-20090722.ppt 1:00 – book signing at Barnes & Noble 3:20 – free consulting at Google booth