The 7 Habits of Exceptional Performance discusses techniques for optimizing website performance. It recommends flushing the buffer early, using GET requests for AJAX, preloading components, avoiding filters, measuring performance metrics, and balancing new features with performance improvements. High performance should be baked into the development process from the start. Key metrics to track include page weight, response time, and HTTP requests.

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

2. Quantify and improve the
performance of all Yahoo!
products worldwide

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

4. Why talk about
performance?

5. 1: Because fast is better

6. 6

9. 9

10. 10

11. 11

12. 12

13. 2: Because sites are bigger

14. Modern web sites &
applications have changed
architecturally.

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

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

17. 3: Time is money

18. +100 ms

19. Amazon:1% drop in sales
+100 ms

20. +400 ms

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

22. +500 ms

23. Google: 20% fewer
searches
+500 ms

24. What is performance?

25. Two Flavors:
Response Time
&
System Efficiency

26. Our focus is
the response
time of web
products

27. Performance Fruit
(some low, some high)

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

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

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

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

33. #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

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

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

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

37. 3 flavors
Unconditional
Conditional
Anticipated

38. Unconditional Preload
google.com

39. Conditional Preload
yahoo.com

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

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

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

43. 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');
}

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

45. Good browsers get more
And the dinosaurs get an acceptable fallback

46. Experimental Data
Removing Alpha Image Loader
100ms
Yahoo! search

47. #19
iPhone 3G
1000Kb cache limit

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

49. 7 HABITS OF HIGH
PERFORMANCE
Baking performance into development

50. 1. LOFNO
Look out for number one!

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

52. 3. Balance features with
speed

53. Balancing the
performance budget

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

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

56. Features = Optimizations

57. 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?

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

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

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

61. Firebug
Web development evolved.
Free.

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

63. LiveHTTPHeaders
View HTTP headers. Firefox
extension. Free.

64. YSlow
Performance insights and
analysis tool. Free.

65. Gomez
3rd party measurements.
Competitor comparisons.

66. Smush it
Image Optimization
http://smushit.com

67. 6. Set targets

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

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

70. 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/

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

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