Steve Souders

1
Even Faster Web Sites(inside ma.tt) best
practices for faster pages

• Steve Souders
• souders_at_google.com
• http//stevesouders.com/docs/wordcamp-20080816.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
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
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
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

9
Why focus on JavaScript?
10
Scripts Block
ltscript src"A.js"gt blocks parallel downloads and
rendering
http//stevesouders.com/cuzillion/?ex10008
What's "Cuzillion"?
11
Cuzillion'cuz there are a zillion pages to check
a tool for quickly constructing web pages to see
how components interact Open Source http//steveso
uders.com/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? var p g.getElementsByTagName("HEA
D")0 var cg.createElement("script") c.type"t
ext/javascript" c.onreadystatechangen c.onerror
c.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 script and main page domains
can differ no need to refactor JavaScript
http//stevesouders.com/cuzillion/?ex10013
21
document.write Script Tag
document.write("ltscri" "ipt
type'text/javascript' src'A.js'gt" "lt/scri"
"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
• What about inline scripts?

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 blocks parallel downloads when
  downloading stylesheets
• IE doesn't...
• ...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
WordPress Analysis
33
ma.tt Head Analysis
ltheadgt ltstyle type"text/css" media"screen"gt
_at_import url( http//s.ma.tt/blog-content/themes/m
ahtete/style.css?6 ) _at_import url(
http//s.ma.tt/blog-content/themes/mahtete/double-
col.css?4 ) lt/stylegt snip... ltscript
type'text/javascript' src'http//s.ma.tt/blog/wp
-includes/js/jquery/jquery.js?ver1.2.6'gtlt/scriptgt
ltscript type'text/javascript'
src'http//s.ma.tt/photos/suggest.js'gtlt/scriptgt
ltlink rel"stylesheet" href"http//s.ma.tt/phot
os/suggest.css" /gt ltscript type"text/javascript
"gt var j jQuery.noConflict() snip...
lt/scriptgt lt/headgt
34
ma.tt Head Analysis
ltheadgt ltstyle type"text/css" media"screen"gt
_at_import url( http//s.ma.tt/blog-content/themes/m
ahtete/style.css?6 ) _at_import url(
http//s.ma.tt/blog-content/themes/mahtete/double-
col.css?4 ) lt/stylegt snip... ltscript
type'text/javascript' src'http//s.ma.tt/blog/wp
-includes/js/jquery/jquery.js?ver1.2.6'gtlt/scriptgt
ltscript type'text/javascript'
src'http//s.ma.tt/photos/suggest.js'gtlt/scriptgt
ltlink rel"stylesheet" href"http//s.ma.tt/phot
os/suggest.css" /gt ltscript type"text/javascript
"gt var j jQuery.noConflict() snip...
lt/scriptgt lt/headgt
35
ma.tt Head Analysis
ltheadgt ltstyle type"text/css" media"screen"gt
_at_import url( http//s.ma.tt/blog-content/themes/m
ahtete/style.css?6 ) _at_import url(
http//s.ma.tt/blog-content/themes/mahtete/double-
col.css?4 ) lt/stylegt snip... ltscript
type'text/javascript' src'http//s.ma.tt/blog/wp
-includes/js/jquery/jquery.js?ver1.2.6'gtlt/scriptgt
ltscript type'text/javascript'
src'http//s.ma.tt/photos/suggest.js'gtlt/scriptgt
ltlink rel"stylesheet" href"http//s.ma.tt/phot
os/suggest.css" /gt ltscript type"text/javascript
"gt var j jQuery.noConflict() snip...
lt/scriptgt lt/headgt
36
ma.tt Head Analysis
ltheadgt ltstyle type"text/css" media"screen"gt
_at_import url( http//s.ma.tt/blog-content/themes/m
ahtete/style.css?6 ) _at_import url(
http//s.ma.tt/blog-content/themes/mahtete/double-
col.css?4 ) lt/stylegt snip... ltscript
type'text/javascript' src'http//s.ma.tt/blog/wp
-includes/js/jquery/jquery.js?ver1.2.6'gtlt/scriptgt
ltscript type'text/javascript'
src'http//s.ma.tt/photos/suggest.js'gtlt/scriptgt
ltlink rel"stylesheet" href"http//s.ma.tt/phot
os/suggest.css" /gt ltscript type"text/javascript
"gt var j jQuery.noConflict() snip...
lt/scriptgt lt/headgt
37
ma.tt Head Analysis
ltheadgt ltstyle type"text/css" media"screen"gt
_at_import url( http//s.ma.tt/blog-content/themes/m
ahtete/style.css?6 ) _at_import url(
http//s.ma.tt/blog-content/themes/mahtete/double-
col.css?4 ) lt/stylegt snip... ltscript
type'text/javascript' src'http//s.ma.tt/blog/wp
-includes/js/jquery/jquery.js?ver1.2.6'gtlt/scriptgt
ltscript type'text/javascript'
src'http//s.ma.tt/photos/suggest.js'gtlt/scriptgt
ltlink rel"stylesheet" href"http//s.ma.tt/phot
os/suggest.css" /gt ltscript type"text/javascript
"gt var j jQuery.noConflict() snip...
lt/scriptgt lt/headgt
38
Analyzing All of ma.tt

• good
• 10 images sprited into 1
• CDN s.ma.tt (Panther), stats.wordpress.com
  (Savvis)
• expires set 2-5 days in the future
• most everything gzipped
• most .js minified
• ETags configured
• parallelized stylesheets
• fix
• combine scripts (4), combine stylesheets (3)
• sprite CSS background images (15)
• move scripts to bottom, load non-blocking
• shard resources across 2-4 domains
• cookieless domain for static content (7K across
  30 requests)
• move inline script after stylesheet
• stylesheet above .js
• image height width

39
Analyzing All of ma.tt
40
Analyzing All of ma.tt
26
12
41
Announcement 1 HTTPWatch for FF

• http//httpwatch.com/
• previously IE only
• Firefox private beta now
• Firebug 1.05 Net Panel buggy

42
Announcement 2 Firebug Lite 1.2

• http//getfirebug.com/lite.html
• console.log
• Inspect
• DOM and CSS

43
Announcement 3 Mozilla Firebug

• John Resig, Rob Campbell, Jan Odvarko
• Firebug Working Group
• stability, performance, bug fixes

44
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

blogs
45
Steve Souders souders_at_google.com http//stevesoude
rs.com/docs/wordcamp-20080816.ppt