Exceptional Performance Evolution

at Yahoo!

Steve SoudersChief Performance Yahoo!souders@yahoo-inc.com

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

Evolution of Performance

quantify→ profile

→ research, case studies→ best practices

→ evangelize→ codify

→ rollout →

publicize

Performance Definition

two categories:– response time– efficiency

focus: web products

Response Time, Page Weight, YSlow Grade

Strong Correlation

total page weightresponse time

inverse YSlow grade

correlation(resp time, page weight) = 0.94correlation(inverse YSlow, resp time) = 0.76

correlation(inverse YSlow, page weight) = 0.59

Evolution of Performance

quantify→ profile

→ research, case studies→ best practices

→ evangelize→ codify

→ rollout →

publicize

The Importance of Frontend Performance

Backend =

5%

Frontend =

95%

Even here, frontend = 88%

Time Spent on the FrontendEmpty Cache

Primed Cache

amazon.com 82% 86%

aol.com 94% 86%

cnn.com 81% 92%

ebay.com 98% 92%

google.com 86% 64%

msn.com 97% 95%

myspace.com 96% 86%

wikipedia.org 80% 88%

yahoo.com 95% 88%

youtube.com 97% 95%

The Performance Golden Rule

80-90% of the end-user response time is spent on the frontend. Start there.

Evolution of Performance

quantify→ profile

→ research, case studies→ best practices

→ evangelize→ codify

→ rollout →

publicize

Performance Research

Browser Cache Experiment

Add an image to the page: Expires: Thu, 15 Apr 2004 20:00:00 GMT

Last-Modified: Wed, 28 Sep 2006 23:49:57 GMT

# users with at least one 200 response

total # unique users

Percentage of users with an empty cache?

Percentage of page views with an empty

cache?

# of 200 responses

total # responses

0.0%

10.0%

20.0%

30.0%

40.0%

50.0%

60.0%

70.0%

80.0%

90.0%

100.0%

0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

day of experiment

perc

enta

ge

unique users with empty cache

page views with empty cache

Browser Cache Experiment Results

page views with

empty cache

40-60% ~20%

users withempty cache

Experiment Takeaways

The empty cache user experience is more prevalent than you think!

Optimize for both primed cache and empty cache experience.

Case Studies

Case Study:

move JS to onloadremove bottom tabsavoid redirectsimages spriteshost JS on CDNcombine JS files

1/ 25/ 06 3/ 25/ 07

40-50%40-50%

Evolution of Performance

quantify→ profile

→ research, case studies→ best practices

→ evangelize→ codify

→ rollout →

publicize

14 Rules

14 Rules1. Make fewer HTTP requests2. Use a CDN3. Add an Expires header4. Gzip components5. Put stylesheets at the top6. Move scripts to the bottom7. Avoid CSS expressions8. Make JS and CSS external9. Reduce DNS lookups10. Minify JS11. Avoid redirects12. Remove duplicate scripts13. Configure ETags14. Make AJAX cacheable

Evolution of Performance

quantify→ profile

→ research, case studies→ best practices

→ evangelize→ codify

→ rollout →

publicize

(Internal) Evangelism

training classes

tech talks

staff presentations

web site – papers, twiki

mailing list

consulting

Evolution of Performance

quantify→ profile

→ research, case studies→ best practices

→ evangelize→ codify

→ rollout →

publicize

YSlow

performance lint tool

grades web pages for each rule

Firefox add-on integrated with Firebug

Evolution of Performance

quantify→ profile

→ research, case studies→ best practices

→ evangelize→ codify

→ rollout →

publicize

Performance Rollout

performance SLA targets

regular tracking

Wall of Fame/Shame

Biz Case

Performance TV

Competitor Wall of Fame/Shame

Evolution of Performance

quantify→ profile

→ research, case studies→ best practices

→ evangelize→ codify

→ rollout →

publicize

(External) Evangelism

BookHigh Performance Web Sites

ConferencesYahoo! F2E SummitWeb 2.0 ExpoFoo Camp

BlogsYUI Blog: http://yuiblog.com/blog/category/performance

YDN Blog: http://developer.yahoo.com/performance/

Open Source YSlow

OSConAjax ExperienceBlogherFuture of Web Apps

Evolution of Performance

quantify→ profile

→ research, case studies→ best practices

→ evangelize→ codify

→ rollout →

publicize

What's Next?

wider adoption, internationals

industry-wide initiatives

other areas – backend, mobile

Takeaways

quantify & profile first

make it irresistible

enlist deputies

teach to fish

carrot v. stick

reach outside

Steve Souderssouders@yahoo-inc.com

CC Images Used"Need for Speed" by Amnemona:

http://www.flickr.com/photos/marinacvinhal/379111290/"Max speed 15kmh" by xxxtoff:

http://www.flickr.com/photos/xxxtoff/219781763/ "maybe" by Tal Bright:

http://www.flickr.com/photos/bright/118197469/"takeout" by dotpolka :

http://www.flickr.com/photos/dotpolka/249129144/"new briefcase" by dcJohn:

http://www.flickr.com/photos/dcjohn/85504455/"Absolutely Nothing is Allowed Here" by Vicki & Chuck Rogers:

http://www.flickr.com/photos/two-wrongs/205467442/"US Capitol police – security is everywhere here" by Melvin

Schlubman: http://flickr.com/photos/pauldineen/45498969/"Horse and Water" by originalrobart:

http://flickr.com/photos/grandetour/160907919/"thank you" by nj dodge:

http://flickr.com/photos/nj_dodge/187190601/