Download - Exceptional Performance Evolution at Yahoo!
![Page 2: Exceptional Performance Evolution at Yahoo!](https://reader036.vdocuments.mx/reader036/viewer/2022081511/568151f1550346895dc02bdb/html5/thumbnails/2.jpg)
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!](https://reader036.vdocuments.mx/reader036/viewer/2022081511/568151f1550346895dc02bdb/html5/thumbnails/3.jpg)
Evolution of Performance
quantify→ profile
→ research, case studies→ best practices
→ evangelize→ codify
→ rollout →
publicize
![Page 4: Exceptional Performance Evolution at Yahoo!](https://reader036.vdocuments.mx/reader036/viewer/2022081511/568151f1550346895dc02bdb/html5/thumbnails/4.jpg)
Performance Definition
two categories:– response time– efficiency
focus: web products
![Page 5: Exceptional Performance Evolution at Yahoo!](https://reader036.vdocuments.mx/reader036/viewer/2022081511/568151f1550346895dc02bdb/html5/thumbnails/5.jpg)
Response Time, Page Weight, YSlow Grade
![Page 6: Exceptional Performance Evolution at Yahoo!](https://reader036.vdocuments.mx/reader036/viewer/2022081511/568151f1550346895dc02bdb/html5/thumbnails/6.jpg)
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!](https://reader036.vdocuments.mx/reader036/viewer/2022081511/568151f1550346895dc02bdb/html5/thumbnails/7.jpg)
Evolution of Performance
quantify→ profile
→ research, case studies→ best practices
→ evangelize→ codify
→ rollout →
publicize
![Page 8: Exceptional Performance Evolution at Yahoo!](https://reader036.vdocuments.mx/reader036/viewer/2022081511/568151f1550346895dc02bdb/html5/thumbnails/8.jpg)
The Importance of Frontend Performance
Backend =
5%
Frontend =
95%
Even here, frontend = 88%
![Page 9: Exceptional Performance Evolution at Yahoo!](https://reader036.vdocuments.mx/reader036/viewer/2022081511/568151f1550346895dc02bdb/html5/thumbnails/9.jpg)
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!](https://reader036.vdocuments.mx/reader036/viewer/2022081511/568151f1550346895dc02bdb/html5/thumbnails/10.jpg)
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!](https://reader036.vdocuments.mx/reader036/viewer/2022081511/568151f1550346895dc02bdb/html5/thumbnails/11.jpg)
Evolution of Performance
quantify→ profile
→ research, case studies→ best practices
→ evangelize→ codify
→ rollout →
publicize
![Page 12: Exceptional Performance Evolution at Yahoo!](https://reader036.vdocuments.mx/reader036/viewer/2022081511/568151f1550346895dc02bdb/html5/thumbnails/12.jpg)
Performance Research
![Page 13: Exceptional Performance Evolution at Yahoo!](https://reader036.vdocuments.mx/reader036/viewer/2022081511/568151f1550346895dc02bdb/html5/thumbnails/13.jpg)
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!](https://reader036.vdocuments.mx/reader036/viewer/2022081511/568151f1550346895dc02bdb/html5/thumbnails/14.jpg)
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!](https://reader036.vdocuments.mx/reader036/viewer/2022081511/568151f1550346895dc02bdb/html5/thumbnails/15.jpg)
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!](https://reader036.vdocuments.mx/reader036/viewer/2022081511/568151f1550346895dc02bdb/html5/thumbnails/16.jpg)
Case Studies
![Page 17: Exceptional Performance Evolution at Yahoo!](https://reader036.vdocuments.mx/reader036/viewer/2022081511/568151f1550346895dc02bdb/html5/thumbnails/17.jpg)
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!](https://reader036.vdocuments.mx/reader036/viewer/2022081511/568151f1550346895dc02bdb/html5/thumbnails/18.jpg)
Evolution of Performance
quantify→ profile
→ research, case studies→ best practices
→ evangelize→ codify
→ rollout →
publicize
![Page 19: Exceptional Performance Evolution at Yahoo!](https://reader036.vdocuments.mx/reader036/viewer/2022081511/568151f1550346895dc02bdb/html5/thumbnails/19.jpg)
14 Rules
![Page 20: Exceptional Performance Evolution at Yahoo!](https://reader036.vdocuments.mx/reader036/viewer/2022081511/568151f1550346895dc02bdb/html5/thumbnails/20.jpg)
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!](https://reader036.vdocuments.mx/reader036/viewer/2022081511/568151f1550346895dc02bdb/html5/thumbnails/21.jpg)
Evolution of Performance
quantify→ profile
→ research, case studies→ best practices
→ evangelize→ codify
→ rollout →
publicize
![Page 22: Exceptional Performance Evolution at Yahoo!](https://reader036.vdocuments.mx/reader036/viewer/2022081511/568151f1550346895dc02bdb/html5/thumbnails/22.jpg)
(Internal) Evangelism
training classes
tech talks
staff presentations
web site – papers, twiki
mailing list
consulting
![Page 23: Exceptional Performance Evolution at Yahoo!](https://reader036.vdocuments.mx/reader036/viewer/2022081511/568151f1550346895dc02bdb/html5/thumbnails/23.jpg)
Evolution of Performance
quantify→ profile
→ research, case studies→ best practices
→ evangelize→ codify
→ rollout →
publicize
![Page 24: Exceptional Performance Evolution at Yahoo!](https://reader036.vdocuments.mx/reader036/viewer/2022081511/568151f1550346895dc02bdb/html5/thumbnails/24.jpg)
YSlow
performance lint tool
grades web pages for each rule
Firefox add-on integrated with Firebug
![Page 25: Exceptional Performance Evolution at Yahoo!](https://reader036.vdocuments.mx/reader036/viewer/2022081511/568151f1550346895dc02bdb/html5/thumbnails/25.jpg)
![Page 26: Exceptional Performance Evolution at Yahoo!](https://reader036.vdocuments.mx/reader036/viewer/2022081511/568151f1550346895dc02bdb/html5/thumbnails/26.jpg)
Evolution of Performance
quantify→ profile
→ research, case studies→ best practices
→ evangelize→ codify
→ rollout →
publicize
![Page 27: Exceptional Performance Evolution at Yahoo!](https://reader036.vdocuments.mx/reader036/viewer/2022081511/568151f1550346895dc02bdb/html5/thumbnails/27.jpg)
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!](https://reader036.vdocuments.mx/reader036/viewer/2022081511/568151f1550346895dc02bdb/html5/thumbnails/28.jpg)
![Page 29: Exceptional Performance Evolution at Yahoo!](https://reader036.vdocuments.mx/reader036/viewer/2022081511/568151f1550346895dc02bdb/html5/thumbnails/29.jpg)
Evolution of Performance
quantify→ profile
→ research, case studies→ best practices
→ evangelize→ codify
→ rollout →
publicize
![Page 30: Exceptional Performance Evolution at Yahoo!](https://reader036.vdocuments.mx/reader036/viewer/2022081511/568151f1550346895dc02bdb/html5/thumbnails/30.jpg)
(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!](https://reader036.vdocuments.mx/reader036/viewer/2022081511/568151f1550346895dc02bdb/html5/thumbnails/31.jpg)
Evolution of Performance
quantify→ profile
→ research, case studies→ best practices
→ evangelize→ codify
→ rollout →
publicize
![Page 32: Exceptional Performance Evolution at Yahoo!](https://reader036.vdocuments.mx/reader036/viewer/2022081511/568151f1550346895dc02bdb/html5/thumbnails/32.jpg)
What's Next?
wider adoption, internationals
industry-wide initiatives
other areas – backend, mobile
![Page 33: Exceptional Performance Evolution at Yahoo!](https://reader036.vdocuments.mx/reader036/viewer/2022081511/568151f1550346895dc02bdb/html5/thumbnails/33.jpg)
Takeaways
quantify & profile first
make it irresistible
enlist deputies
teach to fish
carrot v. stick
reach outside
![Page 34: Exceptional Performance Evolution at Yahoo!](https://reader036.vdocuments.mx/reader036/viewer/2022081511/568151f1550346895dc02bdb/html5/thumbnails/34.jpg)
Steve [email protected]
![Page 35: Exceptional Performance Evolution at Yahoo!](https://reader036.vdocuments.mx/reader036/viewer/2022081511/568151f1550346895dc02bdb/html5/thumbnails/35.jpg)
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/