High Performance Web Sites


High Performance Web Sites 14 rules for faster pages Nate Koechley natek@yahoo-inc.com nate.koechley.com/blog developer.yahoo.com/yui Important Note: During my session at the @media 2007 conference I presented “12 Rules.” In the original presentation by Steve Souders and Tenni Theurer, and in Steve’s forthcoming O’Reilly book, there are 14 Rules. To keep things consistent I’ve added the two missing rules back into this presentation: #12: Remove duplicate scripts #14: Make Ajax cachable and small By reinstating these two extra rules the numbering now matches what you’ll find in the book. Conveniently, #12 (from my in-person presentation) is the only number impacted by these additions. Thanks! Britpack Diamond Geezer Award 1. Explored memory footprint & CPU impact • Event & Object management 2. Introduced event delegation 3. Shared optimal file placement •CSS at top(in ) • JS at bottom (before ) 1. Share results of our research into what impacts page performance. 2. Offer 12 specific rules to follow that will make your sites immediately and markedly faster. —PPK on quirksmode.org: “A case study in knowledge sharing…Yahoo is firmly committed to openness and to discussing stuff with the international technical community.” Why talk about performance? Steve Souders Architect souders@yahoo-inc.com Tenni Theurer Director tenni@yahoo-inc.com Yahoo! Exceptional Performance Team Rough Cuts: Now Amazon Pre-order: Now Hardcopy: Sept 2007 Also, 3 hour workshop at the upcoming: http://www.oreilly.com/catalog/9780596514211/ Two Performance Flavors: Response Time & System Efficiency Our focus is Our focus is on on response response timetime of of web web productsproducts Do we care? Does it matter? How much? Is it worth it? The Importance of Front-End Performance Back-end = 5% Front-end = 95% Even here, front-end = 88% Back-end vs. Front-end 95%97%youtube.com 88%95%yahoo.com 88%80%wikipedia.org 86%96%myspace.com 95%97%msn.com 64%86%google.com 92%98%ebay.com 92%81%cnn.com 86%94%aol.com 86%82%amazon.com Full CacheEmpty Cache Until now our optimization efforts have targeted the tip of the iceberg. Foundational Research: Perception 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 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 It’s in the eye of the beholder 1. Perception and usability are important performance metrics. 2. More relevant than actual unload-to- onload time. 3. Definition of "user onload" is undefined or varies from one web page to the next. “80% of consequences come from 20% of causes” —Vilfredo Pareto http://yuiblog.com/blog/2006/11/28/performance-research-part-1/ www.yuiblog.com Cache 11 user requests www.yahoo.com 22 user requests other web pages 33 user re-requests www.yahoo.com Empty vs. Full Cache 11 user requests www.yahoo.com 22 user requests other web pages 33 user re-requests www.yahoo.com Empty vs. Full Cache 0 0.5 1 1.5 2 2.5 3 image stylesheet script script dns lookup image image image image image dns lookup script image image image image image image image image script image image image image image image image image script dns lookup image image html dns lookup with an empty cache 11 user requests www.yahoo.com 22 user requests other web pages 33 user re-requests www.yahoo.com Empty vs. Full Cache Empty vs. Full Cache 0 0.5 1 1.5 2 2.5 3 image image html Expires header 11 user requests www.yahoo.com 22 user requests other web pages 33 user re-requests www.yahoo.com with a full cache Empty vs. Full Cache empty cache 2.4 seconds full cache 0.9 seconds 83% fewer bytes 90% fewer HTTP requests (sadly, the cache doesn’t work as well as we wish it did.) How much does caching benefit our users? Q1: What % of users view a page with an empty cache? Q2: What % of page views are with an empty cache? Add a new image to your page with the following response headers: Expires: Thu, 15 Apr 2004 20:00:00 GMT Last-Modified: Wed, 28 Sep 2006 23:49:57 GMT }1 px Browser Cache Experiment Browser Cache Experiment Two possible response codes: 200 – The browser does not have the image in its cache. 304 – The browser has the image in its cache, but needs to verify the last modified date. Browser Cache Experiment total # of 200 responses # of 200 + # of 304 responses Q2: What % of page views are with an empty cache? # unique users with at least one 200 response total # unique users Q1: What % of users view with an empty cache? }1 px 0.0% 10.0% 20.0% 30.0% 40.0% 50.0% 60.0% 70.0% 80.0% 90.0% 100.0% 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 day of experiment percentage unique users with empty cache page views with empty cache Surprising Results page views with empty cache 40-60% ~20% users with empty cache Experiment Takeaways 1. The empty cache user experience is more prevalent than you think! 2. Therefore, optimize for both full cache and empty cache experience. http://yuiblog.com/blog/2007/01/04/performance-research-part-2/ Cookies 11 user requests www.yahoo.com Set Scope Correctly HTTP response header sent by the web server: HTTP/1.1 200 OK Content-Type: text/html; charset=utf-8 Set-Cookie: C=abcdefghijklmnopqrstuvwxyz; domain=.yahoo.com 11 user requests www.yahoo.com Because broad scope adds up 22 user requests finance.yahoo.com HTTP request header sent by the browser: GET / HTTP/1.1 Host: finance.yahoo.com User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; … Cookie: C=abcdefghijklmnopqrstuvwxyz; Impact on Response Time 80 ms delay dialup users +78 ms156 ms3000 bytes +63 ms141 ms2500 bytes +47 ms125 ms2000 bytes +31 ms109 ms1500 bytes +16 ms94 ms1000 bytes +1 ms79 ms500 bytes 0 ms78 ms0 bytes DeltaTimeCookie Size keep sizes low Cookie Sizes across the Web 500 bytesMySpace 331 byteseBay 268 bytesMSN 218 bytesYouTube 184 bytesCNN 122 bytesYahoo 72 bytesGoogle 60 bytesAmazon Total Cookie Size Experiment Takeaways 1. eliminate unnecessary cookies 2. keep cookie sizes low 3. set cookies at the appropriate domain (or sub-domain) level 4. set Expires date appropriately http://yuiblog.com/blog/2007/03/01/performance-research-part-3 Parallel Downloads Parallel Downloads Two components in parallel per hostname GIF GIF GIF GIF GIF GIF per HTTP/1.1 Parallel Downloads 0 0.2 0.4 0.6 0.8 1 1.2 1.4 component component component component component component component component component component html 0 0.2 0.4 0.6 0.8 1 1.2 1.4 component component component component component component component component component component html Two in parallel Four in parallel Eight in parallel 0 0.2 0.4 0.6 0.8 1 1.2 1.4 component component component component component component component component component component html Maximizing Parallel Downloads response time (seconds) aliases Maximizing Parallel Downloads response time (seconds) aliases 0.00 0.20 0.40 0.60 0.80 1.00 1.20 1.40 1 2 4 5 10 36 x 36 px (0.9 Kb) 116 x 61 px (3.4 Kb) Maximizing Parallel Downloads response time (seconds) aliases 0.00 0.20 0.40 0.60 0.80 1.00 1.20 1.40 1 2 4 5 10 average 36 x 36 px (0.9 Kb) 116 x 61 px (3.4 Kb) Maximizing Parallel Downloads response time (seconds) rule of thumb: use at least two but no more than four aliases 0.00 0.20 0.40 0.60 0.80 1.00 1.20 1.40 1 2 4 5 10 average 36 x 36 px (0.9 Kb) 116 x 61 px (3.4 Kb) Experiment Takeaways 1. consider the effects of CPU thrashing 2. DNS lookup times vary across ISPs and geographic locations 3. domain names may not be cached http://yuiblog.com/blog/2007/04/11/performance-research-part-4/ Summary What the 80/20 Rule Tells Us about Reducing HTTP Requests http://yuiblog.com/blog/2006/11/28/performance-research-part-1/ Browser Cache Usage – Exposed! http://yuiblog.com/blog/2007/01/04/performance-research-part-2/ When the Cookie Crumbles http://yuiblog.com/blog/2007/03/01/performance-research-part-3/ Maximizing Parallel Downloads in the Carpool Lane http://yuiblog.com/blog/2007/04/11/performance-research-part-4/ 14 Rules (presented as “one dozen rules”) 1. Make fewer HTTP requests 2. Use a CDN 3. Add an Expires header 4. Gzip components 5. Put CSS at the top 6. Move JS to the bottom 7. Avoid CSS expressions 8. Make JS & CSS external 9. Reduce DNS lookups 10. Minify JS 11. Avoid redirects 12. Remove duplicate scripts 13. Turn off ETags 14. Make Ajax cachable and small Rule 1: Make fewer HTTP requests CSS sprites Combined / concatenated JS and CSS files image maps inline (data) images CSS Sprites size of combined image is less http://alistapart.com/articles/sprites Combined Scripts, Combined Stylesheets 37youtube.com 1.56.5Average 14yahoo.com 13wikipedia.org 22myspace.com 19msn.com 11froogle.google.com 27ebay.com 211cnn.com 118aol.com 13amazon.com Stylesheet s Scripts Inline (data:) Images data: URL scheme data:[][;base64], ”Red not supported in IE avoid increasing size of HTML pages: put inline images in cached stylesheets http://tools.ietf.org/html/rfc2397 The end. Rule 2: Use a CDN distribute your static content before distributing your dynamic content youtube.com Akamaiyahoo.com wikipedia.org Akamai, Limelightmyspace.com SAVVISmsn.com google.com Akamai, Mirror Imageebay.com cnn.com Akamaiaol.com Akamaiamazon.com Rule 3: Add an Expires header not just for images 26 days0%0/70/30/32youtube.com 100% 75% 0% 80% 4% 55% 1% 48% 0% % n/a4/41/123/23yahoo.com 1 day2/31/16/8wikipedia.org 1 day0/20/20/18myspace.com 34 days3/91/132/35msn.com 454 days0/10/11/23froogle.google.com 140 days0/70/216/20ebay.com 227 days2/110/20/138cnn.com 217 days6/181/123/43aol.com 114 days0/30/10/62amazon.com Median AgeScriptsStylesheetsImages Rule 4: Gzip components • you can affect users' download times • 90%+ of browsers support compression Gzip compresses more Gzip supported in more browsers Gzip vs. Deflate DeflateGzip 67%4.7K73%3.7K14.1KStylesheet 52%0.5K56%0.4K1.0KStylesheet 58%16.6K64%14.5K39.7KScript 66%1.1K67%1.1K3.3KScript SavingsSizeSavingsSizeSize Gzip: not just for HTML somesomexyoutube.com xxxyahoo.com xxxwikipedia.org xxxmyspace.com deflatedeflatexmsn.com xxxfroogle.google.com xebay.com cnn.com somesomexaol.com xamazon.com StylesheetsScriptsHTML gzip scripts, stylesheets, XML, JSON (not images, PDF) Free YUI Hosting includes: • Aggregated files • With Expires headers • On a CDN • Gzipped Rule 5: Put CSS at the top stylesheets block rendering in IE http://stevesouders.com/examples/css-bottom.php solution: put stylesheets in HEAD (per spec) avoids Flash of Unstyled Content use (not @import) Slowest is actually the Fastest Rule 6: Move scripts to the bottom scripts block rendering of everything below them in the page scripts block parallel downloads across all hostnames IE and FF http://stevesouders.com/examples/js-middle.php What about defer? script defer attribute is not a solution – blocks rendering and downloads in FF – slight blocking in IE Rule 7: Avoid CSS expressions Can be used to set CSS properties dynamically in IE width: expression( document.body.clientWidth < 600 ? “600px” : “auto” ); But problematic because expressions execute many times – mouse move, key press, resize, scroll, etc. http://stevesouders.com/examples/expression-counter.php Rule 8: Make JS and CSS external Inline: bigger HTML but no HTTP request External: cachable but extra HTTP Variables: – page views per user (per session) – empty vs. full cache stats – component re-use External is typically better – home pages may be an exception due to cache behavior of browser’s startpage. Post-Onload Download inline in front page download external files after onload window.onload = downloadComponents; function downloadComponents() { var elem = document.createElement("script"); elem.src = "http://.../file1.js"; document.body.appendChild(elem); ... } speeds up secondary pages Dynamic Inlining start with post-onload download set cookie after components downloaded server-side: – if cookie, use external – else, do inline with post-onload download cookie expiration date is key speeds up all pages Rule 9: Reduce DNS lookups typically 20-120 ms block parallel downloads OS and browser both have DNS caches Best practice: Max 2-4 hosts Use keep-alive TTL (Time To Live) 5 minuteswww.youtube.com 1 minutewww.yahoo.com 1 hourwww.wikipedia.org 1 hourwww.myspace.com 5 minuteswww.msn.com 5 minuteswww.google.com 1 hourwww.ebay.com 10 minuteswww.cnn.com 1 minutewww.aol.com 1 minutewww.amazon.com TTL – how long record can be cached Browser settings override TTL Tweaking Browser’s DNS Cache IE – DnsCacheTimeout: 30 minutes – KeepAliveTimeout: 1 minute – ServerInfoTimeout: 2 minutes Firefox – network.dnsCacheExpiration: 1 minute – network.dnsCacheEntries: 20 – network.http.keep-alive.timeout: 5 minutes – Fasterfox Extension: • 1 hour, 512 entries, 30 seconds Rule 10: Minify JavaScript no yes no no yes yes yes no no no Minify External? nowww.youtube.com yeswww.yahoo.com nowww.wikipedia.org nowww.myspace.com yeswww.msn.com yesfroogle.google.com nowww.ebay.com nowww.cnn.com nowww.aol.com nowww.amazon.com Minify Inline? minify inline scripts, too Minify vs. Obfuscate Dojo SavingsJSMin SavingsOriginal 21K (25%)17K (21%)85KAverage 10K (29%)8K (22%)34Kwww.youtube.com 16K (38%)14K (34%)42Kwww.wikipedia.org 24K (28%)23K (27%)88Kwww.myspace.com 24K (25%)19K (20%)98Kwww.cnn.com 4K (10%)4K (10%)44Kwww.aol.com 48K (24%)31K (15%)204Kwww.amazon.com minify – it's safer http://crockford.com/javascript/jsmin http://dojotoolkit.org/docs/shrinksafe Rule 11: Avoid redirects 3xx status codes – mostly 301 and 302 HTTP/1.1 301 Moved Permanently Location: http://stevesouders.com/newuri add Expires headers so redirect headers are cached Redirects are worst form of blocking 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 (this rule was not presented live) hurts performance – extra HTTP requests (IE only) – extra executions atypical? – 2 of 10 top sites contain duplicate scripts team size, # of scripts Script Insertion Functions "; } ?> Rule 13: Turn off ETags (this was #12 when presented live) unique identifier returned in response ETag: "c8897e-aee-4165acf0" Last-Modified: Thu, 07 Oct 2004 20:54:08 GMT used in conditional GET requests If-None-Match: "c8897e-aee-4165acf0" If-Modified-Since: Thu, 07 Oct 2004 20:54:08 GMT Breaks caching: if ETag doesn't match, can't send 304 Rule 14: Make AJAX cacheable and small (this rule was not presented live) XHR, JSON, iframe, dynamic scripts can still be cached, minified, and gzipped a personalized response should still be cacheable by that person AJAX Example: Yahoo! Mail Beta address book XML request → GET /yab/[...]&r=0.5289571053069156 HTTP/1.1 Host: us.xxx.mail.yahoo.com ← HTTP/1.1 200 OK Date: Thu, 12 Apr 2007 19:39:09 GMT Cache-Control: private,max-age=0 Last-Modified: Sat, 31 Mar 2007 01:17:17 GMT Content-Type: text/xml; charset=utf-8 Content-Encoding: gzip address book changes infrequently – cache it; add last-modified-time in URL Case Studies Case Study: 1. moved JS to onload 2. removed redirects 3. used image sprites 4. hosted JS on CDN 5. combined JS files Case Study: 1/25/06 3/25/07 40-50%40-50% What about performance and Web 2.0 apps? client-side CPU is more of an issue user expectations are higher start off on the right foot: care! measuring is different select a message in the list view message in preview pane open messages in their own tabs Case Study: calendar instant messaging Case Study: instant messaging Does it meet user expectations? Case Study: 15.87 s 0 s 0.34 s 1.53 s 1.52 s 12.48 s Time 18.08 stotal time: 2.10 sconfirm send 2.21 scompose message 6.39 sread message (x3) 4.98 s view inbox folder 2.40 smail.yahoo.com TimeWork flow Case Study: Mail BetaMail BetaMail ClassicMail Classic 0.51 s x 3 =0.51 s x 3 =2.13 s x 3 =2.13 s x 3 = 1.66 s x 3 =1.66 s x 3 = -12% -100% -85% -76% -70% +420% Delta 15.87 s 0 s 0.34 s 1.53 s 1.52 s 12.48 s Time 18.08 stotal time: 2.10 sconfirm send 2.21 scompose message 6.39 sread message (x3) 4.98 s view inbox folder 2.40 smail.yahoo.com Time Case Study: Mail BetaMail BetaMail ClassicMail Classic -12% -100% -85% -76% -70% +420% Delta 15.87 s 0 s 0.34 s 1.53 s 1.52 s 12.48 s Time 18.08 stotal time: 2.10 sconfirm send 2.21 scompose message 6.39 sread message (x3) 4.98 s view inbox folder 2.40 smail.yahoo.com Time Case Study: Mail BetaMail BetaMail ClassicMail Classic -12% -100% -85% -76% -70% +420% Delta 15.87 s 0 s 0.34 s 1.53 s 1.52 s 12.48 s Time 18.08 stotal time: 2.10 sconfirm send 2.21 scompose message 6.39 sread message (x3) 4.98 s view inbox folder 2.40 smail.yahoo.com Time Case Study: Mail BetaMail BetaMail ClassicMail Classic Live Analysis IBM Page Detailer packet sniffer Windows only IE, FF, any .exe c:\windows\wd_WS2s.ini Executable=(NETSCAPE.EXE),(NETSCP6.EXE),(firef ox.exe) free trial, $300 license http://alphaworks.ibm.com/tech/pagedetailer http://alphaworks.ibm.com/tech/pagedetailer Fasterfox measures load time of pages alters config settings for faster loading Firefox extension free http://fasterfox.mozdev.org/ LiveHTTPHeaders view HTTP headers Firefox extension free http://livehttpheaders.mozdev.org/ Firebug web development evolved inspect and edit HTML tweak and visualize CSS debug and profile JavaScript monitor network activity (caveat) Firefox extension free http://getfirebug.com/ http://getfirebug.com/ YSlow performance lint tool grades web pages for each rule Firefox extension Yahoo! internal tool Conclusion Takeaways focus on the front-end harvest the low-hanging fruit reduce HTTP requests enable caching you do control user response times LOFNO – be an advocate for your users 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/ nate@koechley.com nate.koechley.com/blog nate.koechley.com/talks/2007/atmedia-london Thanks again to Steve Souders & Tenni Theurer
还剩114页未读

继续阅读

下载pdf到电脑,查找使用更方便

pdf的实际排版效果,会与网站的显示效果略有不同!!

需要 6 金币 [ 分享pdf获得金币 ] 0 人已下载

下载pdf

pdf贡献者

maczhou

贡献于2013-05-27

下载需要 6 金币 [金币充值 ]
亲,您也可以通过 分享原创pdf 来获得金币奖励!
下载pdf