High Performance Web Sites

1
High PerformanceWeb Sites

• Tenni Theurer, Yahoo! Engineering Manager
• http//developer.yahoo.com/performance
• CSDN-Dr.Dobbs Software Development 2.0 Conference
  2007

2
slow crawl boring snail stagnant unexceptional
yawn unresponsive impatient delay moderate blah
subdue drag apathetic prolong slack load sluggish
sleepy late unexciting reduced lag complex heavy
unmemorable obscure why wait
perceived response time
performance speed enjoyable urgent instant
accelerate perception snap achievement better
improve action pleasant pace quick promote swift
cool maximum drive prompt advance fast hurry
rush satisfying feel exceptional brisk rapid
exciting
what is the end users experience?
3
Exceptional Performance

• quantify and improve the performance of all
  Yahoo! products worldwide
• center of expertise
• build tools, analyze data
• gather, research, and evangelize best practices

4
Evolution of Performance

• quantify
• ? profile
• ? research, case studies
• ? best practices
• ? evangelize
• ? codify
• ? rollout
• ? publicize

5
Today's Checklist

• perspective on performance turned upside down
• 3 actionable takeaways
• empowered to make everyone's web experience better

6
The Importance of Front-End Performance
Back-end 5
Front-end 95
Even here, front-end 88
7
The Performance Golden Rule

• 80-90 of the end-user response time is spent on
  the front-end. Start there.
• Greater potential for improvement
• Simpler
• Proven to work

8
Agenda

• Performance Research
• 14 Rules
• Case Studies
• Evangelism

9

• Performance Research

10
http//yuiblog.com/blog/2006/11/28/performance-res
earch-part-1/
11
Empty vs. Primed Cache

• empty cache
• 2.4 seconds
• primed cache
• 0.9 seconds
• 83 fewer bytes
• 90 fewer HTTP requests

12
http//yuiblog.com/blog/2007/01/04/performance-res
earch-part-2/
13
Browser Cache Experiment

• Add a new image to your page
• ltimg src"image/blank.gif" height"1" width"1"/gt
• with the following response headers
• Expires Thu, 15 Apr 2004 200000 GMT
• Last-Modified Wed, 28 Sep 2006 234957 GMT

14
Surprising Results
40-60
20
15
Experiment Takeaways

• The empty cache user experience is more prevalent
  than you think!
• Optimize for both primed cache and empty cache
  experience.

16
http//yuiblog.com/blog/2007/03/01/performance-res
earch-part-3
17
Impact of Cookies on Response Time
Cookie Size Time Delta
0 bytes 78 ms 0 ms
500 bytes 79 ms 1 ms
1000 bytes 94 ms 16 ms
1500 bytes 109 ms 31 ms
2000 bytes 125 ms 47 ms
2500 bytes 141 ms 63 ms
3000 bytes 156 ms 78 ms
18
.yahoo.com cookie sizes
19
http//yuiblog.com/blog/2007/04/11/performance-res
earch-part-4/
20
Parallel Downloads
Two components
in parallel
per hostname
HTTP/1.1
21
Maximizing Parallel Downloads




response time (seconds)
aliases
22
Maximizing Parallel Downloads
response time (seconds)
rule of thumb use at least two but no more than
four aliases
23
Summary

• What the 80/20 Rule Tells Us about Reducing HTTP
  Requests
• http//yuiblog.com/blog/2007/04/11/performance-re
  search-part-4/
• Browser Cache Usage Exposed!
• http//yuiblog.com/blog/2007/01/04/performance-re
  search-part-2/
• When the Cookie Crumbles
• http//yuiblog.com/blog/2007/01/04/performance-re
  search-part-2/
• Maximizing Parallel Downloads in the Carpool Lane
• http//yuiblog.com/blog/2007/04/11/performance-re
  search-part-4/

24

• 14 Rules

25
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. Move scripts to 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

26
Rule 1 Make fewer HTTP requests

• CSS sprites
• combined scripts, combined stylesheets
• image maps
• inline images

27
CSS Sprites Preferred
ltspan style" background-image
url('sprites.gif') background-position -260px
-90px"gt lt/spangt

• size of combined image is less
• not supported in Opera 6

http//alistapart.com/articles/sprites
28
Combined Scripts, Combined Stylesheets
Scripts Stylesheets
amazon.com 3 1
aol.com 18 1
cnn.com 11 2
ebay.com 7 2
froogle.google.com 1 1
msn.com 9 1
myspace.com 2 2
wikipedia.org 3 1
yahoo.com 4 1
youtube.com 7 3
Average 6.5 1.5
29
Combined Scripts,Combined Stylesheets

• combining six scripts into one eliminates five
  HTTP requests
• challenges
• develop as separate modules
• number of possible combinations vs. loading more
  than needed
• maximize browser cache
• one solution
• dynamically combine and cache

30
Rule 2 Use a CDN
amazon.com Akamai
aol.com Akamai
cnn.com
ebay.com Akamai, Mirror Image
google.com
msn.com SAVVIS
myspace.com Akamai, Limelight
wikipedia.org
yahoo.com Akamai
youtube.com

• distribute your static content before
  distributing your dynamic content

31
Rule 3 Add an Expires header

• not just for images

Images Stylesheets Scripts Median Age
amazon.com 0/62 0/1 0/3 0 114 days
aol.com 23/43 1/1 6/18 48 217 days
cnn.com 0/138 0/2 2/11 1 227 days
ebay.com 16/20 0/2 0/7 55 140 days
froogle.google.com 1/23 0/1 0/1 4 454 days
msn.com 32/35 1/1 3/9 80 34 days
myspace.com 0/18 0/2 0/2 0 1 day
wikipedia.org 6/8 1/1 2/3 75 1 day
yahoo.com 23/23 1/1 4/4 100 n/a
youtube.com 0/32 0/3 0/7 0 26 days
32
Rule 4 Gzip components

• you can affect users' download times
• 90 of browsers support compression

33
Gzip not just for HTML
HTML Scripts Stylesheets
amazon.com x
aol.com x some some
cnn.com
ebay.com x
froogle.google.com x x x
msn.com x deflate deflate
myspace.com x x x
wikipedia.org x x x
yahoo.com x x x
youtube.com x some some

• gzip scripts, stylesheets, XML, JSON (not images,
  PDF)

34
Gzip Edge Cases

• lt1 of browsers have problems with gzip
• IE 5.5
• http//support.microsoft.com/default.aspx?scid
  kben-usQ313712
• IE 6.0
• http//support.microsoft.com/default.aspx?scid
  kben-usQ31249
• Netscape 3.x, 4.x
• http//www.schroepl.net/projekte/mod_gzip/brow
  ser.htm
• consider adding Cache-Control Private
• remove ETags (Rule 13)
• hard to diagnose problem getting smaller

35
Rule 5 Put stylesheets at the top

• stylesheets block rendering in IE
• http//stevesouders.com/examples/css-bottom.php
• solution put stylesheets in HEAD (per spec)
• avoids Flash of Unstyled Content
• use LINK (not _at_import)

36
Slowest is Fastest

• CSS at the bottom
• resources load faster, but nothing renders

• CSS at the top
• resources take longer, but render progressively

right choice

• _at_import at the top
• same problems as bottom

37
Rule 6 Move scripts to the bottom

• scripts block parallel downloads across all
  hostnames
• scripts block rendering of everything below them
  in the page
• IE and FF
• http//stevesouders.com/examples/js-middle.php

38
Rule 6 Move scripts to the bottom

• script defer attribute is not a solution
• blocks rendering and downloads in FF
• slight blocking in IE
• solution move them as low in the page as possible

39
Rule 7 Avoid CSS expressions

• used to set CSS properties dynamically in IE
• width expression(
• document.body.clientWidth lt 600 ?
• 600px auto )
• problem expressions execute many times
• mouse move, key press, resize, scroll, etc.
• http//stevesouders.com/examples/expression-counte
  r.php

40
Rule 8 Make JS and CSS external

• inline HTML document is bigger
• external more HTTP requests, but cached
• variables
• page views per user (per session)
• empty vs. primed cache stats
• component re-use
• external is typically better
• home pages may be an exception

41
Post-Onload Download

• inline in front page
• download external files after onload
• window.onload downloadComponents
• function downloadComponents()
• var elem document.createElement("script")
• elem.src "http//.../file1.js"
• document.body.appendChild(elem)
• ...
• speeds up secondary pages

42
Dynamic Inlining

• start with post-onload download
• set cookie after components downloaded
• server-side
• if cookie, use external
• else, do inline with post-onload download
• cookie expiration date is key
• speeds up all pages

43
Rule 9 Reduce DNS lookups

• typically 20-120 ms
• block parallel downloads
• OS and browser both have DNS caches

44
Rule 10 Minify JavaScript
Minify External? Minify Inline?
www.amazon.com no no
www.aol.com no no
www.cnn.com no no
www.ebay.com yes no
froogle.google.com yes yes
www.msn.com yes yes
www.myspace.com no no
www.wikipedia.org no no
www.yahoo.com yes yes
www.youtube.com no no
minify inline scripts, too
45
Minify vs. Obfuscate
Original JSMin Savings Dojo Savings
www.amazon.com 204K 31K (15) 48K (24)
www.aol.com 44K 4K (10) 4K (10)
www.cnn.com 98K 19K (20) 24K (25)
www.myspace.com 88K 23K (27) 24K (28)
www.wikipedia.org 42K 14K (34) 16K (38)
www.youtube.com 34K 8K (22) 10K (29)
Average 85K 17K (21) 21K (25)
minify it's safer
not much difference
http//crockford.com/javascript/jsmin http//dojot
oolkit.org/docs/shrinksafe
46
Rule 11 Avoid redirects

• 3xx status codes mostly 301 and 302
• HTTP/1.1 301 Moved Permanently
• Location http//stevesouders.com/newuri
• add Expires headers to cache redirects
• worst form of blocking

http//www.w3.org/Protocols/rfc2616/rfc2616-sec10.
html
47
Redirects
Redirects
www.amazon.com no
www.aol.com yes secondary page
www.cnn.com yes initial page
www.ebay.com yes secondary page
froogle.google.com no
www.msn.com yes initial page
www.myspace.com yes secondary page
www.wikipedia.org yes secondary page
www.yahoo.com yes secondary page
www.youtube.com no
48
Rule 12 Remove duplicate scripts

• hurts performance
• extra HTTP requests (IE only)
• extra executions
• atypical?
• 2 of 10 top sites contain duplicate scripts
• team size, of scripts

49
Rule 13 Configure ETags

• unique identifier returned in response
• ETag "c8897e-aee-4165acf0"
• Last-Modified Thu, 07 Oct 2004 205408 GMT
• used in conditional GET requests
• If-None-Match "c8897e-aee-4165acf0"
• If-Modified-Since Thu, 07 Oct 2004 205408 GMT
• if ETag doesn't match, can't send 304

50
The Problem with ETags

• ETag format
• Apache inode-size-timestamp
• IIS FiletimestampChangeNumber
• ETag for a single entity differs across servers,
  by default
• Sites with gt1 server return too few 304s
• ((n-1)/n) wasted downloads
• Remove them
• Apache FileETag none
• IIS http//support.microsoft.com/kb/922703/

51
Rule 14 Make AJAX cacheable

• XHR, JSON, iframe, dynamic scripts can still be
  cached (and minified, and gzipped)
• a personalized response should still be cacheable
  for that person

52
AJAX Example Yahoo! Mail Beta

• address book XML request
• ? GET /yab/...r0.5289571053069156 HTTP/1.1
• Host us.xxx.mail.yahoo.com
• ? HTTP/1.1 200 OK
• Date Thu, 12 Apr 2007 193909 GMT
• Cache-Control private,max-age0
• Last-Modified Sat, 31 Mar 2007 011717 GMT
• Content-Type text/xml charsetutf-8
• Content-Encoding gzip
• address book changes infrequently
• cache it add last-modified-time in URL

53

• Case Studies

54
Case Study

• move JS to onload
• remove bottom tabs
• avoid redirects
• image sprites
• host JS on CDN
• combine JS files

55
Preloading
2
4
b
be
bec
beck
beckh
beckha
beckham
Download Search components ysch_srp_20070319.js
yschx_20070320a.css flat2_search.gif dropdown.gif
bulb1.gif ar_next.gif addmy.gif
3
5
56
What about performance and Web 2.0 apps?

• client-side CPU is more of an issue
• user expectations are higher
• these rules still apply, new rules will come out
• start off on the right foot

57
Case Study
Mail
Mail Classic
User Workflow mail.yahoo.com view inbox
folder read messages (x3) compose message confirm
send total time
Time 2.40 s 4.98 s 6.39 s 2.21 s 2.10 s 18.08 s
Time 12.48 s 1.52 s 1.53 s 0.34 s 0s 15.87 s
Delta 420 -70 -76 -85 -100 -12
58
Evangelism

• Book
• High Performance Web Sites
• Conferences
• Yahoo! F2E Summit
• Web 2.0 Expo
• Rich Web Experience
• CSDN-Dr. Dobbs
• Blogs
• YUI Blog http//yuiblog.com/blog/category/perform
  ance
• YDN Blog http//developer.yahoo.com/performance/
• Open Source YSlow

OSCon Ajax Experience Blogher Future of Web Apps
59

• http//developer.yahoo.com/yslow/

60
Ten Top U.S Web Sites
Page Weight Response Time YSlow Grade
www.amazon.com 405K 15.9 sec D
www.aol.com 182K 11.5 sec F
www.cnn.com 502K 22.4 sec F
www.ebay.com 275K 9.6 sec C
froogle.google.com 18K 1.7 sec A
www.msn.com 221K 9.3 sec F
www.myspace.com 205K 7.8 sec D
www.wikipedia.org 106K 6.2 sec C
www.yahoo.com 178K 5.9 sec A
www.youtube.com 139K 9.6 sec D
61

• Conclusion

62
Takeaways

• focus on the front-end
• harvest the low-hanging fruit
• you do control user response times
• small investment up front keeps on giving
• LOFNO be an advocate for your users

63
Today's Checklist

• perspective on performance turned upside down
• 3 actionable takeaways
• empowered to make everyone's web experience better

64
Tenni Theurer tenni_at_yahoo-inc.com
65
CC Images Used

• "Need for Speed" by Amnemon http//www.flickr.com
  /photos/marinacvinhal/379111290/
• "Max speed 15kmh" by xxxtoff http//www.flickr.co
  m/photos/xxxtoff/219781763/
• "maybe" by Tal Bright http//www.flickr.com/photo
  s/bright/118197469/
• "takeout" by dotpolka http//www.flickr.com/photo
  s/dotpolka/249129144/
• "how do they do that" by Fort Photo
  http//www.flickr.com/photos/fortphoto/388825145/
• "Absolutely Nothing is Allowed Here" by Vicki
  Chuck Rogers http//www.flickr.com/photos/two-wro
  ngs/205467442/
• "Zipper Pocket" by jogales http//www.flickr.com/
  photos/jogales/11519576/
• "new briefcase" by dcJohn http//www.flickr.com/p
  hotos/dcjohn/85504455/
• "Told you it was me!" by Pug! http//flickr.com/p
  hotos/pugspace/1277023154/
• "Robert's Legion" by dancharvey
  http//www.flickr.com/photos/dancharvey/2647529/
• "thank you" by nj dodge http//flickr.com/photos/
  nj_dodge/187190601/