High Performance Web Sites 14 rules for faster-loading pages

1
Even Faster Web Sites
http//stevesouders.com/docs/wikipedia-20090812.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
(No Transcript)
6
(No Transcript)
7
(No Transcript)
8

• Sept 2007

9

• June 2009

10
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

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
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
15
splitting 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 (Page Speed) tools
needed to automate this (Doloto) load scripts
without blocking how?
16
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)
17
Loading Scripts Without Blocking
XHR Eval XHR Injection Script in Iframe Script
DOM Element Script Defer document.write Script Tag
18
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
19
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
20
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')
21
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
22
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
23
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
24
browser busy indicators
25
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
26
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
27
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).
28
and the winner is...
29
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?

30
bad stylesheet followed by inline script

• browsers download stylesheets in parallel with
  other resources that follow...
• ...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

31
mispositioned inline scripts
32
Positioning Inline Scripts
remember inline scripts carry a cost avoid
long-executing inline scripts don't put inline
scripts between stylesheets and other resources
33
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

34
benefits of gzipping

• 70 reduction in transfer size
• not just for HTML!!
• all text JavaScript, CSS, XML, JSON
• not binary images, PDF, Flash

35
so what's the issue?

• 15 of 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

36
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

37
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
Results of applying each technique to the Alexa
top ten
38

• JS after CSS (p 77)
• HTTP/1.0 (p 78)
• sprite on home page (hpws p 130)
• Expires header (p 131) FIXED on en.wiki
• gzip stylesheets FIXED
• png optimization FIXED
• querystring in static resources
• main.css?233xz vs. main.css?233yz ???
• http//en.wikipedia.org/wiki/White_dwarf
• combine 6 scripts, 9 stylesheets
• sprite 8 bg images
• no Expires on upload.wikimedia.org
• move 6 scripts lower
• minify JS 36K out of 100K (36)
• 50 CSS unused (40K out of 80K)
• flushing!
• http/1.0!
• PNGs optimized!
• put script block above stylesheets

39

• JS after CSS (p 77)
• HTTP/1.0 (p 78)
• sprite on home page (hpws p 130)
• Expires header (p 131) FIXED on en.wiki
• gzip stylesheets FIXED
• png optimization FIXED
• querystring in static resources
• main.css?233xz vs. main.css?233yz ???
• http//en.wikipedia.org/wiki/White_dwarf
• http//en.wikipedia.org/wiki/Ancient_Egypt
• http//en.wikipedia.org/w/index.php?titleMajor_de
  pressive_disorderactionedit
• addButton loads images after onload ?!?!
• combine 9 scripts, 9 stylesheets
• no Expires on upload.wikimedia.org
• move 9 scripts lower
• minify JS 44K out of 126K (35)
• 50 CSS unused (40K out of 80K)
• flushing!

40
White Dwarf

• http//en.wikipedia.org/wiki/White_dwarf

41
White Dwarf
combine stylesheets remove unused CSS
(50) sprite 8 bg images

• http//en.wikipedia.org/wiki/White_dwarf

combine scripts minify (36K, 36) move lower load
async 81 deferrable
move inline script
add Expires to upload.w.o don't use querystring
?233yz
42
(No Transcript)
43
combine stylesheets remove unused CSS (50)
move inline script
combine scripts minify (44K, 35) move lower load
async 76 deferrable
add Expires to upload.w.o don't use querystring
?233yz don't change URL 233yz v 233zz
44
takeaways

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

45
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
46
cost savings

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

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

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

48
Steve Souders souders_at_google.com http//stevesoude
rs.com/docs/wikipedia-20090812.ppt