Csdn Drdobbs Tenni Theurer Yahoo

High Performance Web Sites Tenni Theurer, Yahoo! Engineering Manager http://developer.yahoo.com/performance CSDN-Dr.Dobbs Software Development 2.0 Conference 2007

slow crawl boring snail stagnant unexceptional yawn unresponsive impatient delay moderate blah subdue drag apathetic prolong slack load sluggish sleepy late unexciting reduced lag complex heavy unmemorable obscure why wait perceived response time what is the end user’s experience? performance speed enjoyable urgent instant accelerate perception snap achievement better improve action pleasant pace quick promote swift cool maximum drive prompt advance fast hurry rush satisfying feel exceptional brisk rapid exciting

Exceptional Performance ,[object Object],[object Object],[object Object],[object Object]

Evolution of Performance ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Today's Checklist ,[object Object],[object Object],[object Object]

The Importance of Front-End Performance Back-end = 5% Front-end = 95% Even here, front-end = 88%

The Performance Golden Rule ,[object Object],[object Object],[object Object],[object Object]

Agenda ,[object Object],[object Object],[object Object],[object Object]

http://yuiblog.com/blog/2006/11/28/performance-research-part-1/

Empty vs. Primed Cache ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Browser Cache Experiment ,[object Object],[object Object],[object Object],[object Object],[object Object],} 1 px

Surprising Results 40-60% ~20% page views with empty cache users with empty cache

Experiment Takeaways ,[object Object],[object Object]

http://yuiblog.com/blog/2007/03/01/performance-research-part-3

Impact of Cookies on Response Time 80 ms delay dialup users +78 ms 156 ms 3000 bytes +63 ms 141 ms 2500 bytes +47 ms 125 ms 2000 bytes +31 ms 109 ms 1500 bytes +16 ms 94 ms 1000 bytes +1 ms 79 ms 500 bytes 0 ms 78 ms 0 bytes Delta Time Cookie Size keep sizes low

Parallel Downloads Two components in parallel per hostname HTTP/1.1 GIF GIF GIF GIF GIF GIF

Maximizing Parallel Downloads response time (seconds) aliases

Maximizing Parallel Downloads response time (seconds) rule of thumb: use at least two but no more than four aliases

Summary ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

14 Rules ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Rule 1: Make fewer HTTP requests ,[object Object],[object Object],[object Object],[object Object]

CSS Sprites – Preferred ,[object Object],[object Object],http://alistapart.com/articles/sprites <span style=" background-image: url('sprites.gif'); background-position: -260px -90px;"> </span>

Combined Scripts, Combined Stylesheets 3 7 youtube.com 1.5 6.5 Average 1 4 yahoo.com 1 3 wikipedia.org 2 2 myspace.com 1 9 msn.com 1 1 froogle.google.com 2 7 ebay.com 2 11 cnn.com 1 18 aol.com 1 3 amazon.com Stylesheets Scripts

Combined Scripts, Combined Stylesheets ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Rule 2: Use a CDN ,[object Object],youtube.com Akamai yahoo.com wikipedia.org Akamai, Limelight myspace.com SAVVIS msn.com google.com Akamai, Mirror Image ebay.com cnn.com Akamai aol.com Akamai amazon.com

Rule 3: Add an Expires header ,[object Object],26 days 0% 0/7 0/3 0/32 youtube.com 100% 75% 0% 80% 4% 55% 1% 48% 0% % n/a 4/4 1/1 23/23 yahoo.com 1 day 2/3 1/1 6/8 wikipedia.org 1 day 0/2 0/2 0/18 myspace.com 34 days 3/9 1/1 32/35 msn.com 454 days 0/1 0/1 1/23 froogle.google.com 140 days 0/7 0/2 16/20 ebay.com 227 days 2/11 0/2 0/138 cnn.com 217 days 6/18 1/1 23/43 aol.com 114 days 0/3 0/1 0/62 amazon.com Median Age Scripts Stylesheets Images

Rule 4: Gzip components ,[object Object],[object Object]

Gzip: not just for HTML ,[object Object],some some x youtube.com x x x yahoo.com x x x wikipedia.org x x x myspace.com deflate deflate x msn.com x x x froogle.google.com x ebay.com cnn.com some some x aol.com x amazon.com Stylesheets Scripts HTML

Gzip Edge Cases ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Rule 5: Put stylesheets at the top ,[object Object],[object Object],[object Object],[object Object],[object Object]

Slowest is Fastest ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],right choice

Rule 6: Move scripts to the bottom ,[object Object],[object Object],[object Object],[object Object]

Rule 7: Avoid CSS expressions ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Rule 8: Make JS and CSS external ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Post-Onload Download ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Dynamic Inlining ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Rule 9: Reduce DNS lookups ,[object Object],[object Object],[object Object]

Rule 10: Minify JavaScript minify inline scripts, too no yes no no yes yes yes no no no Minify External? no www.youtube.com yes www.yahoo.com no www.wikipedia.org no www.myspace.com yes www.msn.com yes froogle.google.com no www.ebay.com no www.cnn.com no www.aol.com no www.amazon.com Minify Inline?

Minify vs. Obfuscate minify – it's safer http://crockford.com/javascript/jsmin http://dojotoolkit.org/docs/shrinksafe not much difference Dojo Savings JSMin Savings Original 21K (25%) 17K (21%) 85K Average 10K (29%) 8K (22%) 34K www.youtube.com 16K (38%) 14K (34%) 42K www.wikipedia.org 24K (28%) 23K (27%) 88K www.myspace.com 24K (25%) 19K (20%) 98K www.cnn.com 4K (10%) 4K (10%) 44K www.aol.com 48K (24%) 31K (15%) 204K www.amazon.com

Rule 11: Avoid redirects ,[object Object],[object Object],[object Object],[object Object],[object Object],http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html

Redirects no yes – secondary page yes – secondary page yes – secondary page yes – initial page no yes – secondary page yes – initial page yes – secondary page no Redirects www.youtube.com www.yahoo.com www.wikipedia.org www.myspace.com www.msn.com froogle.google.com www.ebay.com www.cnn.com www.aol.com www.amazon.com

Rule 12: Remove duplicate scripts ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Rule 13: Configure ETags ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

The Problem with ETags ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Rule 14: Make AJAX cacheable ,[object Object],[object Object]

AJAX Example: Yahoo! Mail Beta ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Case Study: ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],40-50%

Preloading 5 4 2 b be bec beck beckh beckha beckham ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],3 1

What about performance and Web 2.0 apps? ,[object Object],[object Object],[object Object],[object Object]

Case Study: Mail Mail Classic User Workflow mail.yahoo.com view inbox folder read messages (x3) compose message confirm send total time: Time 2.40 s 4.98 s 6.39 s 2.21 s 2.10 s 18.08 s Time 12.48 s 1.52 s 1.53 s 0.34 s 0s 15.87 s Delta +420% -70% -76% -85% -100% -12%

Evangelism ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Ten Top U.S Web Sites 139K 178K 106K 205K 221K 18K 275K 502K 182K 405K Page Weight 9.6 sec 5.9 sec 6.2 sec 7.8 sec 9.3 sec 1.7 sec 9.6 sec 22.4 sec 11.5 sec 15.9 sec Response Time D www.youtube.com A www.yahoo.com C www.wikipedia.org D www.myspace.com F www.msn.com A froogle.google.com C www.ebay.com F www.cnn.com F www.aol.com D www.amazon.com YSlow Grade

Takeaways ,[object Object],[object Object],[object Object],[object Object],[object Object]

Tenni Theurer [email_address]

CC Images Used ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Csdn Drdobbs Tenni Theurer Yahoo

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Csdn Drdobbs Tenni Theurer Yahoo

Ähnlich wie Csdn Drdobbs Tenni Theurer Yahoo (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Csdn Drdobbs Tenni Theurer Yahoo