advertisement

7 Habits of Exceptional Performance

50 %
50 %
advertisement
Information about 7 Habits of Exceptional Performance

Published on October 1, 2008

Author: stubbornella

Source: slideshare.net

advertisement

THE 7 HABITS OF EXCEPTIONAL PERFORMANCE Stoyan Stefanov Nicole Sullivan http://phpied.com http://stubbornella.org

Quantify and improve the performance of all Yahoo! products worldwide

Y! Performance Research Engineering Team Nicole Sullivan, Anande Kishore (intern), Stoyan Stefanov, Philip Tellis, Swapnil Shinde

Why talk about performance?

1: Because fast is better

6

9

10

11

12

2: Because sites are bigger

Modern web sites & applications have changed architecturally.

From 2003 to 2008: 97K to 312K. 25.7 to 49.9 objects.

In past 12 months, Top 1000 sites: From 250K to 310.4K. WebSiteOptimization.com/speed/tweak/average-web-page

3: Time is money

+100 ms

Amazon:1% drop in sales +100 ms

+400 ms

Yahoo!: 5-9% drop in full-page traffic +400 ms

+500 ms

Google: 20% fewer searches +500 ms

What is performance?

Two Flavors: Response Time & System Efficiency

Our focus is the response time of web products

Performance Fruit (some low, some high)

After YSlow “A”? 1. Flush the buffer early 11. Minimize DOM access 2. Use GET for AJAX requests 12. Develop smart event handlers 3. Post-load components 13. Choose <link> over @import 4. Preload components 14. Avoid filters 5. Reduce the number of DOM elements 15. Optimize images 6. Split components across domains 16. Optimize CSS sprites 7. Minimize the number of iframes 17. Don't scale images in HTML 8. No 404s 18. Make favicon.ico small and cacheable 9. Reduce cookie size 19. iPhone 3G Breakthrough 10. Use cookie-free domains for 20. Pack components into a multipart components document

After YSlow “A”? 1. Flush the buffer early 11. Minimize DOM access 2. Use GET for AJAX requests 12. Develop smart event handlers 3. Post-load components 13. Choose <link> over @import 4. Preload components 14. Avoid filters 5. Reduce the number of DOM elements 15. Optimize images 6. Split components across domains 16. Optimize CSS sprites 7. Minimize the number of iframes 17. Don't scale images in HTML 8. No 404s 18. Make favicon.ico small and cacheable 9. Reduce cookie size 19. iPhone 3G breakthrough New! 10. Use cookie-free domains for 20. Pack components into a multipart components document

#1 Flush the buffer early Let the browser work while server is busy

#1 Com pon e n ts down load in paralle l with Text HTML Let the browser work while server is busy

#2 Use GET for Ajax requests • GET is for retrieving • POST without actually data posting data is like GET • GET request is one TCP • POST is a two-step packet (unless you have process (send headers, a lot of cookies) send data) • Max URL length 2K (because of IE) • Yahoo! Mail Research

#3 Post-load components Ask yourself: what's absolutely required in order to render the page initially?

Example: Yahoo.com • Extras can wait (drag and drop, animations, hidden content, images below the fold) • JavaScript is ideal candidate for splitting • YUI Image Loader • YUI Get Utility

#4 Preload Components Preload items you'll need in the future

3 flavors Unconditional Conditional Anticipated

Unconditional Preload google.com

Conditional Preload yahoo.com

Anticipated Preload • Of course it’s slow: • 100% of page views are with an empty cache. “The redesign is cool, • New Feature or full but it’s so slow!” redesign? • Preload components before launch; • users will already have a primed cache when you go live.

#14 Avoid filters Why is the AlphaImageLoader used? IE6 and earlier don’t natively support alpha transparency. This filter forces that support.

Problem with filters • Blocks rendering, freezes the browser • Increased memory consumption • Per element, not per image!

Solution: Avoid AlphaImageLoader 1. BEST: avoid completely, use PNG8 which degrades gracefully in IE < 7 2. Fallback: use underscore hack so the filter is applied only to IE < 7 #elem { background: url(some.png); _background: none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='some.png', sizingMethod='crop'); }

Progressively enhanced PNG8 Build a binary transparency image. In Fireworks, add a few alpha transparent pixels.

Good browsers get more And the dinosaurs get an acceptable fallback

Experimental Data Removing Alpha Image Loader 100ms Yahoo! search

#19 iPhone 3G 1000Kb cache limit

25Kb component limit no longer exists. Total cache limit is 1000K. Cache limitations are not affected by gzipping. iPhone Cache has evolved

7 HABITS OF HIGH PERFORMANCE Baking performance into development

1. LOFNO Look out for number one!

2. Harvest the low-hanging fruit Pick your battles, some performance optimizations are easier to implement. (Run YSlow)

3. Balance features with speed

Balancing the performance budget

Three steps. • Measure current performance and trends • Estimate performance impact of all new features • Estimate impact of all performance improvements.

Estimates, how? track: • Page Weight * • Response Time • HTTP requests * For more complex sites, track page weight by component type; CSS, JS, Images, Flash

Features = Optimizations

Verify assumptions. • Was the performance impact of each feature what you estimated it would be? • Did the optimizations help as much as you thought they would?

Allocate time, balance the budget Performance Improvements versus New Features 58

4. Make performance part of the process Avoid the response time roller coaster.

5. Measure and track results Measurement is the first step to improvement.

Firebug Web development evolved. Free.

IBM Page Detailer Packet sniffer. Windows only (IE, FF, any .exe). Free trial, $300 license http://alphaworks.ibm.com/tech/ pagedetailer

LiveHTTPHeaders View HTTP headers. Firefox extension. Free.

YSlow Performance insights and analysis tool. Free.

Gomez 3rd party measurements. Competitor comparisons.

Smush it Image Optimization http://smushit.com

6. Set targets

7. Ask questions and challenge answers Even smart people make assumptions or repeat incorrect statements.

Links book: http://www.oreilly.com/catalog/9780596514211/ examples: http://stevesouders.com/examples/ image maps: http://www.w3.org/TR/html401/struct/objects.html#h-13.6 CSS sprites: http://alistapart.com/articles/sprites inline images: http://tools.ietf.org/html/rfc2397 jsmin: http://crockford.com/javascript/jsmin dojo compressor: http://dojotoolkit.org/docs/shrinksafe HTTP status codes: http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html IBM Page Detailer: http://alphaworks.ibm.com/tech/pagedetailer Fasterfox: http://fasterfox.mozdev.org/ LiveHTTPHeaders: http://livehttpheaders.mozdev.org/ Firebug: http://getfirebug.com/ YUIBlog: http://yuiblog.com/blog/2006/11/28/performance-research-part-1/ http://yuiblog.com/blog/2007/01/04/performance-research-part-2/ http://yuiblog.com/blog/2007/03/01/performance-research-part-3/ http://yuiblog.com/blog/2007/04/11/performance-research-part-4/ YDN: http://developer.yahoo.net/blog/archives/2007/03/high_performanc.html http://developer.yahoo.net/blog/archives/2007/04/rule_1_make_few.html

CC Images Used “Zipper Pocket” by jogales: http://www.flickr.com/photos/jogales/11519576/ “Need for Speed” by Amnemona: http://www.flickr.com/photos/marinacvinhal/379111290/ “I wonder what flavour it is?” by blather: http://www.flickr.com/photos/deadlyphoto/411770353/ “takeout boxes from Grand Shanghai” by massdistraction: http://www.flickr.com/photos/sharynmorrow/11263821/ “takeout” by dotpolka : http://www.flickr.com/photos/dotpolka/249129144/ “ice cream cone melting/rome” by Megandavid : http://www.flickr.com/photos/megandavid/189332042/ “nikon em bokeh” by dsevilla: http://www.flickr.com/photos/dsevilla/249202834/ “maybe” by Tal Bright: http://www.flickr.com/photos/bright/118197469/ “how do they do that” by Fort Photo: http://www.flickr.com/photos/fortphoto/388825145/ “Gorgeous iceberg 7 [Le Toit du Monde]” by Adventure Addict http://www.flickr.com/photos/adventureaddict/ 35290307/ “molasses-spice cookies” ilmungo: http://www.flickr.com/photos/ilmungo/65345233/ “Driving is fun” by Ben McLeod: http://www.flickr.com/photos/benmcleod/59948935/ “Dozen eggs” by aeA: http://www.flickr.com/photos/raeallen/96238870/ “Max speed 15kmh” by xxxtoff: http://www.flickr.com/photos/xxxtoff/219781763/ “Stairway to heaven” ognita: http://www.flickr.com/photos/ognita/503915547/ “flaps up” by http://www.flickr.com/photos/jurvetson/74274113/ “Fast Cat” by http://www.flickr.com/photos/raylopez/708023176/ “blues” by http://www.flickr.com/photos/pankaj/1877184829/

CC Images Used “Vintage Kodak Studio Scales Set and Bottle” by http://www.flickr.com/photos/captkodak/ 272746539/ “Assumtion, Minissota” by http://www.flickr.com/photos/afiler/226337382/ Thanks to Tenni Theurer and Nate Koechley http://developer.yahoo.net/blog/archives/2008/01/the_7_habits_fo.html 71

Let’s keep talking... Stoyan Stefanov Nicole Sullivan http://phpied.com http://stubbornella.org YSlow: Lead Developer nicole@stubbornella.org ssttoo@gmail.com “stubbornella” on the web

#elem presentations

Add a comment

Related pages

The 7 Habits for Exceptional Performance | Ajax Experience ...

JoinStoyan Stefanov and Nicole Sullivan from Yahoo! as they discuss how improvements in Web site performance are similar to improvements in energy or fuel ...
Read more

The 7 Habits for Exceptional Performance | ydnfiveblog - Yahoo

In July 2007 I took over the reins from Steve Souders (my former boss, performance co-hort, and someone I greatly respect) as manager of Yahoo! s ...
Read more

The 7 Habits of Highly Effective People ...

The 7 Habits of Highly Effective People. ... But it takes an exceptional manager to unleash the potential of the team and ... The 7 Habits Benchmark ...
Read more

The 7 Habits of Highly Effective Managers™

The 7 Habits™ Solutions. ... But it takes an exceptional manager to unleash the potential of the team ... prioritization, performance management ...
Read more

EMPLOYEE PERFORMANCE EVALUATION

... Work Habits /Professionalism ... Acceptable performance that meets job requirements. 7 ... Exceptional Performance that exceeds ...
Read more

Staff Performance Evaluation - SAMPLE

Staff Performance Evaluation ... ("%)8"6.9):7()*+$,"-**)$*%&"%+/#1*)%*2 ... rating is reserved for truly exceptional performance and will not be 'graded on ...
Read more

FranklinCovey- The Ultimate Competitive Advantage

FranklinCovey is a global company specializing in performance improvement. ... Exceptional Leadership At Every Level. ... The 7 Habits for Managers.
Read more

Leadership | FranklinCovey

Our Leadership Practice enable Exceptional Leadership at Every level. ... Achieve sustained superior performance. ... The 7 Habits for Managers.
Read more

7 Habits for Managers - franklincovey

7 Habits of Highly Effective People ... FranklinCovey’s The 7 Habits for Managers® training workshop focuses ... prioritization, performance management ...
Read more