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 [email protected]
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/