1. High Performance Widgets Steve Souders Chief Performance Yahoo! souders@yahoo-inc.com

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

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 mail.yahoo.com 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 18.08 s Time 12.48 s 1.52 s 1.53 s 0.34 s 0s 15.87 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=0.5289571053069156 HTTP/1.1 Host: us.xxx.mail.yahoo.com HTTP/1.1 200 OK Date: Thu, 12 Apr 2007 19:39:09 GMT Cache-Control: private,max-age=0 Last-Modified: Sat, 31 Mar 2007 01: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: http://yuiblog.com/blog/category/performance YDN Blog: http://developer.yahoo.com/performance/ Open Source YSlow OSCon Ajax Experience Blogher Future of Web Apps

21. YSlow http://developer.yahoo.com/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 www.amazon.com405K15.9 secD www.aol.com182K11.5 secF www.cnn.com502K22.4 secF www.ebay.com275K9.6 secC froogle.google.com18K1.7 secA www.msn.com221K9.3 secF www.myspace.com205K7.8 secD www.wikipedia.org106K6.2 secC www.yahoo.com178K5.9 secA www.youtube.com139K9.6 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 gmodules.com) 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 iTunes8235K6571487 Flickr416K766726 Meebo825K3762512 Weatherbug2768K19542552 Y! Finance3384K10162254

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 souders@yahoo-inc.com

35. CC Images Used "Need for Speed" by Amnemon: 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/ "how do they do that" by Fort Photo: http://www.flickr.com/photos/fortphoto/388825145/ "Absolutely Nothing is Allowed Here" by Vicki & Chuck Rogers: http://www.flickr.com/photos/two-wrongs/205467442/ "Zipper Pocket" by jogales: http://www.flickr.com/photos/jogales/11519576/ "new briefcase" by dcJohn: http://www.flickr.com/photos/dcjohn/85504455/ "Told you it was me!" by Pug!: http://flickr.com/photos/pugspace/1277023154/ "Robert's Legion" by dancharvey: http://www.flickr.com/photos/dancharvey/2647529/ "thank you" by nj dodge: http://flickr.com/photos/nj_dodge/187190601/