High Performance Widgets - Widget Summit
High Performance Widgets - Widget Summit
High Performance Widgets - Widget Summit
- No tags were found...
You also want an ePaper? Increase the reach of your titles
YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.
<strong>High</strong> <strong>Performance</strong> <strong><strong>Widget</strong>s</strong>Steve SoudersChief <strong>Performance</strong> Yahoo!souders@yahoo-inc.com
Exceptional <strong>Performance</strong>
Exceptional <strong>Performance</strong>quantify and improve the performance ofall Yahoo! products worldwide
Exceptional <strong>Performance</strong>quantify and improve the performance ofall Yahoo! products worldwidecenter of expertise
Exceptional <strong>Performance</strong>quantify and improve the performance ofall Yahoo! products worldwidecenter of expertisebuild tools, analyze data
Exceptional <strong>Performance</strong>quantify and improve the performance ofall Yahoo! products worldwidecenter of expertisebuild tools, analyze datagather, research, and evangelize bestpractices
The Importance of Frontend<strong>Performance</strong>
The Importance of Frontend<strong>Performance</strong>Backend =5%
The Importance of Frontend<strong>Performance</strong>Frontend =95%
The Importance of Frontend<strong>Performance</strong>Even primed cache, frontend = 88%
Time Spent on the FrontendEmpty Cache Primed Cacheamazon.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%
Time Spent on the FrontendEmpty Cache Primed Cacheamazon.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 <strong>Performance</strong> Golden Rule
The <strong>Performance</strong> Golden Rule80-90% of the end-user response time isspent on the frontend. Start there.
The <strong>Performance</strong> Golden Rule80-90% of the end-user response time isspent on the frontend. Start there.
The <strong>Performance</strong> Golden Rule80-90% of the end-user response time isspent on the frontend. Start there.• Greater potential for improvement
The <strong>Performance</strong> Golden Rule80-90% of the end-user response time isspent on the frontend. Start there.• Greater potential for improvement• Simpler
The <strong>Performance</strong> Golden Rule80-90% of the end-user response time isspent on the frontend. Start there.• Greater potential for improvement• Simpler• Proven to work
<strong>Performance</strong>Research
Browser Cache ExperimentAdd an image to the page:Expires: Thu, 15 Apr 2004 20:00:00 GMTLast-Modified: Wed, 28 Sep 2006 23:49:57 GMTPercentage of users withan empty cache?Percentage of pageviews with an emptycache?# users with at least one200 responsetotal # unique users# of 200 responsestotal # responses
Browser Cache Expt Results1.00unique users with empty cachepage views with empty cache0.75percentage0.500.2500 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20day of experiment
Browser Cache Expt Resultsusers withempty cache00unique users with empty cachepage views with empty cachepage views withempty cache40-60% ~20%0.75percentage0.500.2500 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20day of experiment
Experiment Takeaways
Experiment TakeawaysThe empty cache userexperience is more prevalentthan you think!
Experiment TakeawaysThe empty cache userexperience is more prevalentthan you think!Optimize for both primed cacheand empty cache experience.
Case Studies
Case Study:40-50%move JS to onloadremove bottom tabsavoid redirectsimage spriteshost JS on CDNcombine JS files38742387703879838826388543888238910389383896638994390223905039078391063913439162
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
<strong>Widget</strong> Analysis
My iTunes
My iTunes
Flash-basedMy iTunes
My iTunesFlash-based8 HTTP requests
My iTunesFlash-based8 HTTP requestsnothing is cached
My iTunesFlash-based8 HTTP requestsnothing is cached2 nd page view: 8 HTTP requests (seven 304s)
My iTunesFlash-based8 HTTP requestsnothing is cached2 nd page view: 8 HTTP requests (seven 304s)XML not cacheable, but images & CSS are
Flickr
Flickr
JS-basedFlickr
FlickrJS-based4 HTTP requests
FlickrJS-based4 HTTP requestsimages are cached
FlickrJS-based4 HTTP requestsimages are cached2 nd page view: 1 HTTP request (badge JS)
FlickrJS-based4 HTTP requestsimages are cached2 nd page view: 1 HTTP request (badge JS)JS gzipped, not minified (only 1.3K)
Meebo
Meebo
Flash-basedMeebo
MeeboFlash-based8 HTTP requests
MeeboFlash-based8 HTTP requestsnothing is cached
MeeboFlash-based8 HTTP requestsnothing is cached2 nd page view: 8 HTTP request (four 304s)
WeatherBug
WeatherBug
WeatherBugGoogle Module27 requests (15 gmodules.com)
WeatherBugGoogle Module27 requests (15 gmodules.com)2nd page view: 7 HTTP requests
WeatherBugGoogle Module27 requests (15 gmodules.com)2nd page view: 7 HTTP requestsJS minified (except one) & gzipped
WeatherBugGoogle Module27 requests (15 gmodules.com)2nd page view: 7 HTTP requestsJS minified (except one) & gzippedmost images not cached
WeatherBugGoogle Module27 requests (15 gmodules.com)2nd page view: 7 HTTP requestsJS minified (except one) & gzippedmost images not cachedJS could be combined
Yahoo! Finance
Yahoo! Finance
Yahoo! FinanceJS-based33 HTTP requests
Yahoo! FinanceJS-based33 HTTP requestslotsa caching
Yahoo! FinanceJS-based33 HTTP requestslotsa caching2nd page view: 1 HTTP request (badge JS)
Yahoo! FinanceJS-based33 HTTP requestslotsa caching2nd page view: 1 HTTP request (badge JS)JS gzipped & minified
Yahoo! FinanceJS-based33 HTTP requestslotsa caching2nd page view: 1 HTTP request (badge JS)JS gzipped & minified20 CSS background images – use sprites
<strong>Widget</strong> <strong>Performance</strong># HTTPrequestspageweightonloadtimeHTTPtimeMy iTunes 8 235K 657 1487Flickr 4 16K 766 726Meebo 8 25K 376 2512Weatherbug 27 68K 1954 2552Y! Finance 33 84K 1016 2254
<strong>Widget</strong> <strong>Performance</strong># HTTPrequestspageweightonloadtimeHTTPtimeMy iTunes 8 235K 657 1487Flickr 4 16K 766 726Meebo 8 25K 376 2512Weatherbug 27 68K 1954 2552Y! Finance 33 84K 1016 2254
<strong>Widget</strong> <strong>Performance</strong># HTTPrequestspageweightonloadtimeHTTPtimeMy iTunes 8 235K 657 1487Flickr 4 16K 766 726Meebo 8 25K 376 2512Weatherbug 27 68K 1954 2552Y! Finance 33 84K 1016 2254
<strong>Widget</strong> <strong>Performance</strong># HTTPrequestspageweightonloadtimeHTTPtimeMy iTunes 8 235K 657 1487Flickr 4 16K 766 726Meebo 8 25K 376 2512Weatherbug 27 68K 1954 2552Y! Finance 33 84K 1016 2254
<strong><strong>Widget</strong>s</strong> are Hard
<strong><strong>Widget</strong>s</strong> are Hardcaching & preloading aren’t always viable
<strong><strong>Widget</strong>s</strong> are Hardcaching & preloading aren’t always viablecache what you can
<strong><strong>Widget</strong>s</strong> are Hardcaching & preloading aren’t always viablecache what you canreduce size of data (gzip, minify)
<strong><strong>Widget</strong>s</strong> are Hardcaching & preloading aren’t always viablecache what you canreduce size of data (gzip, minify)reduce # of HTTP requests (sprites,combined JS)
<strong><strong>Widget</strong>s</strong> are Hardcaching & preloading aren’t always viablecache what you canreduce size of data (gzip, minify)reduce # of HTTP requests (sprites,combined JS)promote progressive rendering
Takeaways
Takeawaysfocus on the frontend
Takeawaysfocus on the frontendharvest the low-hanging fruit
Takeawaysfocus on the frontendharvest the low-hanging fruityou do control user response times
Takeawaysfocus on the frontendharvest the low-hanging fruityou do control user response timessmall investment up front keeps on giving
Takeawaysfocus on the frontendharvest the low-hanging fruityou do control user response timessmall investment up front keeps on givingLOFNO – be an advocate for your users
Steve Souderssouders@yahoo-inc.com
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/
Change language