7 Habits of Exceptional Performance

THE 7 HABITS OF EXCEPTIONAL PERFORMANCE

Stoyan Stefanovhttp://phpied.com

Nicole Sullivanhttp://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

2. Use GET for AJAX requests

3. Post-load components

4. Preload components

5. Reduce the number of DOM elements

6. Split components across domains

7. Minimize the number of iframes

8. No 404s

9. Reduce cookie size

10. Use cookie-free domains for components

11. Minimize DOM access

12. Develop smart event handlers

13. Choose <link> over @import

14. Avoid filters

15. Optimize images

16. Optimize CSS sprites

17. Don't scale images in HTML

18. Make favicon.ico small and cacheable

19. iPhone 3G Breakthrough

20. Pack components into a multipart document

After YSlow “A”?1. Flush the buffer early

2. Use GET for AJAX requests

3. Post-load components

4. Preload components

5. Reduce the number of DOM elements

6. Split components across domains

7. Minimize the number of iframes

8. No 404s

9. Reduce cookie size

10. Use cookie-free domains for components

11. Minimize DOM access

12. Develop smart event handlers

13. Choose <link> over @import

14. Avoid filters

15. Optimize images

16. Optimize CSS sprites

17. Don't scale images in HTML

18. Make favicon.ico small and cacheable

19. iPhone 3G breakthrough New!

20. Pack components into a multipart document

Flush the buffer early

#1

Let the browser work while server is busy

Com pon e n ts

down load in

paralle l with

HTML Text

Let the browser work while server is busy

#1

Use GET for Ajax requests

• GET is for retrieving data

• GET request is one TCP packet (unless you have a lot of cookies)

• Max URL length 2K (because of IE)

• Yahoo! Mail Research

• POST without actually posting data is like GET

• POST is a two-step process (send headers, send data)

#2

Post-load components

#3

Ask yourself: what's absolutely required in order to render the page initially?

• 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

Example: Yahoo.com

Preload ComponentsPreload items you'll need in the future

#4

3 flavorsUnconditionalConditional Anticipated

Unconditional Preloadgoogle.com

Conditional Preloadyahoo.com

Anticipated Preload• Of course it’s slow:

• 100% of page views are with an empty cache.

• New Feature or full redesign?

• Preload components before launch;

• users will already have a primed cache when you go live.

“The redesign is cool, but it’s so slow!”

Avoid filtersWhy is the AlphaImageLoader used?

IE6 and earlier don’t natively support alpha transparency. This filter forces that support.

#14

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 moreAnd the dinosaurs get an acceptable fallback

Experimental DataRemoving Alpha Image Loader

100msYahoo! search

iPhone 3G1000Kb cache limit

#19

iPhone Cache has evolved

25Kb component limit no longer exists.Total cache limit is 1000K.

Cache limitations are not affected by gzipping.

7 HABITS OF HIGH PERFORMANCE

Baking performance into development

1. LOFNOLook out for number one!

2. Harvest the low-hanging

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

processAvoid the response time roller

coaster.

5. Measure and track results

Measurement is the first step to improvement.

FirebugWeb development evolved.

Free.

IBM Page Detailer

Packet sniffer. Windows only (IE, FF, any .exe). Free trial, $300 license

http://alphaworks.ibm.com/tech/pagedetailer

LiveHTTPHeadersView HTTP headers. Firefox

extension. Free.

YSlowPerformance insights and

analysis tool. Free.

Gomez3rd party measurements. Competitor comparisons.

Smush itImage Optimizationhttp://smushit.com

6. Set targets

7. Ask questions and challenge

answersEven smart people make

assumptions or repeat incorrect statements.

Linksbook: 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/

71

Thanks to Tenni Theurer and Nate Koechleyhttp://developer.yahoo.net/blog/archives/2008/01/the_7_habits_fo.html

Let’s keep talking... Stoyan Stefanovhttp://phpied.comYSlow: Lead [email protected]

Nicole Sullivanhttp://[email protected]“stubbornella” on the web