Happy 5th Birthday YSlow   @marcelduran @stoyanstefanov                        http://www.flickr.com/photos/spool32/504550...
+183k users (formerly +210k)         +3.3mi downloads         Top 25 2bi add-ons downloadedjul/07
~145k users (formerly 106k)jul/07   mar/11
jul/07   mar/11   jun/11
~65k usersjul/07   mar/11   jun/11     aug/11
jul/07   mar/11   jun/11   aug/11oct/11
jul/07            mar/11   jun/11   aug/11oct/11   dec/11
first 24 hours                                      437                                          37                       ...
jul/07            mar/11   jun/11   aug/11oct/11   dec/11   feb/12   apr/12
jul/07            mar/11   jun/11   aug/11oct/11   dec/11   feb/12   apr/12   jun/12
$ npm install yslow -g
$ yslow --helpUsage: yslow [options] [file ...]Options: -h, --help                output usage information -V, --version  ...
$   yslow file.har$   yslow file1.har file2.har file3.har$   yslow my-har-files/*.har$   yslow < file.har$   curl http://f...
-f, --format <format>   (json|xml|plain)
$ yslow foo.com.har{ w: 98725, o: 89, u: foo.com, r: 9, i: ydefault, lt: 981 }$ yslow --format xml foo.com.har<?xml versio...
-i, --info <info> (basic|grade|stats|comps|all)
$ 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, ...
$ yslow --info comps foo.com.har{ w: 98725, o: 89, u: foo.com, r: 9, i: ydefault, lt: 981,  comps: [  {type:doc, url:foo.c...
-d, --dict
$ yslow -i basic --dict foo.com.har{ w: 98725, o: 89, u: foo.com, r: 9, i: ydefault, lt: 981,  dictionary: {    w: size,  ...
-r, --ruleset <ruleset>(ydefault | yslow1 | yblog)
Minimize HTTP RequestsUse a Content Delivery NetworkAvoid empty src or hrefAdd an Expires or a Cache-Control HeaderGzip Co...
Minimize HTTP RequestsUse a Content Delivery NetworkAdd an Expires or a Cache-Control HeaderGzip ComponentsPut StyleSheets...
Minimize HTTP RequestsAvoid empty src or hrefGzip ComponentsPut StyleSheets at the TopPut Scripts at the BottomAvoid CSS E...
-b, --beacon <url>   -v, --verbose
$ yslow --beacon http://server.com/ foo.com.har{ w: 98725, o: 89, u: foo.com, r: 9, i: ydefault, lt: 981 }$ yslow -b http:...
!   O BOYSlow for PhantomJS            http://www.flickr.com/photos/pedroferrer/3615212504
Case: Y! Continuous   Deploymentbefore         after
No Performance Test Suite  before          after
$ phantomjs yslow.js http://yslow.org
-f, --format <format>( json | xml | plain | tap | junit )
$ phantomjs yslow.js -i basic --format tap http://yslow.orgTAP version 131..1ok 1 B (88) overall score$ phantomjs yslow.js...
$ phantomjs yslow.js -i basic --format junit http://yslow.org<?xml version="1.0" encoding="UTF-8" ?><testsuites>  <testsui...
-t, --threshold <score>( [0-100] | [A-F] | {json} )         default: 80
-t B-t 75-t {"overall": "C", "ycdn": "F"}-t {"ycdn": "F", "yexpires": 75}
-u, --ua "<user agent>"e.g: -u "Mozilla/4.0 (compatible; MSIE 6)"
-vp, --viewport <WxH>  e.g: -vp 640x960
-ch, --headers <JSON>e.g: -ch {"Cookie": "foo=bar"}
-c, --console <level>(0: none | 1: msg | 2: msg+line+source)
YSlow + CI = BFF
node.js server
remote HAR filecurl http://yslow.nodester.com/?har=http://server.com/foo.harlocal HAR file uploadcurl http://yslow.nodeste...
+   +
curl "http://yslow.nodester.com/?har=http%3A%2F%2Fwww.webpagetest.org%2Fexport.php%3Ftest%3D120627_MC_5WD&i=grade&b=http%3...
is hiring         YAWAHS             ;-)Yet Another We Are Hiring Slide
m           ON                           ul         N      EE UB                                tip     S H               ...
doc    be a speed star// check if frame digging was disabled, if so, return the topif (!YSLOW.util.Preference.getPref(exte...
Source Codegithub.com/marcelduran/yslow
Thank You      yslow.org     @yslow      /getyslow
extensible
SF WebPerf Meetup - Happy 5th Birthday YSlow
SF WebPerf Meetup - Happy 5th Birthday YSlow
SF WebPerf Meetup - Happy 5th Birthday YSlow
Upcoming SlideShare
Loading in …5
×

SF WebPerf Meetup - Happy 5th Birthday YSlow

1,835
-1

Published on

Original Google Docs presentation: http://wh.yslow.org/sfwebperf-yslow

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,835
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

SF WebPerf Meetup - Happy 5th Birthday YSlow

  1. 1. Happy 5th Birthday YSlow @marcelduran @stoyanstefanov http://www.flickr.com/photos/spool32/5045502202
  2. 2. +183k users (formerly +210k) +3.3mi downloads Top 25 2bi add-ons downloadedjul/07
  3. 3. ~145k users (formerly 106k)jul/07 mar/11
  4. 4. jul/07 mar/11 jun/11
  5. 5. ~65k usersjul/07 mar/11 jun/11 aug/11
  6. 6. jul/07 mar/11 jun/11 aug/11oct/11
  7. 7. jul/07 mar/11 jun/11 aug/11oct/11 dec/11
  8. 8. first 24 hours 437 37 so far 772jul/07 mar/11 jun/11 aug/11 69oct/11 dec/11 feb/12
  9. 9. jul/07 mar/11 jun/11 aug/11oct/11 dec/11 feb/12 apr/12
  10. 10. jul/07 mar/11 jun/11 aug/11oct/11 dec/11 feb/12 apr/12 jun/12
  11. 11. $ npm install yslow -g
  12. 12. $ 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
  13. 13. $ 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
  14. 14. -f, --format <format> (json|xml|plain)
  15. 15. $ 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
  16. 16. -i, --info <info> (basic|grade|stats|comps|all)
  17. 17. $ 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 } }}
  18. 18. $ 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}, ... ]}
  19. 19. -d, --dict
  20. 20. $ 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 }}
  21. 21. -r, --ruleset <ruleset>(ydefault | yslow1 | yblog)
  22. 22. 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
  23. 23. 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
  24. 24. 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
  25. 25. -b, --beacon <url> -v, --verbose
  26. 26. $ 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 }}
  27. 27. ! O BOYSlow for PhantomJS http://www.flickr.com/photos/pedroferrer/3615212504
  28. 28. Case: Y! Continuous Deploymentbefore after
  29. 29. No Performance Test Suite before after
  30. 30. $ phantomjs yslow.js http://yslow.org
  31. 31. -f, --format <format>( json | xml | plain | tap | junit )
  32. 32. $ 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"...
  33. 33. $ 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>
  34. 34. -t, --threshold <score>( [0-100] | [A-F] | {json} ) default: 80
  35. 35. -t B-t 75-t {"overall": "C", "ycdn": "F"}-t {"ycdn": "F", "yexpires": 75}
  36. 36. -u, --ua "<user agent>"e.g: -u "Mozilla/4.0 (compatible; MSIE 6)"
  37. 37. -vp, --viewport <WxH> e.g: -vp 640x960
  38. 38. -ch, --headers <JSON>e.g: -ch {"Cookie": "foo=bar"}
  39. 39. -c, --console <level>(0: none | 1: msg | 2: msg+line+source)
  40. 40. YSlow + CI = BFF
  41. 41. node.js server
  42. 42. 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", ... }}
  43. 43. + +
  44. 44. 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"
  45. 45. is hiring YAWAHS ;-)Yet Another We Are Hiring Slide
  46. 46. m ON ul N EE UB tip S H lo le AS GIT rs ca o u ak ti off h a on ic b le W FH s e e xi flun unl ss pa im B bo id ite O n tim d BY ow eo ur ff yo be
  47. 47. doc be a speed star// check if frame digging was disabled, if so, return the topif (!YSLOW.util.Preference.getPref(extensions.yslow., true)) { allDocs[node.URL] = {V1 }; document: node, type: doc samurai return allDocs;}type = doc;V2 ninjaif (node.nodeType === this.NODETYPE.DOCUMENT) { // Document node doc = node; docUrl = node.URL;} else if (node.nodeType === this.NODETYPE.ELEMENT && node.nodeName.toLowerCase() === frame) { black // Frame nodeV3 doc = node.contentDocument; docUrl = node.src; belt} else if (node.nodeType === this.NODETYPE.ELEMENT && doc = node.contentDocument;
  48. 48. Source Codegithub.com/marcelduran/yslow
  49. 49. Thank You yslow.org @yslow /getyslow
  50. 50. extensible
  1. A particular slide catching your eye?

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

×