Highload++ 2012 Proactive WPO

1,102 views
1,006 views

Published on

Slides from my talk at Highload++ 2012 in Moscow, Russia. This mainly covers the use os YSlow as part of Continuous Integration to prevent regression to end user which is a form of proactive web performance optimization.

Published in: Technology
1 Comment
5 Likes
Statistics
Notes
No Downloads
Views
Total views
1,102
On SlideShare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
12
Comments
1
Likes
5
Embeds 0
No embeds

No notes for slide

Highload++ 2012 Proactive WPO

  1. 1. Proactive WPO @marcelduran
  2. 2. about:me
  3. 3. Im not here
  4. 4. Im from here on
  5. 5. V is for Vigilante http://usa-moscow.blogspot.com/2010/09/more-hot-water.html
  6. 6. Performance Radar http://www.flickr.com/photos/benfrantzdale/1056282822/
  7. 7. “if you can’t measure it, you can’t improve it” — Lord Kelvin
  8. 8. worst case: no instruments http://www.flickr.com/photos/timothyhackworth/753783003/
  9. 9. test build reactive deployreview users
  10. 10. better case: RUM http://www.flickr.com/photos/pj/6116201547/
  11. 11. m/logno github.co rma l/b oo m er an gReal User Measurements http://lognormal.com/features/
  12. 12. test build reactive deploymonitor users
  13. 13. YSlow manually
  14. 14. YSlow automation http://www.flickr.com/photos/snazzyguy/3381047684/
  15. 15. +
  16. 16. +much better: RUM + YSlow (CI) http://donq.com/recipes/rum-sour/
  17. 17. test build proactive wpo deploymonitor users
  18. 18. +183k users (formerly +210k) +3.3mi downloads Top 25 2bi add-ons downloadedjul/07
  19. 19. ~160k users (formerly 145k)jul/07 mar/11
  20. 20. jul/07 mar/11 jun/11
  21. 21. ~80k usersjul/07 mar/11 jun/11 aug/11
  22. 22. jul/07 mar/11 jun/11 aug/11oct/11
  23. 23. jul/07 mar/11 jun/11 aug/11oct/11 dec/11
  24. 24. first 24 hours 437 37 so far 889jul/07 mar/11 jun/11 aug/11 76oct/11 dec/11 feb/12
  25. 25. th5 anniversary http://www.flickr.com/photos/spool32/5045502202
  26. 26. jul/07 mar/11 jun/11 aug/11oct/11 dec/11 feb/12 apr/12
  27. 27. jul/07 mar/11 jun/11 aug/11oct/11 dec/11 feb/12 apr/12 jun/12
  28. 28. YSlow Command Line
  29. 29. $ npm install yslow -g
  30. 30. $ yslow --helpUsage: yslow [options] [file ...]Options: -h, --help output usage information -V, --version output the version number -i, --info <info> specify the information to display/log (basic|grade|stats|comps|all) [basic] -f, --format <format> specify the output results format (json|xml|plain) [json] -r, --ruleset <ruleset> specify the YSlow performance ruleset to be used (ydefault|yslow1|yblog) [ydefault] -b, --beacon <url> specify an URL to log the results -d, --dict include dictionary of results fields -v, --verbose output beacon response informationExamples: yslow file.har yslow -i grade -f xml -b http://server.com/beacon file1.har file2.har yslow -info all --format plain /tmp/*.har yslow -i basic --rulseset yslow1 -d < file.har curl example.com/file.har | yslow -i grade -b http://server.com/beacon -v
  31. 31. { "log": { "version": "1.1", "pages": [ { "startedDateTime": "2012-08-16T18:27:29.000+00:00", "id": "page_1_0", "pageTimings": { "onLoad": 13701, ... HAR file
  32. 32. $ yslow file.har$ yslow file1.har file2.har file3.har$ yslow my-har-files/*.har$ yslow < file.har$ curl http://foo.com/file.har | yslow
  33. 33. -f, --format <format> (json|xml|plain)
  34. 34. $ yslow foo.com.har{ w: 98725, o: 89, u: foo.com, r: 9, i: ydefault, lt: 981 }$ yslow --format xml foo.com.har<?xml version="1.0" encoding="UTF-8"?><results> <w>98725</w> <o>89</o> <u>http://www.foo.com/</u> <r>9</r> <i>ydefault</i> <lt>981</lt></results>$ yslow --format plain foo.com.harsize: 96.4K (98725 bytes)overall score: B (89)url: http://www.foo.com/# of requests: 9ruleset: ydefaultpage load time: 981
  35. 35. -i, --info <info> (basic|grade|stats|comps|all)
  36. 36. $ yslow foo.com.har{ w: 98725, o: 89, u: foo.com, r: 9, i: ydefault, lt: 981 }$ yslow --info grade foo.com.har{ w: 98725, o: 89, u: foo.com, r: 9, i: ydefault, lt: 981, g: { ynumreq: { score: 92, components: [] }, ycdn: { score: 80, components: [a.com, b.com] }, ... yfavicon: { score: 100, components: [] } }}$ yslow --info stats foo.com.har{ w: 98725, o: 89, u: foo.com, r: 9, i: ydefault, lt: 981, stats: { doc: { r: 1, w: 18419 }, css: { r: 2, w: 20951 }, image: { r: 3, w: 29553 }, js: { r: 2, w: 10852 }, cssimage: { r: 1, w: 18950 } }}
  37. 37. $ yslow --info comps foo.com.har{ w: 98725, o: 89, u: foo.com, r: 9, i: ydefault, lt: 981, comps: [ {type:doc, url:foo.com, size:1841, resp:41, gzip:613}, {type:css, url:bar.css, size:3062, resp:98, gzip:989}, ... {type:js, url:baz.js, size:2445, resp:86, gzip:834} ]}$ yslow --info all foo.com.har{ w: 98725, o: 89, u: foo.com, r: 9, i: ydefault, lt: 981, g: { ynumreq: { score: 92, components: [] }, ... } stats: { doc: { r: 1, w: 18419 }, css: { r: 2, w: 20951 }, ... } comps: [ {type:doc, url:foo.com, size:1841, resp:41, gzip:613}, ... ]}
  38. 38. -d, --dict
  39. 39. $ yslow -i basic --dict foo.com.har{ w: 98725, o: 89, u: foo.com, r: 9, i: ydefault, lt: 981, dictionary: { w: size, o: overall score, u: url, r: total number of requests, i: id of the ruleset used, lt: page load time, grades: 100 >= A >= 90 > B >= 80 > C >= 70 > D >= 60 > E >= 50 > F >= 0 > N/A = -1 }}
  40. 40. -r, --ruleset <ruleset>(ydefault | yslow1 | yblog)
  41. 41. Minimize HTTP RequestsUse a Content Delivery NetworkAvoid empty src or hrefAdd an Expires or a Cache-Control HeaderGzip ComponentsPut StyleSheets at the TopPut Scripts at the BottomAvoid CSS ExpressionsMake JavaScript and CSS ExternalReduce DNS LookupsMinify JavaScript and CSS ydefaultAvoid RedirectsRemove Duplicate Scripts (aka YSlow V2)Configure ETagsMake AJAX Cacheable 23 rulesUse GET for AJAX RequestsReduce the Number of DOM ElementsNo 404sReduce Cookie SizeUse Cookie-Free Domains for ComponentsAvoid FiltersDo Not Scale Images in HTMLMake favicon.ico Small and Cacheable
  42. 42. Minimize HTTP RequestsUse a Content Delivery NetworkAdd an Expires or a Cache-Control HeaderGzip ComponentsPut StyleSheets at the TopPut Scripts at the Bottom yslow1Avoid CSS ExpressionsMake JavaScript and CSS External (aka YSlow V1/classic)Reduce DNS LookupsMinify JavaScript and CSS 13 rulesAvoid RedirectsRemove Duplicate ScriptsConfigure ETags
  43. 43. Minimize HTTP RequestsAvoid empty src or hrefGzip ComponentsPut StyleSheets at the TopPut Scripts at the BottomAvoid CSS Expressions yblogReduce DNS LookupsMinify JavaScript and CSSAvoid Redirects (aka small site/blog)Remove Duplicate ScriptsReduce the Number of DOM Elements 15 rulesNo 404sAvoid FiltersDo Not Scale Images in HTMLMake favicon.ico Small and Cacheable
  44. 44. -b, --beacon <url> -v, --verbose
  45. 45. $ yslow --beacon http://server.com/ foo.com.har{ w: 98725, o: 89, u: foo.com, r: 9, i: ydefault, lt: 981 }$ yslow -b http://server.com/ --verbose foo.com.har{ w: 98725, o: 89, u: foo.com, r: 9, i: ydefault, lt: 981, beacon: { status: 200, headers: { "content-type": text/html; charset=utf-8, "date": Thu, 02 Aug 2012 17:23:33 GMT, "content-length": 3, "connection": close }, body: okn }}
  46. 46. Case: Y! Continuous Deploymentbefore after
  47. 47. No Performance Test Suite before after
  48. 48. ! O BOYSlow for PhantomJS http://www.flickr.com/photos/pedroferrer/3615212504
  49. 49. $ phantomjs yslow.js http://yslow.org
  50. 50. -f, --format <format>( json | xml | plain | tap | junit )
  51. 51. $ phantomjs yslow.js -i basic --format tap http://yslow.orgTAP version 131..1ok 1 B (88) overall score$ phantomjs yslow.js -i grade --format tap http://yslow.orgTAP version 131..24ok 1 B (88) overall scorenot ok 2 C (72) ynumreq: Make fewer HTTP requests --- message: This page has 7 external Javascript scripts ...ok 3 C (70) ycdn: Use a Content Delivery Network (CDN) --- message: There are 3 static components not on CDN. offenders: - "yslow.org: 1 component, 8.0K (8.0K GZip)" - "fonts.googleapis.com: 1 component, 1.0K (1.0K GZip)" - "widgets.twimg.com: 1 component, 0.8K" ...ok 4 A (100) yemptysrc: Avoid empty src or hrefnot ok 5 F (12) yexpires: Add Expires headers --- message: There are 5 static components without a far-future expiration date. offenders: - "http://yslow.org/stylesheets/styles-min.css"...
  52. 52. $ phantomjs yslow.js -i basic --format junit http://yslow.org<?xml version="1.0" encoding="UTF-8" ?><testsuites> <testsuite name="YSlow" tests="1" failures="1"> <testcase name="overall score" status="C (79)"> <failure/> </testcase> </testsuite></testsuites>
  53. 53. -t, --threshold <score>( [0-100] | [A-F] | {json} ) default: 80
  54. 54. -t B-t 75-t {"overall": "C", "ycdn": "F"}-t {"ycdn": "F", "yexpires": 75}
  55. 55. -u, --ua "<user agent>"e.g: -u "Mozilla/4.0 (compatible; MSIE 6)"
  56. 56. -vp, --viewport <WxH> e.g: -vp 640x960
  57. 57. -ch, --headers <JSON>e.g: -ch {"Cookie": "foo=bar"}
  58. 58. -c, --console <level>(0: none | 1: msg | 2: msg+line+source)
  59. 59. YSlow + CI = BFF
  60. 60. node.js server
  61. 61. remote HAR filecurl http://yslow.nodester.com/?har=http://server.com/foo.harlocal HAR file uploadcurl http://yslow.nodester.com/ -F har=@localfile.harHAR {json} stringcurl http://yslow.nodester.com/ -d har={"log":{"version":"1.1", ... }}
  62. 62. + +
  63. 63. curl "http://yslow.nodester.com/?har=http%3A%2F%2Fwww.webpagetest.org%2Fexport.php%3Ftest%3D120627_MC_5WD&i=grade&b=http%3A%2F%2Fwww.showslow.com%2Fbeacon%2Fyslow%2F&v=1"
  64. 64. WPO at Twitter
  65. 65. A A A A ...High Performance
  66. 66. + +best: RUM + (YSlow + WPT) CI http://donq.com/recipes/rum-sour/
  67. 67. test build proactive wpomonitor perf users deploy
  68. 68. prod branch A branch B ... performance boxes
  69. 69. branch A branch Bprod vs X+100ms X-50msXms branches comparison
  70. 70. ++ vs +
  71. 71. Cпасибо yslow.org @yslow /getyslow slides icons: http://www.iconfinder.com/

×