Steve Souders

1
Even Faster Web Sites best practices for faster
pages

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

• Make fewer HTTP requests
• Use a CDN
• Add an Expires header
• Gzip components
• Put stylesheets at the top
• Put scripts at the bottom
• Avoid CSS expressions
• Make JS and CSS external
• Reduce DNS lookups
• Minify JS
• Avoid redirects
• Remove duplicate scripts
• Configure ETags
• 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

• Split the initial payload
• Load scripts without blocking
• Don't scatter inline scripts
• Split dominant domains
• Make static content cookie-free
• Reduce cookie weight
• Minify CSS
• Optimize images
• Use iframes sparingly
• To www or not to www

9
Why focus on JavaScript?
10
Scripts Block
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
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
frameborder0 idframe1
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

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("type'text/javascript' src'A.js'" ""ipt")
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
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
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 (250 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
Twitter YSlow
33
Parallelized Scripts
27
34
Twitter Performance Analysis

• good
• images optimized
• resources sharded across domains
• fix
• compress CSS and JS (reduce 294K to 74K)
• 4 .js at the top combine, parallelized load,
  jquery (!) prototype
• sprites? (arr2.gif, twitter.png,
  icon_start_empty.gif, girl.gif, icon_trash.gif,
  default_profile_normalbigger.png)
• longer Expires date ( 1 day)
• split initial JS payload (75 not called before
  onload)
• clean out CSS (75 unused)
• minimize JS (40K uncompressed, 10K compressed)
• move version from querystring to filename
  (better proxy caching)
• turn off ETags
• Google Analytics ga.js (not urchin.js),
  parallelized load
• too much domain sharding?

35
Announcement 1 HTTPWatch for FF

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

36
Announcement 2 Firebug Lite 1.2

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

37
Announcement 3 Mozilla Firebug

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

38
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

39
Steve Souders souders_at_google.com http//stevesoude
rs.com/docs/twitter-20080821.ppt