exceptional performance evolution at yahoo! steve souders chief performance yahoo!...

Download Exceptional Performance Evolution at Yahoo! Steve Souders Chief Performance Yahoo! souders@yahoo-inc.com

Post on 26-Mar-2015

215 views

Category:

Documents

2 download

Embed Size (px)

TRANSCRIPT

  • Slide 1

Exceptional Performance Evolution at Yahoo! Steve Souders Chief Performance Yahoo! souders@yahoo-inc.com Slide 2 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 Slide 3 Evolution of Performance quantify profile research, case studies best practices evangelize codify rollout publicize Slide 4 Performance Definition two categories: response time efficiency focus: web products Slide 5 Response Time, Page Weight, YSlow Grade Slide 6 Strong Correlation total page weight response time inverse YSlow grade correlation(resp time, page weight) = 0.94 correlation(inverse YSlow, resp time) = 0.76 correlation(inverse YSlow, page weight) = 0.59 Slide 7 Evolution of Performance quantify profile research, case studies best practices evangelize codify rollout publicize Slide 8 The Importance of Frontend Performance Backend = 5% Frontend = 95% Even here, frontend = 88% Slide 9 Time Spent on the Frontend Empty CachePrimed Cache amazon.com82%86% aol.com94%86% cnn.com81%92% ebay.com98%92% google.com86%64% msn.com97%95% myspace.com96%86% wikipedia.org80%88% yahoo.com95%88% youtube.com97%95% Slide 10 The Performance Golden Rule 80-90% of the end-user response time is spent on the frontend. Start there. Slide 11 Evolution of Performance quantify profile research, case studies best practices evangelize codify rollout publicize Slide 12 Performance Research Slide 13 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 Slide 14 Browser Cache Experiment Results page views with empty cache 40-60% ~20% users with empty cache Slide 15 Experiment Takeaways The empty cache user experience is more prevalent than you think! Optimize for both primed cache and empty cache experience. Slide 16 Case Studies Slide 17 Case Study: move JS to onload remove bottom tabs avoid redirects images sprites host JS on CDN combine JS files 40-50% Slide 18 Evolution of Performance quantify profile research, case studies best practices evangelize codify rollout publicize Slide 19 14 Rules Slide 20 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 Slide 21 Evolution of Performance quantify profile research, case studies best practices evangelize codify rollout publicize Slide 22 (Internal) Evangelism training classes tech talks staff presentations web site papers, twiki mailing list consulting Slide 23 Evolution of Performance quantify profile research, case studies best practices evangelize codify rollout publicize Slide 24 YSlow performance lint tool grades web pages for each rule Firefox add-on integrated with Firebug Slide 25 Slide 26 Evolution of Performance quantify profile research, case studies best practices evangelize codify rollout publicize Slide 27 Performance Rollout performance SLA targets regular tracking Wall of Fame/Shame Biz Case Performance TV Competitor Wall of Fame/Shame Slide 28 reduce HTTP use a CDN add Expires gzip minify configure ETags Slide 29 Evolution of Performance quantify profile research, case studies best practices evangelize codify rollout publicize Slide 30 (External) Evangelism Book High Performance Web Sites Conferences Yahoo! F2E Summit Web 2.0 Expo Foo Camp Blogs YUI Blog: http://yuiblog.com/blog/category/performance YDN Blog: http://developer.yahoo.com/performance/ Open Source YSlow OSCon Ajax Experience Blogher Future of Web Apps Slide 31 Evolution of Performance quantify profile research, case studies best practices evangelize codify rollout publicize Slide 32 What's Next? wider adoption, internationals industry-wide initiatives other areas backend, mobile Slide 33 Takeaways quantify & profile first make it irresistible enlist deputies teach to fish carrot v. stick reach outside Slide 34 Steve Souders souders@yahoo-inc.com Slide 35 CC Images Used "Need for Speed" by Amnemona: http://www.flickr.com/photos/marinacvinhal/379111290/Amnemona http://www.flickr.com/photos/marinacvinhal/379111290/ "Max speed 15kmh" by xxxtoff: http://www.flickr.com/photos/xxxtoff/219781763/xxxtoff http://www.flickr.com/photos/xxxtoff/219781763/ "maybe" by Tal Bright: http://www.flickr.com/photos/bright/118197469/Tal Bright http://www.flickr.com/photos/bright/118197469/ "takeout" by dotpolka : http://www.flickr.com/photos/dotpolka/249129144/dotpolka http://www.flickr.com/photos/dotpolka/249129144/ "new briefcase" by dcJohn: http://www.flickr.com/photos/dcjohn/85504455/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/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/Melvin Schlubman http://flickr.com/photos/pauldineen/45498969/ "Horse and Water" by originalrobart: http://flickr.com/photos/grandetour/160907919/originalrobart http://flickr.com/photos/grandetour/160907919/ "thank you" by nj dodge: http://flickr.com/photos/nj_dodge/187190601/nj dodge http://flickr.com/photos/nj_dodge/187190601/

Recommended

View more >