exceptional performance evolution at yahoo!

35
Exceptional Performance Evolution at Yahoo! Steve Souders Chief Performance Yahoo! [email protected]

Upload: fran

Post on 23-Jan-2016

49 views

Category:

Documents


0 download

DESCRIPTION

Exceptional Performance Evolution at Yahoo!. Steve Souders Chief Performance Yahoo! [email protected]. Exceptional Performance. quantify and improve the performance of all Yahoo! products worldwide center of expertise build tools, analyze data - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: Exceptional Performance Evolution at Yahoo!

Exceptional Performance Evolution

at Yahoo!

Steve SoudersChief Performance [email protected]

Page 2: Exceptional Performance Evolution at Yahoo!

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

Page 3: Exceptional Performance Evolution at Yahoo!

Evolution of Performance

quantify→ profile

→ research, case studies→ best practices

→ evangelize→ codify

→ rollout →

publicize

Page 4: Exceptional Performance Evolution at Yahoo!

Performance Definition

two categories:– response time– efficiency

focus: web products

Page 5: Exceptional Performance Evolution at Yahoo!

Response Time, Page Weight, YSlow Grade

Page 6: Exceptional Performance Evolution at Yahoo!

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

Page 7: Exceptional Performance Evolution at Yahoo!

Evolution of Performance

quantify→ profile

→ research, case studies→ best practices

→ evangelize→ codify

→ rollout →

publicize

Page 8: Exceptional Performance Evolution at Yahoo!

The Importance of Frontend Performance

Backend =

5%

Frontend =

95%

Even here, frontend = 88%

Page 9: Exceptional Performance Evolution at Yahoo!

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%

Page 10: Exceptional Performance Evolution at Yahoo!

The Performance Golden Rule

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

Page 11: Exceptional Performance Evolution at Yahoo!

Evolution of Performance

quantify→ profile

→ research, case studies→ best practices

→ evangelize→ codify

→ rollout →

publicize

Page 12: Exceptional Performance Evolution at Yahoo!

Performance Research

Page 13: Exceptional Performance Evolution at Yahoo!

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

Page 14: Exceptional Performance Evolution at Yahoo!

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

Page 15: Exceptional Performance Evolution at Yahoo!

Experiment Takeaways

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

Optimize for both primed cache and empty cache experience.

Page 16: Exceptional Performance Evolution at Yahoo!

Case Studies

Page 17: Exceptional Performance Evolution at Yahoo!

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%

Page 18: Exceptional Performance Evolution at Yahoo!

Evolution of Performance

quantify→ profile

→ research, case studies→ best practices

→ evangelize→ codify

→ rollout →

publicize

Page 19: Exceptional Performance Evolution at Yahoo!

14 Rules

Page 20: Exceptional Performance Evolution at Yahoo!

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

Page 21: Exceptional Performance Evolution at Yahoo!

Evolution of Performance

quantify→ profile

→ research, case studies→ best practices

→ evangelize→ codify

→ rollout →

publicize

Page 22: Exceptional Performance Evolution at Yahoo!

(Internal) Evangelism

training classes

tech talks

staff presentations

web site – papers, twiki

mailing list

consulting

Page 23: Exceptional Performance Evolution at Yahoo!

Evolution of Performance

quantify→ profile

→ research, case studies→ best practices

→ evangelize→ codify

→ rollout →

publicize

Page 24: Exceptional Performance Evolution at Yahoo!

YSlow

performance lint tool

grades web pages for each rule

Firefox add-on integrated with Firebug

Page 25: Exceptional Performance Evolution at Yahoo!
Page 26: Exceptional Performance Evolution at Yahoo!

Evolution of Performance

quantify→ profile

→ research, case studies→ best practices

→ evangelize→ codify

→ rollout →

publicize

Page 27: Exceptional Performance Evolution at Yahoo!

Performance Rollout

performance SLA targets

regular tracking

Wall of Fame/Shame

Biz Case

Performance TV

Competitor Wall of Fame/Shame

Page 28: Exceptional Performance Evolution at Yahoo!
Page 29: Exceptional Performance Evolution at Yahoo!

Evolution of Performance

quantify→ profile

→ research, case studies→ best practices

→ evangelize→ codify

→ rollout →

publicize

Page 30: Exceptional Performance Evolution at Yahoo!

(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

Page 31: Exceptional Performance Evolution at Yahoo!

Evolution of Performance

quantify→ profile

→ research, case studies→ best practices

→ evangelize→ codify

→ rollout →

publicize

Page 32: Exceptional Performance Evolution at Yahoo!

What's Next?

wider adoption, internationals

industry-wide initiatives

other areas – backend, mobile

Page 33: Exceptional Performance Evolution at Yahoo!

Takeaways

quantify & profile first

make it irresistible

enlist deputies

teach to fish

carrot v. stick

reach outside

Page 34: Exceptional Performance Evolution at Yahoo!

Steve [email protected]

Page 35: Exceptional Performance Evolution at Yahoo!

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/