Steve Souders

1
High Performance Widgets

• Steve Souders
• souders_at_google.com
• http//stevesouders.com/docs/widget-summit-2008.pp
  t

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

6
YSlow
High Performance Web Sites
7

• http//conferences.oreilly.com/velocity/

June 22-24, 2009
8
(No Transcript)
9
High Performance Web Sites, Vol 2

1. Split the initial payload
2. Load scripts without blocking
3. Don't scatter inline scripts
4. Split dominant domains
5. Make static content cookie-free
6. Reduce cookie weight
7. Minify CSS
8. Optimize images
9. Use iframes sparingly
10. To www or not to www

10
Why focus on JavaScript?
11
Scripts Block
ltscript src"A.js"gt blocks parallel downloads and
rendering
http//stevesouders.com/cuzillion/?ex10008
What's "Cuzillion"?
12
Initial Payload and Execution
JavaScript Functions Executed before onload
www.aol.com 115K 30
www.ebay.com 183K 44
www.facebook.com 1088K 9
www.google.com/search 15K 45
search.live.com/results 17K 24
www.msn.com 131K 31
www.myspace.com 297K 18
en.wikipedia.org/wiki 114K 32
www.yahoo.com 321K 13
www.youtube.com 240K 18
26 avg
252K avg
13
Split the initial payload
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?
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
Advanced Script Loading
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
http//stevesouders.com/cuzillion/?ex10009
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
http//stevesouders.com/cuzillion/?ex10015
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')
http//stevesouders.com/cuzillion/?ex10012
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
http//stevesouders.com/cuzillion/?ex10010
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
http//stevesouders.com/cuzillion/?ex10013
21
document.write Script Tag
document.write("ltscr" "ipt
type'text/javascript' src'A.js'gt" "lt/scr"
"iptgt")
parallelization only works in IE parallel
downloads for scripts, nothing else all
document.writes must be in same script block
http//stevesouders.com/cuzillion/?ex10014
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
Summary of Traits
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
Load Scripts without Blocking

• don't let scripts block other downloads
• you can still control execution order, busy
  indicators, and onload event

28
Inline Scripts Block

• long executing inline scripts block rendering and
  downloads
• http//stevesouders.com/cuzillion/?ex10035
• workarounds
• initiate execution with setTimeout (gt250 for FF,
  nglayout.initialpaint.delay)
• move JavaScript to external script with advanced
  downloading techniques
• use Defer attribute (IE only)

29
Inline Scripts after Stylesheets Block
Downloading

• Firefox 3 and IE download stylesheets in parallel
• ...unless the stylesheet is followed by an inline
  script
• http//stevesouders.com/cuzillion/?ex10021
• best to move inline scripts above stylesheets or
  below other resources
• use Link, not _at_import

30
Examples of Scattered Scripts
31
Don't Scatter Inline Scripts
remember inline scripts carry a cost avoid
long-executing inline scripts don't put inline
scripts between stylesheets and other resources
32
Get Satisfaction Widget
33
Get Satisfaction Widget

• ltdiv id"gsfn_content"gtLoading...lt/divgt
• ltscript_src"http//getsatisfaction.com/oreilly/wi
  dgets/javascripts/5977e91/widgets.js"
  type"text/javascript"gtlt/scriptgt
• ltscript_src"http//getsatisfaction.com/oreilly/to
  pics.widget?callbackgsfnTopicsCallbackamplength
  120amplimit5ampsortrecently_active"
  type"text/javascript"gtlt/scriptgt
• ...
• function gsfn_populate(id, template)
• document.getElementById(id).innerHTML
  template

34
3 requests 8K xfer size 8K JS (uncompr)

• good
• small
• improve
• add future Expires header widgets.js,
  favicon.gif (not topics.widget)
• gzip wigets.js, topics.widget
• minify widgets.js
• remove ETags
• use only one getsatisfaction.com or
  www.getsatisfaction.com
• load scripts async

35
Google Calendar Widget
36
Google Calendar Widget

• ltiframe_
• src"//www.google.com/calendar/embed
• ?modeAGENDA
• ampheight600
• ampwkst1
• ampbgcolor23FFFFFF
• ampsrcv9ke3029e8k53qjtbf506jumu8ktapjh40import
  .calendar.google.com
• ampcolor235A6986
• ampctzAmerica2FLos_Angeles"
• style" border-width0 " width"800" height"600"
  frameborder"0" scrolling"no"gt
• lt/iframegt

37
10 requests 65K xfer size 135K JS (uncompr)

• good
• gzip turned on
• no ETags
• future Expires headers
• improve
• big! 135K JS, 18K CSS (uncompressed)
• set iframe SRC dynamically
• 44 of JS unused
• sprite 6 images into 1
• /feeds/ is slow (only 2K, but longer than 133K JS)

38
Google Friend Connect Widget
39
Google Friend Connect Widget

• ltdiv id"div-08054659623916314855-members"gtlt/divgt
  
• ltscript type"text/javascript"gt
• var skin
• skin'HEIGHT' '150'
• skin'HEADER_FOOTER_BG_COLOR' 'BFEECC'
• skin'MEMBERS_LIST_BG_COLOR' 'D9FFE4'
• skin'MEMBERS_LIST_FRIEND_LINK_COLOR'
  '339966'
• skin'MEMBERS_LIST_HEADER_FONT_COLOR'
  '339966'
• skin'INVITE_LINK_COLOR' '339966'
• google.friendconnect.container.renderMembersGadget
  ( id 'div-08054659623916314855-members', site
  '08054659623916314855' , skin)
• lt/scriptgt

40
39 requests 188K xfer size 471K JS (uncompr) (3
widgets)
41
39 requests 188K xfer size 471K JS (uncompr) (3
widgets)

• good
• gzip turned on
• no ETags
• future Expires headers
• improve
• big! (really 3 widgets)
• 3 redirects max-age0
• 74 of JS unused
• 22 requests expire in 24 hours
• 173K of images lossless compression cuts 87
• 4 text/html responses not gzipped (total 19K)
• 6 CSS expressions
• 3 duplicate scripts iframes

42
MyBlogLog Widget
43
MyBlogLog Widget

• var mbl_widget ''
• mbl_widget ''
• mbl_widget ' ltstylegt'
• mbl_widget ' a.mbl_widget '
• mbl_widget ' a.mbl_widget_u '
• mbl_widget ' a.mbl_widget_a '
• mbl_widget ''
• 321 lines later...
• mbl_widget ' lt/divgt'
• mbl_widget ' lt/divgt'
• mbl_widget ''
• document.write(mbl_widget)

44
js
14 requests 60K xfer size 62K JS (uncompr)

• good
• sprite (v3_1_default_black.gif)
• domain sharding
• images optimized
• improve
• add future Expires (nopic_48.gif, close12_1.gif)
• 5 DNS lookups
• avoid document.write
• 80 of JS unused
• load script asynchronously

45
Plaxo Widget
46
Plaxo Widget

• ltdiv id"plaxo-pulse-widget"gtlt/divgt
• ltscript_src"http//pulse.plaxo.com/pulse/widget/g
  et?authTicket265...43Damptypeframeampversio
  n2ampheight480ampwidth125"gtlt/scriptgt
• iframe is appended to div

47
js
14 requests 41K xfer size 2K JS (uncompr)

• good
• 10 day future Expires
• gzip enabled
• domain sharding (Flickr)
• backend stitching
• improve
• /badge is slow start with previous request
• do away with iframe altogether one script
• load script asynchronously set size of div
• 4 images could be sprited into 1

48
Announcement 1 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 3K tests, 2K unique testers, 120
  browsers
• help out by running the test!

49
Measuring Performance

• Episodes

dev box
synthetic testing
bucket testing
real user data
Hammerhead
50
Announcement 2 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

51
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
• life's too short, write fast code

52
Steve Souders souders_at_google.com http//stevesoude
rs.com/docs/widget-summit-2008.ppt