Your SlideShare is downloading. ×
0
High performance Web Sites        腾讯技术大讲堂        richardchang
不知大家有没有看过这个ppt
以及这个架构图
Yahoo’s CasePerformance research and 14 rules
Exceptional Performancestarted in 2004quantify and improve the performance of  all Yahoo! products worldwidecenter of expe...
Scopeperformance breaks into two categories  – response time  – efficiencycurrent focus is response timeof web products
The Importance of Front-End       Performance
Back-end vs. Front-end                     Empty Cache   Full Cache     amazon.com              82%         86%     aol.co...
The Performance Golden Rule80-90% of the end-user response time is  spent on the front-end. Start there.• Greater potentia...
Performance  Research
http://yuiblog.com/blog/2006/11/28/performance-research-part-1/
80/20 Performance RuleVilfredo Pareto: 80% of consequences come from 20% of causesFocus on the 20% that affects 80% of the...
Empty vs. Full Cache    1                 2                 3 user requests    user requests    user re-requestswww.yahoo....
Empty vs. Full Cache       1                      2                                     3                       dns lookup...
Empty vs. Full Cache    1                 2                 3 user requests    user requests    user re-requestswww.yahoo....
Empty vs. Full Cache      1                                   2                  3 user requests                     user ...
Empty vs. Full Cache                          empty cache                             2.4 seconds                         ...
How much does this benefit our users? It depends on how many users have    components in cache. • What percentage of users...
http://yuiblog.com/blog/2007/01/04/performance-research-part-2/
Browser Cache Experiment         Add a new image to your page<img src="image/blank.gif" height="1" width="1"/>            ...
Browser Cache ExperimentRequests from the browser will have one of these response status codes:  200 – The browser does no...
Browser Cache ExperimentWhat percentage of users    # unique users with at leastview with an empty cache?        one 200 r...
Surprising Results users with                                                                                             ...
Experiment TakeawaysKeep in mind the empty cache user experience. It might be more prevalent than you think!Use different ...
http://yuiblog.com/blog/2007/03/01/performance-research-part-3
HTTP Quick Review         1      user requests     www.yahoo.comHTTP response header sent by the web server:HTTP/1.1 200 O...
HTTP Quick Review    1                                            2 user requests                                user requ...
HTTP Quick Review    1                                           3 user requests                               user reques...
HTTP Quick Review    1                                           4 user requests                               user reques...
HTTP Quick Review    1                                           5 user requests                               user reques...
Impact of Cookies on Response Time             Cookie Size        Time     Delta             0 bytes           78 ms      ...
.yahoo.com cookie sizes                           100%                                           1.55%                    ...
Analysis of Cookie Sizes across the Web                    Total Cookie Size          Amazon            60 bytes          ...
Experiment Takeawayseliminate unnecessary cookieskeep cookie sizes lowset cookies at appropriate domain level,  or hosting...
http://yuiblog.com/blog/2007/04/11/performance-research-part-4/
Parallel DownloadsTwo components   in parallel   per hostname                   GIF                                       ...
Parallel DownloadsTwo in parallel          html                    component                    component                 ...
Maximizing Parallel Downloadsresponse time  (seconds)                      aliases
Maximizing Parallel Downloads                1.40                               36 x 36 px (0.9 Kb)   116 x 61 px (3.4 Kb)...
Maximizing Parallel Downloads                1.40                           average       36 x 36 px (0.9 Kb)   116 x 61 p...
Maximizing Parallel Downloads                1.40                               average       36 x 36 px (0.9 Kb)   116 x ...
Experiment Takeawaysconsider the effects of CPU thrashingDNS lookup times vary across ISPs and geographic locationsdomain ...
14 Rules
How to optimize?• basic optimization rules• optimizing assets (images, scripts, and  styles)• optimizations specific to sc...
Basic Rules•Decrease Download Sizes•Make Fewer HTTP Requests – Combine scripts and style   sheets – Use image sprites – Av...
14 things to check1.    Make fewer HTTP requests2.    Use a CDN3.    Add an Expires header4.    Gzip components5.    Put C...
Rule 1: Make fewer HTTP requests image maps CSS sprites inline images combined scripts, combined stylesheets
Image mapsserver-side<a href="navbar.cgi"><img ismap src="imagemap.gif"></a>→ http://.../navbar.cgi?127,13client-side – pr...
CSS Sprites – Preferred                 #rss {                   background-image: url(sprite.png);                   back...
Combined Scripts, Combined Stylesheets                        Scripts   Stylesheetsamazon.com                   3         ...
Combined Scripts,      Combined Stylesheetscombining six scripts into one eliminates  five HTTP requestschallenges:  – dev...
Rule 2: Use a CDN        amazon.com            Akamai        aol.com               Akamai        cnn.com        ebay.com  ...
Rule 3: Add an Expires header  not just for images                     Images Stylesheets   Scripts     % Median Ageamazon...
Setting Expires header in ApacheExpiresActive OnExpiresByType application/x-javascript  "modification plus 2 years"Expires...
When modifing an asset?• Modify the asset name (automatically)!  – Append an epoch timestamp to the file    name, e.g. img...
Rule 4: Gzip componentsyou can affect users download times90%+ of browsers support compression
Gzip: not just for HTML                        HTML   Scripts   Stylesheets   amazon.com            x   aol.com           ...
Gzip ConfigurationApache 2.x: mod_deflate  AddOutputFilterByType DEFLATE text/html text/css    application/x-javascriptHTT...
Rule 5: Put CSS at the topstylesheets block rendering in IE  http://stevesouders.com/examples/css-bottom.phpsolution: put ...
Slowest is Fastest
Rule 6: Move scripts to the bottom scripts block parallel downloads across all   hostnames scripts block rendering of ever...
Rule 6: Move scripts to the bottom script defer attribute is not a solution   – blocks rendering and downloads in FF   – s...
Rule 7: Avoid CSS expressionsused to set CSS properties dynamically in IE   width: expression(     document.body.clientWid...
Rule 8: Make JS and CSS externalinline: HTML document is biggerexternal: more HTTP requests, but cachedvariables  – page v...
Post-Onload Downloadinline in front pagedownload external files after onload  window.onload = downloadComponents;  functio...
Example : Google• once the home page has finished  loading, there is a request to get a  sprite image, which is not actual...
Example : Yahoo• Conditional pre-loading -- waits for the  user to start typing in the search box.  Once youve begun typin...
Dynamic Inliningstart with post-onload downloadset cookie after components downloadedserver-side:  – if cookie, use extern...
Rule 9: Reduce DNS lookupstypically 20-120 msblock parallel downloadsOS and browser both have DNS caches
TTL (Time To Live)         www.amazon.com       1 minute         www.aol.com          1 minute         www.cnn.com        ...
Browser DNS CacheIE     – DnsCacheTimeout: 30 minutes     – KeepAliveTimeout: 1 minute     – ServerInfoTimeout: 2 minutesF...
Reducing DNS Lookupsfewer hostnames – 2-4 (what about forums  and blogs?)keep-alive
Rule 10: Minify JavaScript                           Minify     Minify                          External?   Inline?     ww...
Minify vs. Obfuscate                     Original   JSMin Savings   Dojo Savingswww.amazon.com          204K        31K (1...
Rule 11: Avoid redirects3xx status codes – mostly 301 and 302   HTTP/1.1 301 Moved Permanently   Location: http://stevesou...
Redirects                          Redirectswww.amazon.com                nowww.aol.com          yes – secondary pagewww.c...
Avoid Redirectsmissing trailing slash  – http://astrology.yahoo.com/astrology  – use Alias or DirectorySlashmod_rewriteCNA...
Rule 12: Remove duplicate scriptshurts performance  – extra HTTP requests (IE only)  – extra executionsatypical?  – 2 of 1...
Script Insertion Functions<?phpfunction insertScript($jsfile) {    if ( alreadyInserted($jsfile) ) { return; }     pushIns...
Rule 13: Turn off ETagsunique identifier returned in response  ETag: "c8897e-aee-4165acf0"  Last-Modified: Thu, 07 Oct 200...
The Problem with ETagsETag for a single entity is always different  across serversETag format  – Apache: inode-size-timest...
Rule 14: Make AJAX cacheable           and smallXHR, JSON, iframe, dynamic scripts can still be cached, minified, and gzip...
AJAX Example: Yahoo! Mail Betaaddress book XML request  → GET /yab/[...]&r=0.5289571053069156 HTTP/1.1    Host: us.xxx.mai...
Live Analysis
IBM Page Detailerpacket snifferWindows onlyIE, FF, any .exe   c:windowswd_WS2s.ini   Executable=(NETSCAPE.EXE),(NETSCP6.EX...
http://alphaworks.ibm.com/tech/pagedetailer
Fasterfoxmeasures load time of pagesalters config settings for faster loadingFirefox extensionfreehttp://fasterfox.mozdev....
LiveHTTPHeadersview HTTP headersFirefox extensionfreehttp://livehttpheaders.mozdev.org/
web development evolvedinspect and edit HTMLtweak and visualize CSSdebug and profile JavaScriptmonitor network activity (c...
http://getfirebug.com/
YSlowperformance lint toolgrades web pages for each ruleFirefox extensionYahoo! internal toolhttp://developer.yahoo.com/ys...
Conclusion
Takeawaysfocus on the front-endharvest the low-hanging fruityou do control user response timesLOFNO – be an advocate for y...
腾讯大讲堂09 如何建设高性能网站
腾讯大讲堂09 如何建设高性能网站
腾讯大讲堂09 如何建设高性能网站
腾讯大讲堂09 如何建设高性能网站
Upcoming SlideShare
Loading in...5
×

腾讯大讲堂09 如何建设高性能网站

367

Published on

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

No Downloads
Views
Total Views
367
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "腾讯大讲堂09 如何建设高性能网站"

  1. 1. High performance Web Sites 腾讯技术大讲堂 richardchang
  2. 2. 不知大家有没有看过这个ppt
  3. 3. 以及这个架构图
  4. 4. Yahoo’s CasePerformance research and 14 rules
  5. 5. Exceptional Performancestarted in 2004quantify and improve the performance of all Yahoo! products worldwidecenter of expertisebuild tools, analyze datagather, research, and evangelize best practices
  6. 6. Scopeperformance breaks into two categories – response time – efficiencycurrent focus is response timeof web products
  7. 7. The Importance of Front-End Performance
  8. 8. Back-end vs. Front-end Empty Cache Full Cache amazon.com 82% 86% aol.com 94% 86% cnn.com 81% 92% ebay.com 98% 92% google.com 86% 64% msn.com 97% 95% myspace.com 96% 86% wikipedia.org 80% 88% yahoo.com 95% 88% youtube.com 97% 95%percentage of time spent on the front-end
  9. 9. The Performance Golden Rule80-90% of the end-user response time is spent on the front-end. Start there.• Greater potential for improvement• Simpler• Proven to work
  10. 10. Performance Research
  11. 11. http://yuiblog.com/blog/2006/11/28/performance-research-part-1/
  12. 12. 80/20 Performance RuleVilfredo Pareto: 80% of consequences come from 20% of causesFocus on the 20% that affects 80% of the end-user response time.Start at the front-end.
  13. 13. Empty vs. Full Cache 1 2 3 user requests user requests user re-requestswww.yahoo.com other web pages www.yahoo.com
  14. 14. Empty vs. Full Cache 1 2 3 dns lookup html image image dns lookup script image image image image user requests user requests image image user re-requests www.yahoo.com other web pages image image www.yahoo.com script image image image image image image image image script dns lookup image image image image image dns lookup script script stylesheet imagewith an empty cache 0 0.5 1 1.5 2 2.5 3
  15. 15. Empty vs. Full Cache 1 2 3 user requests user requests user re-requestswww.yahoo.com other web pages www.yahoo.com
  16. 16. Empty vs. Full Cache 1 2 3 user requests user requests user re-requestswww.yahoo.com other web pages www.yahoo.com html image image 0 0.5 1 1.5 2 2.5 3 Expires header with a full cache
  17. 17. Empty vs. Full Cache empty cache 2.4 seconds full cache 0.9 seconds83% fewer bytes90% fewer HTTP requests
  18. 18. How much does this benefit our users? It depends on how many users have components in cache. • What percentage of users view a page with an empty cache*? *“Empty cache” means the browser has to request the components instead of pulling them from the browser disk cache. • What percentage of page views are done with an empty cache*?
  19. 19. http://yuiblog.com/blog/2007/01/04/performance-research-part-2/
  20. 20. Browser Cache Experiment Add a new image to your page<img src="image/blank.gif" height="1" width="1"/> }1 px with the following response headers: Expires: Thu, 15 Apr 2004 20:00:00 GMT Last-Modified: Wed, 28 Sep 2006 23:49:57 GMT
  21. 21. Browser Cache ExperimentRequests from the browser will have one of these response status 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.
  22. 22. Browser Cache ExperimentWhat percentage of users # unique users with at leastview with an empty cache? one 200 response total # unique usersWhat percentage of page total # of 200 responsesviews are done with an # of 200 + # of 304empty cache? responses }1 px
  23. 23. Surprising Results users with page views withempty cache 100.0% empty cache 90.0% unique users with empty cache40-60% ~20% 80.0% page views with empty cache 70.0% 60.0% percentage 50.0% 40.0% 30.0% 20.0% 10.0% 0.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
  24. 24. Experiment TakeawaysKeep in mind the empty cache user experience. It might be more prevalent than you think!Use different techniques to optimize full versus empty cache experience.
  25. 25. http://yuiblog.com/blog/2007/03/01/performance-research-part-3
  26. 26. HTTP Quick Review 1 user requests www.yahoo.comHTTP response header sent by the web server:HTTP/1.1 200 OKContent-Type: text/html; charset=utf-8Set-Cookie: C=abcdefghijklmnopqrstuvwxyz; domain=.yahoo.com
  27. 27. HTTP Quick Review 1 2 user requests user requestswww.yahoo.com 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;
  28. 28. HTTP Quick Review 1 3 user requests user requestswww.yahoo.com autos.yahoo.com HTTP request header sent by the browser: GET / HTTP/1.1 Host: autos.yahoo.com User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; … Cookie: C=abcdefghijklmnopqrstuvwxyz;
  29. 29. HTTP Quick Review 1 4 user requests user requestswww.yahoo.com mail.yahoo.com HTTP request header sent by the browser: GET / HTTP/1.1 Host: mail.yahoo.com User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; … Cookie: C=abcdefghijklmnopqrstuvwxyz;
  30. 30. HTTP Quick Review 1 5 user requests user requestswww.yahoo.com tech.yahoo.com HTTP request header sent by the browser: GET / HTTP/1.1 Host: tech.yahoo.com User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; … Cookie: C=abcdefghijklmnopqrstuvwxyz;
  31. 31. Impact of Cookies on Response Time Cookie Size Time Delta 0 bytes 78 ms 0 ms 500 bytes 79 ms +1 ms 1000 bytes 94 ms +16 ms 1500 bytes 109 ms +31 ms 2000 bytes 125 ms +47 ms 2500 bytes 141 ms +63 ms 3000 bytes 156 ms +78 ms keep sizes low 80 ms delay dialup users
  32. 32. .yahoo.com cookie sizes 100% 1.55% 17.79%percentage of page views over 1501 bytes 1001-1500 bytes 51.80% 501-1000 bytes 1-500 bytes 28.86% 0%
  33. 33. Analysis of Cookie Sizes across the Web Total Cookie Size Amazon 60 bytes Google 72 bytes Yahoo 122 bytes CNN 184 bytes YouTube 218 bytes MSN 268 bytes eBay 331 bytes MySpace 500 bytes
  34. 34. Experiment Takeawayseliminate unnecessary cookieskeep cookie sizes lowset cookies at appropriate domain level, or hosting assets on a new domainset Expires date appropriately – earlier date or none removes cookie sooner
  35. 35. http://yuiblog.com/blog/2007/04/11/performance-research-part-4/
  36. 36. Parallel DownloadsTwo components in parallel per hostname GIF GIFGIF GIF GIF GIF HTTP/1.1
  37. 37. Parallel DownloadsTwo in parallel html component component component componentFour in parallel component component component component component componentEight in parallel 0 0.2 0.4 0.6 0.8 1 1.2 1.4 html component component component component component component component component component component 0 0.2 0.4 0.6 0.8 1 1.2 1.4 html component component component component component component component component component component 0 0.2 0.4 0.6 0.8 1 1.2 1.4
  38. 38. Maximizing Parallel Downloadsresponse time (seconds) aliases
  39. 39. Maximizing Parallel Downloads 1.40 36 x 36 px (0.9 Kb) 116 x 61 px (3.4 Kb) 1.20 1.00 0.80response time (seconds) 0.60 0.40 0.20 0.00 1 2 4 5 10 aliases
  40. 40. Maximizing Parallel Downloads 1.40 average 36 x 36 px (0.9 Kb) 116 x 61 px (3.4 Kb) 1.20 1.00 0.80response time (seconds) 0.60 0.40 0.20 0.00 1 2 4 5 10 aliases
  41. 41. Maximizing Parallel Downloads 1.40 average 36 x 36 px (0.9 Kb) 116 x 61 px (3.4 Kb) 1.20 1.00 0.80response time (seconds) 0.60 0.40 0.20 0.00 1 2 4 5 10 rule of thumb: use at least two but no more than four aliases
  42. 42. Experiment Takeawaysconsider the effects of CPU thrashingDNS lookup times vary across ISPs and geographic locationsdomain names may not be cached
  43. 43. 14 Rules
  44. 44. How to optimize?• basic optimization rules• optimizing assets (images, scripts, and styles)• optimizations specific to scripts• optimizations specific to styles
  45. 45. Basic Rules•Decrease Download Sizes•Make Fewer HTTP Requests – Combine scripts and style sheets – Use image sprites – Avoid redirects – Avoid frames
  46. 46. 14 things to check1. Make fewer HTTP requests2. Use a CDN3. Add an Expires header4. Gzip components5. Put CSS at the top6. Move JS to the bottom7. Avoid CSS expressions8. Make JS and CSS external9. Reduce DNS lookups10. Minify JS11. Avoid redirects12. Remove duplicate scripts13. Turn off ETags14. Make AJAX cacheable and small
  47. 47. Rule 1: Make fewer HTTP requests image maps CSS sprites inline images combined scripts, combined stylesheets
  48. 48. Image mapsserver-side<a href="navbar.cgi"><img ismap src="imagemap.gif"></a>→ http://.../navbar.cgi?127,13client-side – preferred<img usemap="#map1" border=0 src="/images/imagemap.gif"><map name="map1"> <area shape="rect" coords="0,0,31,31" href="home.html" title="Home"> …</map>drawbacks: – must be contiguous – defining area coordinates – tedious, errorshttp://www.w3.org/TR/html401/struct/objects.html#h-13.6
  49. 49. CSS Sprites – Preferred #rss { background-image: url(sprite.png); background-position: -8px -40px; width: 16px; height: 16px; }size of combined image is lessCSS Sprites Generator - http://www.csssprites.com/http://alistapart.com/articles/sprites
  50. 50. Combined Scripts, Combined Stylesheets Scripts Stylesheetsamazon.com 3 1aol.com 18 1cnn.com 11 2ebay.com 7 2froogle.google.com 1 1msn.com 9 1myspace.com 2 2wikipedia.org 3 1yahoo.com 4 1youtube.com 7 3 Average 6.5 1.5
  51. 51. Combined Scripts, Combined Stylesheetscombining six scripts into one eliminates five HTTP requestschallenges: – develop as separate modules – number of possible combinations vs. loading more than needed – maximize browser cacheone solution: – dynamically combine and cache
  52. 52. Rule 2: Use a CDN amazon.com Akamai aol.com Akamai cnn.com ebay.com Akamai, Mirror Image google.com msn.com SAVVIS myspace.com Akamai, Limelight wikipedia.org yahoo.com Akamai youtube.comdistribute your static content before distributing your dynamic content
  53. 53. Rule 3: Add an Expires header not just for images Images Stylesheets Scripts % Median Ageamazon.com 0/62 0/1 0/3 0% 114 daysaol.com 23/43 1/1 6/18 48% 217 dayscnn.com 0/138 0/2 2/11 1% 227 daysebay.com 16/20 0/2 0/7 55% 140 daysfroogle.google.com 1/23 0/1 0/1 4% 454 daysmsn.com 32/35 1/1 3/9 80% 34 daysmyspace.com 0/18 0/2 0/2 0% 1 daywikipedia.org 6/8 1/1 2/3 75% 1 dayyahoo.com 23/23 1/1 4/4 100% n/ayoutube.com 0/32 0/3 0/7 0% 26 days
  54. 54. Setting Expires header in ApacheExpiresActive OnExpiresByType application/x-javascript "modification plus 2 years"ExpiresByType text/css "modification plus 5 years"
  55. 55. When modifing an asset?• Modify the asset name (automatically)! – Append an epoch timestamp to the file name, e.g. img_1185403733.png. – Use the version number from your source control system (cvs or svn for example), e.g. img_1.1.png. – Manually increment a number in the file name (e.g. when you see a file named img1.png, simply save the modified image as img2.png).
  56. 56. Rule 4: Gzip componentsyou can affect users download times90%+ of browsers support compression
  57. 57. Gzip: not just for HTML HTML Scripts Stylesheets amazon.com x aol.com x some some cnn.com ebay.com x froogle.google.com x x x msn.com x deflate deflate myspace.com x x x wikipedia.org x x x yahoo.com x x x youtube.com x some somegzip scripts, stylesheets, XML, JSON (not images, PDF)
  58. 58. Gzip ConfigurationApache 2.x: mod_deflate AddOutputFilterByType DEFLATE text/html text/css application/x-javascriptHTTP request Accept-Encoding: gzip, deflateHTTP response Content-Encoding: gzip Vary: Accept-Encoding needed for proxies
  59. 59. Rule 5: Put CSS at the topstylesheets block rendering in IE http://stevesouders.com/examples/css-bottom.phpsolution: put stylesheets in HEAD (per spec)avoids Flash of Unstyled Contentuse LINK (not @import)
  60. 60. Slowest is Fastest
  61. 61. Rule 6: Move scripts to the bottom scripts block parallel downloads across all hostnames scripts block rendering of everything below them in the page IE and FF http://stevesouders.com/examples/js-middle.php
  62. 62. Rule 6: Move scripts to the bottom script defer attribute is not a solution – blocks rendering and downloads in FF – slight blocking in IE solution: move them as low in the page as possible
  63. 63. Rule 7: Avoid CSS expressionsused to set CSS properties dynamically in IE width: expression( document.body.clientWidth < 600 ? “600px” : “auto” );problem: expressions execute many times – mouse move, key press, resize, scroll, etc.http://stevesouders.com/examples/expression-counter.php
  64. 64. Rule 8: Make JS and CSS externalinline: HTML document is biggerexternal: more HTTP requests, but cachedvariables – page views per user (per session) – empty vs. full cache stats – component re-useexternal is typically better – home pages may be an exception
  65. 65. Post-Onload Downloadinline in front pagedownload 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
  66. 66. Example : Google• once the home page has finished loading, there is a request to get a sprite image, which is not actually needed until search results page loads
  67. 67. Example : Yahoo• Conditional pre-loading -- waits for the user to start typing in the search box. Once youve begun typing, its almost guaranteed that youll submit a search query.
  68. 68. Dynamic Inliningstart with post-onload downloadset cookie after components downloadedserver-side: – if cookie, use external – else, do inline with post-onload downloadcookie expiration date is keyspeeds up all pages
  69. 69. Rule 9: Reduce DNS lookupstypically 20-120 msblock parallel downloadsOS and browser both have DNS caches
  70. 70. TTL (Time To Live) www.amazon.com 1 minute www.aol.com 1 minute www.cnn.com 10 minutes www.ebay.com 1 hour www.google.com 5 minutes www.msn.com 5 minutes www.myspace.com 1 hour www.wikipedia.org 1 hour www.yahoo.com 1 minute www.youtube.com 5 minutesTTL – how long record can be cachedbrowser settings override TTL
  71. 71. Browser DNS CacheIE – DnsCacheTimeout: 30 minutes – KeepAliveTimeout: 1 minute – ServerInfoTimeout: 2 minutesFirefox – network.dnsCacheExpiration: 1 minute – network.dnsCacheEntries: 20 – network.http.keep-alive.timeout: 5 minutes – Fasterfox: 1 hour, 512 entries, 30 seconds
  72. 72. Reducing DNS Lookupsfewer hostnames – 2-4 (what about forums and blogs?)keep-alive
  73. 73. Rule 10: Minify JavaScript Minify Minify External? Inline? www.amazon.com no no www.aol.com no no www.cnn.com no no www.ebay.com yes no froogle.google.com yes yes www.msn.com yes yes www.myspace.com no no www.wikipedia.org no no www.yahoo.com yes yes www.youtube.com no nominify inline scripts, too
  74. 74. Minify vs. Obfuscate Original JSMin Savings Dojo Savingswww.amazon.com 204K 31K (15%) 48K (24%)www.aol.com 44K 4K (10%) 4K (10%)www.cnn.com 98K 19K (20%) 24K (25%)www.myspace.com 88K 23K (27%) 24K (28%)www.wikipedia.org 42K 14K (34%) 16K (38%)www.youtube.com 34K 8K (22%) 10K (29%) Average 85K 17K (21%) 21K (25%)minify – its saferhttp://crockford.com/javascript/jsminhttp://dojotoolkit.org/docs/shrinksafe
  75. 75. Rule 11: Avoid redirects3xx status codes – mostly 301 and 302 HTTP/1.1 301 Moved Permanently Location: http://stevesouders.com/newuriadd Expires headers to cache redirectsworst form of blockinghttp://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html
  76. 76. Redirects Redirectswww.amazon.com nowww.aol.com yes – secondary pagewww.cnn.com yes – initial pagewww.ebay.com yes – secondary pagefroogle.google.com nowww.msn.com yes – initial pagewww.myspace.com yes – secondary pagewww.wikipedia.org yes – secondary pagewww.yahoo.com yes – secondary pagewww.youtube.com no
  77. 77. Avoid Redirectsmissing trailing slash – http://astrology.yahoo.com/astrology – use Alias or DirectorySlashmod_rewriteCNAMEslog referer – track internal linksoutbound links – harder – beacons – beware of race condition – XHR – bail at readyState 2
  78. 78. Rule 12: Remove duplicate scriptshurts performance – extra HTTP requests (IE only) – extra executionsatypical? – 2 of 10 top sites contain duplicate scriptsteam size, # of scripts
  79. 79. Script Insertion Functions<?phpfunction insertScript($jsfile) { if ( alreadyInserted($jsfile) ) { return; } pushInserted($jsfile); if ( hasDependencies($jsfile) ) { $dependencies = getDependencies($jsfile); for ( $i = 0; $i < count($dependencies); $i++ ) { insertScript($dependencies[$i]); } } echo <script type="text/javascript" src=" . getVersion($jsfile) . "></script>";}?>
  80. 80. Rule 13: Turn off ETagsunique identifier returned in response ETag: "c8897e-aee-4165acf0" Last-Modified: Thu, 07 Oct 2004 20:54:08 GMTused in conditional GET requests If-None-Match: "c8897e-aee-4165acf0" If-Modified-Since: Thu, 07 Oct 2004 20:54:08 GMTif ETag doesnt match, cant send 304
  81. 81. The Problem with ETagsETag for a single entity is always different across serversETag format – Apache: inode-size-timestamp – IIS: Filetimestamp:ChangeNumberSites with >1 server return too few 304s – (n-1)/nRemove them – Apache: FileETag none – IIS: http://support.microsoft.com/kb/922703/
  82. 82. Rule 14: Make AJAX cacheable and smallXHR, JSON, iframe, dynamic scripts can still be cached, minified, and gzippeda personalized response should still be cacheable by that person
  83. 83. AJAX Example: Yahoo! Mail Betaaddress 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: gzipaddress book changes infrequently – cache it; add last-modified-time in URL
  84. 84. Live Analysis
  85. 85. IBM Page Detailerpacket snifferWindows onlyIE, FF, any .exe c:windowswd_WS2s.ini Executable=(NETSCAPE.EXE),(NETSCP6.EXE),(firefox.exe)free trial, $300 licensehttp://alphaworks.ibm.com/tech/pagedetailer
  86. 86. http://alphaworks.ibm.com/tech/pagedetailer
  87. 87. Fasterfoxmeasures load time of pagesalters config settings for faster loadingFirefox extensionfreehttp://fasterfox.mozdev.org/
  88. 88. LiveHTTPHeadersview HTTP headersFirefox extensionfreehttp://livehttpheaders.mozdev.org/
  89. 89. web development evolvedinspect and edit HTMLtweak and visualize CSSdebug and profile JavaScriptmonitor network activity (caveat)Firefox extensionfreehttp://getfirebug.com/
  90. 90. http://getfirebug.com/
  91. 91. YSlowperformance lint toolgrades web pages for each ruleFirefox extensionYahoo! internal toolhttp://developer.yahoo.com/yslow/
  92. 92. Conclusion
  93. 93. Takeawaysfocus on the front-endharvest the low-hanging fruityou do control user response timesLOFNO – be an advocate for your users
  1. A particular slide catching your eye?

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

×