sf webperf meetup - happy 5th birthday yslow

Download SF WebPerf Meetup - Happy 5th Birthday YSlow

Post on 13-May-2015

1.646 views

Category:

Technology

0 download

Embed Size (px)

DESCRIPTION

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

TRANSCRIPT

  • 1.Happy 5th Birthday YSlow @marcelduran @stoyanstefanovhttp://www.flickr.com/photos/spool32/5045502202

2. +183k users (formerly +210k) +3.3mi downloads Top 25 2bi add-ons downloadedjul/07 3. ~145k users (formerly 106k)jul/07 mar/11 4. jul/07 mar/11 jun/11 5. ~65k usersjul/07 mar/11 jun/11 aug/11 6. jul/07 mar/11 jun/11 aug/11oct/11 7. jul/07mar/11 jun/11 aug/11oct/11 dec/11 8. first 24 hours43737 so far 772jul/07mar/11jun/11aug/1169oct/11 dec/11 feb/12 9. jul/07mar/11 jun/11 aug/11oct/11 dec/11 feb/12 apr/12 10. jul/07mar/11 jun/11 aug/11oct/11 dec/11 feb/12 apr/12 jun/12 11. $ npm install yslow -g 12. $ yslow --helpUsage: yslow [options] [file ...]Options: -h, --helpoutput usage information -V, --version output the version number -i, --info specify the information to display/log (basic|grade|stats|comps|all) [basic] -f, --format specify the output results format (json|xml|plain) [json] -r, --ruleset specify the YSlow performance ruleset to be used (ydefault|yslow1|yblog) [ydefault] -b, --beacon specify an URL to log the results -d, --dictinclude 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. $ 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. -f, --format (json|xml|plain) 15. $ yslow foo.com.har{ w: 98725, o: 89, u: foo.com, r: 9, i: ydefault, lt: 981 }$ yslow --format xml foo.com.har9872589http://www.foo.com/9ydefault981$ 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. -i, --info (basic|grade|stats|comps|all) 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. $ 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. -d, --dict 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. -r, --ruleset (ydefault | yslow1 | yblog) 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 CSSydefaultAvoid 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. Minimize HTTP RequestsUse a Content Delivery NetworkAdd an Expires or a Cache-Control HeaderGzip ComponentsPut StyleSheets at the TopPut Scripts at the Bottomyslow1Avoid CSS ExpressionsMake JavaScript and CSS External (aka YSlow V1/classic)Reduce DNS LookupsMinify JavaScript and CSS 13 rulesAvoid RedirectsRemove Duplicate ScriptsConfigure ETags 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. -b, --beacon -v, --verbose 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. ! O BOYSlow for PhantomJShttp://www.flickr.com/photos/pedroferrer/3615212504 28. Case: Y! Continuous Deploymentbefore after 29. No Performance Test Suitebeforeafter 30. $ phantomjs yslow.js http://yslow.org 31. -f, --format ( json | xml | plain | tap | junit ) 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. $ phantomjs yslow.js -i basic --format junit http://yslow.org 34. -t, --threshold ( [0-100] | [A-F] | {json} ) default: 80 35. -t B-t 75-t {"overall": "C", "ycdn": "F"}-t {"ycdn": "F", "yexpires": 75} 36. -u, --ua ""e.g: -u "Mozilla/4.0 (compatible; MSIE 6)" 37. -vp, --viewport e.g: -vp 640x960 38. -ch, --headers e.g: -ch {"Cookie": "foo=bar"} 39. -c, --console (0: none | 1: msg | 2: msg+line+source) 40. YSlow + CI = BFF 41. node.js server 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. + + 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. is hiring YAWAHS ;-)Yet Another We Are Hiring Slide 46. m ON ul NEE UBtip S Hlo leAS GIT rsca o uak ti off ha on icb le WFHs e e xi flun unlsspa imB boid ite O ntim d BY ow eo urff yobe 47. docbe 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 samuraireturn allDocs;}type = doc;V2 ninjaif (node.nodeType === this.NODETYPE.DOCUMENT) {// Document nodedoc = node;docUrl = node.URL;} else if (node.nodeType === this.NODETYPE.ELEMENT &&node.nodeName.toLowerCase() === frame) { black// Frame nodeV3doc = node.contentDocument;docUrl = node.src; belt} else if (node.nodeType === this.NODETYPE.ELEMENT &&doc = node.contentDocument; 48. Source Codegithub.com/marcelduran/yslow 49. Thank Youyslow.org @yslow/getyslow 50. extensible