Presentation is loading. Please wait.

Presentation is loading. Please wait.

High Performance Widgets Steve Souders Chief Performance Yahoo!

Similar presentations

Presentation on theme: "High Performance Widgets Steve Souders Chief Performance Yahoo!"— Presentation transcript:

1 High Performance Widgets Steve Souders Chief Performance Yahoo!

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

3 The Importance of Frontend Performance Backend = 5% Frontend = 95% Even primed cache, frontend = 88%

4 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%

5 The Performance Golden Rule 80-90% of the end-user response time is spent on the frontend. Start there. Greater potential for improvement Simpler Proven to work

6 Performance Research

7 Browser Cache Experiment Add an image to the page: Expires: Thu, 15 Apr :00:00 GMT Last-Modified: Wed, 28 Sep :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

8 Browser Cache Expt Results page views with empty cache 40-60% ~20% users with empty cache

9 Experiment Takeaways The empty cache user experience is more prevalent than you think! Optimize for both primed cache and empty cache experience.

10 Case Studies

11 Case Study: move JS to onload remove bottom tabs avoid redirects image sprites host JS on CDN combine JS files 40-50%

12 What about performance and Web 2.0 apps? client-side CPU is more of an issue user expectations are higher these rules still apply, new rules will come out start off on the right foot

13 Case Study: User Workflow view inbox folder read messages (x3) compose message confirm send total time: Time 2.40 s 4.98 s 6.39 s 2.21 s 2.10 s s Time s 1.52 s 1.53 s 0.34 s 0s s Delta +420% -70% -76% -85% -100% -12% Mail Mail Classic

14 14 Rules

15 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

16 Rule 14: Make AJAX cacheable XHR, JSON, iframe, dynamic scripts can still be cached (and minified, and gzipped) a personalized response should still be cacheable for that person

17 AJAX Example: Yahoo! Mail Beta address book XML request GET /yab/[...]&r= HTTP/1.1 Host: HTTP/ OK Date: Thu, 12 Apr :39:09 GMT Cache-Control: private,max-age=0 Last-Modified: Sat, 31 Mar :17:17 GMT Content-Type: text/xml; charset=utf-8 Content-Encoding: gzip address book changes infrequently –cache it; add last-modified-time in URL

18 Next Rules Split static content across multiple domains Reduce the size of cookies Host static content on a different domain Minify CSS Avoid IFrames

19 Evangelism

20 Book High Performance Web Sites Conferences Yahoo! F2E Summit Web 2.0 Expo Rich Web Experience Blogs YUI Blog: YDN Blog: Open Source YSlow OSCon Ajax Experience Blogher Future of Web Apps

21 YSlow performance lint tool scores web pages for each rule Firefox add-on integrated with Firebug open source license


23 Ten Top U.S Web Sites Page Weight Response Time YSlow Grade secD secF secF secC secA secF secD secC secA secD

24 Strong Correlation total page weight response time inverse YSlow grade correlation(resp time, page weight) = 0.94 correlation(resp time, inverse YSlow) = 0.76

25 Widget Analysis

26 My iTunes Flash-based 8 HTTP requests nothing is cached 2 nd page view: 8 HTTP requests (seven 304s) XML not cacheable, but images & CSS are

27 Flickr JS-based 4 HTTP requests images are cached 2 nd page view: 1 HTTP request (badge JS) JS gzipped, not minified (only 1.3K)

28 Meebo Flash-based 8 HTTP requests nothing is cached 2 nd page view: 8 HTTP request (four 304s)

29 WeatherBug Google Module 27 requests (15 2nd page view: 7 HTTP requests JS minified (except one) & gzipped most images not cached JS could be combined

30 JS-based 33 HTTP requests lotsa caching 2nd page view: 1 HTTP request (badge JS) JS gzipped & minified 20 CSS background images – use sprites Yahoo! Finance

31 Widget Performance # HTTP requests page weight onload time HTTP time My iTunes8235K Flickr416K Meebo825K Weatherbug2768K Y! Finance3384K

32 Widgets are Hard caching & preloading arent always viable cache what you can reduce size of data (gzip, minify) reduce # of HTTP requests (sprites, combined JS) promote progressive rendering

33 Takeaways focus on the frontend harvest the low-hanging fruit you do control user response times small investment up front keeps on giving LOFNO – be an advocate for your users

34 Steve Souders

35 CC Images Used "Need for Speed" by Amnemon: "Max speed 15kmh" by xxxtoff: "maybe" by Tal Bright: "takeout" by dotpolka: "how do they do that" by Fort Photo: "Absolutely Nothing is Allowed Here" by Vicki & Chuck Rogers: "Zipper Pocket" by jogales: "new briefcase" by dcJohn: "Told you it was me!" by Pug!: "Robert's Legion" by dancharvey: "thank you" by nj dodge:

Download ppt "High Performance Widgets Steve Souders Chief Performance Yahoo!"

Similar presentations

Ads by Google