THE 7 HABITS OF EXCEPTIONAL
       PERFORMANCE




Stoyan Stefanov              Nicole Sullivan
http://phpied.com   http:/...
Quantify and improve the
performance of all Yahoo!
   products worldwide
Y! Performance Research
    Engineering Team




     Nicole Sullivan, Anande Kishore (intern),
   Stoyan Stefanov, Philip...
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...
After YSlow “A”?
1. Flush the buffer early              11. Minimize DOM access

2. Use GET for AJAX requests           12...
#1
 Flush the buffer early
 Let the browser work while server is busy
#1
                                        Com pon e n ts
                                        down load in
           ...
#2       Use GET for Ajax
             requests
 •   GET is for retrieving     •   POST without actually
     data        ...
#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)

•   JavaS...
#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.
                        ...
#14
          Avoid filters
      Why is the AlphaImageLoader used?

   IE6 and earlier don’t natively support alpha
  tran...
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. Fal...
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! se...
#19
      iPhone 3G
       1000Kb cache limit
25Kb component limit no longer exists.
          Total cache limit is 1000K.
 Cache limitations are not affected by gzippi...
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....
3. Balance features with
         speed
Balancing the
performance budget
Three steps.

• Measure current
  performance and trends

• Estimate performance impact
  of all new features

• Estimate ...
Estimates, how? track:

• Page Weight *
• Response Time
• HTTP requests

 * For more complex sites, track page weight by
 ...
Features   = Optimizations
Verify assumptions.



     • Was the performance impact of each feature
       what you estimated it would be?

     • Di...
Allocate time, balance the budget




      Performance Improvements
               versus
            New Features

     ...
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.i...
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
          statement...
Links
book: http://www.oreilly.com/catalog/9780596514211/
examples: http://stevesouders.com/examples/
image maps: http://w...
CC Images Used
“Zipper Pocket” by jogales: http://www.flickr.com/photos/jogales/11519576/
“Need for Speed” by Amnemona: htt...
CC Images Used
“Vintage Kodak Studio Scales Set and Bottle” by http://www.flickr.com/photos/captkodak/
    272746539/

“Ass...
Let’s keep talking...
Stoyan Stefanov         Nicole Sullivan
http://phpied.com       http://stubbornella.org
YSlow: Lead ...
7 Habits of Exceptional Performance
7 Habits of Exceptional Performance
7 Habits of Exceptional Performance
Upcoming SlideShare
Loading in...5
×

7 Habits of Exceptional Performance

9,842

Published on

Published in: Business, Technology
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
9,842
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
250
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

7 Habits of Exceptional Performance

  1. 1. THE 7 HABITS OF EXCEPTIONAL PERFORMANCE Stoyan Stefanov Nicole Sullivan http://phpied.com http://stubbornella.org
  2. 2. Quantify and improve the performance of all Yahoo! products worldwide
  3. 3. Y! Performance Research Engineering Team Nicole Sullivan, Anande Kishore (intern), Stoyan Stefanov, Philip Tellis, Swapnil Shinde
  4. 4. Why talk about performance?
  5. 5. 1: Because fast is better
  6. 6. 6
  7. 7. 9
  8. 8. 10
  9. 9. 11
  10. 10. 12
  11. 11. 2: Because sites are bigger
  12. 12. Modern web sites & applications have changed architecturally.
  13. 13. From 2003 to 2008: 97K to 312K. 25.7 to 49.9 objects.
  14. 14. In past 12 months, Top 1000 sites: From 250K to 310.4K. WebSiteOptimization.com/speed/tweak/average-web-page
  15. 15. 3: Time is money
  16. 16. +100 ms
  17. 17. Amazon:1% drop in sales +100 ms
  18. 18. +400 ms
  19. 19. Yahoo!: 5-9% drop in full-page traffic +400 ms
  20. 20. +500 ms
  21. 21. Google: 20% fewer searches +500 ms
  22. 22. What is performance?
  23. 23. Two Flavors: Response Time & System Efficiency
  24. 24. Our focus is the response time of web products
  25. 25. Performance Fruit (some low, some high)
  26. 26. 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
  27. 27. 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
  28. 28. #1 Flush the buffer early Let the browser work while server is busy
  29. 29. #1 Com pon e n ts down load in paralle l with Text HTML Let the browser work while server is busy
  30. 30. #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
  31. 31. #3 Post-load components Ask yourself: what's absolutely required in order to render the page initially?
  32. 32. 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
  33. 33. #4 Preload Components Preload items you'll need in the future
  34. 34. 3 flavors Unconditional Conditional Anticipated
  35. 35. Unconditional Preload google.com
  36. 36. Conditional Preload yahoo.com
  37. 37. 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.
  38. 38. #14 Avoid filters Why is the AlphaImageLoader used? IE6 and earlier don’t natively support alpha transparency. This filter forces that support.
  39. 39. Problem with filters • Blocks rendering, freezes the browser • Increased memory consumption • Per element, not per image!
  40. 40. 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'); }
  41. 41. Progressively enhanced PNG8 Build a binary transparency image. In Fireworks, add a few alpha transparent pixels.
  42. 42. Good browsers get more And the dinosaurs get an acceptable fallback
  43. 43. Experimental Data Removing Alpha Image Loader 100ms Yahoo! search
  44. 44. #19 iPhone 3G 1000Kb cache limit
  45. 45. 25Kb component limit no longer exists. Total cache limit is 1000K. Cache limitations are not affected by gzipping. iPhone Cache has evolved
  46. 46. 7 HABITS OF HIGH PERFORMANCE Baking performance into development
  47. 47. 1. LOFNO Look out for number one!
  48. 48. 2. Harvest the low-hanging fruit Pick your battles, some performance optimizations are easier to implement. (Run YSlow)
  49. 49. 3. Balance features with speed
  50. 50. Balancing the performance budget
  51. 51. Three steps. • Measure current performance and trends • Estimate performance impact of all new features • Estimate impact of all performance improvements.
  52. 52. Estimates, how? track: • Page Weight * • Response Time • HTTP requests * For more complex sites, track page weight by component type; CSS, JS, Images, Flash
  53. 53. Features = Optimizations
  54. 54. 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?
  55. 55. Allocate time, balance the budget Performance Improvements versus New Features 58
  56. 56. 4. Make performance part of the process Avoid the response time roller coaster.
  57. 57. 5. Measure and track results Measurement is the first step to improvement.
  58. 58. Firebug Web development evolved. Free.
  59. 59. IBM Page Detailer Packet sniffer. Windows only (IE, FF, any .exe). Free trial, $300 license http://alphaworks.ibm.com/tech/ pagedetailer
  60. 60. LiveHTTPHeaders View HTTP headers. Firefox extension. Free.
  61. 61. YSlow Performance insights and analysis tool. Free.
  62. 62. Gomez 3rd party measurements. Competitor comparisons.
  63. 63. Smush it Image Optimization http://smushit.com
  64. 64. 6. Set targets
  65. 65. 7. Ask questions and challenge answers Even smart people make assumptions or repeat incorrect statements.
  66. 66. 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
  67. 67. 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/
  68. 68. 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
  69. 69. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×