High Performance Web Sites 14 rules for faster-loading pages

1
Even Faster Web Sites
http//stevesouders.com/docs/oscon-20090722.ppt Di
sclaimer 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
Empty Cache Primed Cache
www.aol.com 97 97
www.ebay.com 95 81
www.facebook.com 95 81
www.google.com/search 47 0
search.live.com/results 67 0
www.msn.com 98 94
www.myspace.com 98 98
en.wikipedia.org/wiki 94 91
www.yahoo.com 97 96
www.youtube.com 98 97
April 2008
4
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
5
(No Transcript)
6
(No Transcript)
7
(No Transcript)
8

• Sept 2007

9
14 Rules

1. Make fewer HTTP requests
2. Use a CDN
3. Add an Expires header
4. Gzip components
5. Put stylesheets at the top
6. Put scripts at the bottom
7. Avoid CSS expressions
8. Make JS and CSS external
9. Reduce DNS lookups
10. Minify JS
11. Avoid redirects
12. Remove duplicate scripts
13. Configure ETags
14. Make 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.............Ni
cholas Zakas Scaling with Comet...................
..Dylan Schiemann Going beyond gzipping...........
....Tony Gentilcore Optimizing images.............
......Stoyan Stefanov, Nicole Sullivan
12
Why focus on JavaScript?
13
scripts block
ltscript src"A.js"gt blocks parallel downloads and
rendering
9 secs IE 6-7, FF 3.0, Chr 1, Op 9-10, Saf 3
7 secs IE 8, FF 3.5(?), Chr 2, Saf 4
14
MSN.com parallel scripts
Scripts and other resources downloaded in
parallel! How? Secret sauce?! var p
g.getElementsByTagName("HEAD")0 var
cg.createElement("script") c.type"text/javascri
pt" c.onreadystatechangen c.onerrorc.onloadk
c.srce p.appendChild(c)
15
Loading Scripts Without Blocking
XHR Eval XHR Injection Script in Iframe Script
DOM Element Script Defer document.write Script Tag
16
XHR Eval
var xhrObj getXHRObject() xhrObj.onreadystatech
ange 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
17
XHR Injection
var xhrObj getXHRObject() xhrObj.onreadystatech
ange function() if (
xhrObj.readyState ! 4 ) return var
sedocument.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
ltiframe src'A.html' width0 height0
frameborder0 idframe1gtlt/iframegt
iframe must have same domain as main page must
refactor script // access iframe from main
page window.frames0.createNewDiv() // access
main page from iframe parent.document.createElemen
t('div')
19
Script DOM Element
var se document.createElement('script') se.src
'http//anydomain.com/A.js' document.getElement
sByTagName('head') 0.appendChild(se)
script and main page domains can differ no need
to refactor JavaScript
20
Script Defer
ltscript defer src'A.js'gtlt/scriptgt
only supported in IE (just landed in FF
3.1) script and main page domains can differ no
need to refactor JavaScript
21
document.write Script Tag
document.write("ltscript type'text/javascript'
src'A.js'gt lt\/scriptgt")
parallelization only works in IE parallel
downloads for scripts, nothing else all
document.writes must be in same script block
22
browser busy indicators
23
browser busy indicators
status bar progress bar logo cursor block render block onload
normal Script Src FF IE,FF IE,FF FF IE,FF IE,FF
XHR Eval no no no no no no
XHR Injection no no no no no no
Script in Iframe IE,FF FF IE,FF FF no IE,FF
Script DOM Element FF FF FF FF no FF
Script Defer FF FF FF FF FF IE,FF
document.write Script Tag FF IE,FF IE,FF FF IE,FF IE,FF
good to show busy indicators when the user needs
feedback bad when downloading in the background
24
ensure/avoid ordered execution
Ensure scripts execute in order necessary when
scripts have dependencies IE http//stevesouders.
com/cuzillion/?ex10017 FF http//stevesouders.co
m/cuzillion/?ex10018 Avoid scripts executing in
order faster first script back is executed
immediately http//stevesouders.com/cuzillion/?ex
10019
25
Load Scripts Without Blocking
down-loads domains can differ existing scripts browser busy ensures order size (bytes)
normal Script Src no yes yes IE,FF IE,FF 50
XHR Eval IE,FF no no no no 500
XHR Injection IE,FF no yes no no 500
Script in Iframe IE,FF no no IE,FF no 50
Script DOM Element IE,FF yes yes FF FF 200
Script Defer IE yes yes IE,FF IE 50
document.write Script Tag IE yes yes IE,FF IE 100
Only other document.write scripts are downloaded
in parallel (in the same script block).
26
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?

28
(No Transcript)
29
synchronous JS example menu.js

• ltscript src"menu.js" type"text/javascript"gtlt/scr
  iptgt
• ltscript type"text/javascript"gt
• 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()
• lt/scriptgt

30
asynchronous JS example menu.js
script DOM element approach

• ltscript type"text/javascript"gt
• var domscript document.createElement('script')
• domscript.src "menu.js"
• document.getElementsByTagName('head')0.appendChi
  ld(domscript)
• 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()
• lt/scriptgt

31
before
after
32
Loading Scripts Without Blocking
down-loads domains can differ existing scripts browser busy ensures order size (bytes)
normal Script Src no yes yes IE,FF IE,FF 50
XHR Eval IE,FF no no no no 500
XHR Injection IE,FF no yes no no 500
Script in Iframe IE,FF no no IE,FF no 50
Script DOM Element IE,FF yes yes FF FF 200
Script Defer IE yes yes IE,FF IE 50
document.write Script Tag IE yes yes IE,FF IE 100
!IE
Only other document.write scripts are downloaded
in parallel (in the same script block).
33

• what about
• inlined code
• that depends on the script?

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

• hardcoded callback
• window onload
• timer
• degrading script tags
• script onload

36
technique 1 hardcoded callback

• ltscript type"text/javascript"gt
• 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.appendChi
  ld(domscript)
• lt/scriptgt
• init() is called from within menu.js
• not very flexible
• doesn't work for 3rd party scripts

37
technique 2 window onload

• ltiframe src"menu.php" width0 height0
  frameborder0gt lt/iframegt
• ltscript type"text/javascript"gt
• 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)
• lt/scriptgt
• 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

• ltscript type"text/javascript"gt
• var domscript document.createElement('script')
• domscript.src "menu.js"
• document.getElementsByTagName('head')0.appendChi
  ld(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)
• lt/scriptgt
• load if interval too low, delay if too high

39
John Resig's degrading script tags

• ltscript src"menu-degrading.js"
  type"text/javascript"gt
• var aExamples 'couple-normal.php', 'Normal
  Script Src', ...
• function init()
• EFWS.Menu.createMenu('examplesbtn', aExamples)
• init()
• lt/scriptgt

at the end of menu-degrading.js var scripts
document.getElementsByTagName("script") var cntr
scripts.length while ( cntr ) var
curScript scriptscntr-1 if
(curScript.src.indexOf("menu-degrading.js")
! -1) eval( curScript.innerHTML )
break cntr--
cleaner clearer safer inlined code not called
if script fails no browser supports it
http//ejohn.org/blog/degrading-script-tags/
40
technique 4 degrading script tags

• ltscript type"text/javascript"gt
• 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.appendChi
  ld(domscript)
• lt/scriptgt
• elegant, flexible (cool!)
• not well known
• doesn't work for 3rd party scripts (unless...)

41
technique 5 script onload

• ltscript type"text/javascript"gt
• 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.appendChi
  ld(domscript)

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

• ltscript src"menu.js" type"text/javascript"gtlt/scr
  iptgt
• ltscript src"menutier.js" type"text/javascript"gtlt
  /scriptgt
• ltscript type"text/javascript"gt
• 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)
• lt/scriptgt

44
technique 1 managed XHR

• ltscript type"text/javascript"gt
• 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)
• lt/scriptgt
• 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.queuedScriptsiQ qScript
• var xhrObj EFWS.Script.getXHRObject()
• xhrObj.onreadystatechange function()
• if ( xhrObj.readyState 4 )
• if ( bOrder )
• EFWS.Script.queuedScriptsiQ.response
  xhrObj.responseText
• EFWS.Script.injectScripts()
• else
• eval(xhrObj.responseText)
• if ( onload )
• onload()

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 lt len i )
• var qScript EFWS.Script.queuedScriptsi
• 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

preserves external script order
non-blocking
works in all browsers
couples with inlined code
works with scripts across domains
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 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 lt nUrls i )
• if ( EFWS.Script.differentDomain(aUrlsi) )
  
• bDifferent true
• break
• // pick the best loading function
• var loadFunc EFWS.Script.loadScriptXhrInjectio
  n
• if ( bDifferent )
• if ( -1 ! navigator.userAgent.indexOf('Firefo
  x')
• -1 ! navigator.userAgent.indexOf('Opera'
  ) )
• loadFunc EFWS.Script.loadScriptDomElement
  
• else
• loadFunc EFWS.Script.loadScriptDocWrite

49
multiple scripts with dependencies

• ltscript type"text/javascript"gt
• 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)
• lt/scriptgt
• 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 na all
multiple scripts, no dependencies Script DOM Element na all all
multiple scripts, dependencies, same domain Managed XHR all all all
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 pattern1
• ltscript type"text/javascript"gt
• var gaJsHost (("https" document.location.pro
  tocol) ? "https//ssl." "http//www.")
• document.write(unescape("3Cscript src'"
  gaJsHost "google-analytics.com/ga.js'
  type'text/javascript'3E3C/script3E"))
• lt/scriptgt
• ltscript type"text/javascript"gt
• var pageTracker _gat._getTracker("UA-xxxxxx-x")
  
• pageTracker._trackPageview()
• lt/scriptgt
• document.write Script Tag approach blocks other
  resources

1http//www.google.com/support/analytics/bin/answe
r.py?hlenanswer55488
52
case study dojox.analytics.Urchin1

• _loadGA function()
• var gaHost ("https" document.location.prot
  ocol) ?
• "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
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 _at_import _at_import _at_import

• ltstylegt
• _at_import url('stylesheet1.css')
• _at_import url('stylesheet2.css')
• lt/stylegt
• no blocking
• in fact, improves progressive rendering in IE

http//stevesouders.com/tests/atimport/import-impo
rt.php
55
link _at_import

• ltlink rel'stylesheet' type'text/css'
  href'stylesheet1.css'gt
• ltstylegt
• _at_import url('stylesheet2.css')
• lt/stylegt
• blocks in IE

http//stevesouders.com/tests/atimport/link-import
.php
56
link with _at_import

• ltlink rel'stylesheet' type'text/css'
  href'stylesheet1.css'gt
• blocks in all browsers!

includes
_at_import url('stylesheet2.css')
http//stevesouders.com/tests/atimport/link-with-i
mport.php
57
link blocks _at_import

• ltlink rel'stylesheet' type'text/css'
  href'stylesheet1.css'gt
• ltlink rel'stylesheet' type'text/css'
  href'proxy.css'gt
• blocks in IE

includes
_at_import url('stylesheet2.css')
http//stevesouders.com/tests/atimport/link-blocks
-import.php
58
many _at_imports

• ltstylegt
• _at_import url('stylesheet1.css')
• ...
• _at_import url('stylesheet6.css')
• lt/stylegt
• ltscript src'script1.js'gtlt/scriptgt
• loads script before stylesheets in IE

http//stevesouders.com/tests/atimport/many-import
s.php
59
link link

• ltlink rel'stylesheet' type'text/css'
  href'stylesheet1.css'gt
• ltlink rel'stylesheet' type'text/css'
  href'stylesheet2.css'gt
• no blocking in all browsers

http//stevesouders.com/tests/atimport/link-link.p
hp
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 lt3 0.01
• clue most prevalent in the Middle East

63
who's stripping?
proxy, A-V software Accept-Encoding header
Ad Muncher stripped
CA Internet Security Suite Accept-EncodXng gzip, deflate
CEQURUX stripped
Citrix Application Firewall stripped
ISA 2006 stripped
McAfee Internet Security 6.0 XXXXXXXXXXXXXXX
Norton Internet Security 6.0 --------------- -------------
Novell iChain 2.3 stripped
Novell Client Firewall stripped
WebWasher stripped
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_ENCODINGgzip, deflate
• ACCEPT_ENCODXNGgzip, deflate
• _______________----- -------
• indicators

overall null A-E
VIA 53 (11) 28 (41)
PROXY_CONNECTION 12 (2) 12 (18)
CONNECTION missing 24 (5) 15 (22)
ACCEPT_CHARSET missing 173 (35) 54 (79)
SERVER_PROTOCOL HTTP/1.0 45 (9) 17 (25)
UA_CPU x86 111 (22) 43 (63)
65
performance analyzers (HPWS)
YSlow Page Speed Pagetest VRTA neXpert
combine JS CSS X X X
use CSS sprites X X
use a CDN X X
set Expires in the future X X X X X
gzip text responses X X X X X
put CSS at the top X X
put JS at the bottom X
avoid CSS expressions X X
make JS CSS external
reduce DNS lookups X X
minify JS X X X
avoid redirects X X X X
remove dupe scripts X
remove ETags X X X
66
performance analyzers (EFWS)
YSlow Page Speed Pagetest VRTA neXpert
don't block UI thread
split JS payload X
load scripts async X
inline JS b4 stylesheet X
write efficient JS
min. uncompressed size
optimize images X X
shard domains X X
flush the document
avoid iframes
simplify CSS selectors X X
67
performance analyzers (other)
YSlow Page Speed Pagetest VRTA neXpert
use persistent conns X X X
reduce cookies 2.0 X X X
avoid net congestion X
increase MTU, TCP win X
avoid server congestion X
remove unused CSS X
specify image dims X
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

70
(No Transcript)
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!

72
(No Transcript)
73
Cuzillion'cuz there are a zillion pages to check
a tool for quickly constructing web pages to see
how components interact http//stevesouders.com/cu
zillion/
74
(No Transcript)
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 box
synthetic testing
bucket testing
real user data
Hammerhead
77
(No Transcript)
78
Hammerheadmoving 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

79
(No Transcript)
80
SpriteMedon't say "bite me!", say "SpriteMe!"
create sprites with ease http//spriteme.org/ book
marklet sprite generator coolRunnings by Jared
Hirsch http//jaredhirsch.com/coolrunnings/about/
http//bitbucket.org/jared/coolrunnings/
81
takeaways

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

82
impact on revenue

• Bing
• Yahoo
• Google
• AOL
• Shopzilla

2000 ms ? -4.3 revenue/user1 400 ms ? -5-9
full-page traffic2 400 ms ? -0.59
searches/user1 fastest users ? 50 page
views3 -5000 ms ? 7-12 revenue4
1 http//en.oreilly.com/velocity2009/public/schedu
le/detail/8523 2 http//www.slideshare.net/stoyan
/yslow-20-presentation 3 http//en.oreilly.com/vel
ocity2009/public/schedule/detail/7579 4
http//en.oreilly.com/velocity2009/public/schedule
/detail/7709
83
cost savings

• hardware reduced load
• Shopzilla 50 fewer servers
• bandwidth reduced response size

http//billwscott.com/share/presentations/2008/sta
nford/HPWP-RealWorld.pdf
84

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

85
100 book signing at Barnes Noble 320 free
consulting at Google booth
Steve Souders souders_at_google.com http//stevesoude
rs.com/docs/oscon-20090722.ppt