Your SlideShare is downloading. ×
Velocity China 2012 Proactive WPO
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Velocity China 2012 Proactive WPO

1,906
views

Published on

Web Performance is a vigilant task and even well monitored websites frequently get out of performance monitoring radar resulting in performance regression pushed to end users. Real User Monitoring is …

Web Performance is a vigilant task and even well monitored websites frequently get out of performance monitoring radar resulting in performance regression pushed to end users. Real User Monitoring is an essential tool but it's not enough as users will be ultimately the ones raising the red flag for eventual performance regression introduced after every release cycle.
YSlow has been helping the industry websites performance by analyzing and suggesting the appropriate fix through browsers extensions manually run from productions end points. Now YSlow powered by NodeJS and PhantomJS is capable of been seamlessly plugged in the Continuous Integration pipeline raising the red flag for performance regression in the building process, assuring the website minimum performance standards and avoiding unnecessary end user bad experience. Besides YSlow as a way to prevent regression, at Twitter we strive to keep and improve performance of every new release through automated branch performance comparison tool powered by WebPageTest and WebPageTest API Wrapper which gives accurate metrics to avoid even milliseconds of performance regression in production.

Published in: Technology

2 Comments
6 Likes
Statistics
Notes
  • love the idea, I'm definitely considering it in my next revision, thanks a lot!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Great presentation. I particularly like the diagrams showing how WPO integrates into development. IMHO this kind of integration should be extended - WPO needs to go all the way into the design process. So designers, not just developers, need to know what Yslow is. The reaon: if a designer creates Hummer website, no amount of site engineering can streamline it into a Prius. The Prius is 'greener' because efficiency thinking was extended into design - otherwise, we'd just have a hybrid Hummer.

    By figuring out ways that designers can integrate some WPO at the earliest stages of design or UX, velocity moves from an efficient web to sustainable web design. http://sustainablevirtualdesign.wordpress.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
1,906
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
38
Comments
2
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Proactive WPO @marcelduranvelocity@marcelduran.com
  • 2. about:me
  • 3. Im not here
  • 4. Im from here on
  • 5. V is for Vigilante http://usa-moscow.blogspot.com/2010/09/more-hot-water.html
  • 6. Performance Radar http://www.flickr.com/photos/benfrantzdale/1056282822/
  • 7. “if you can’t measure it, you can’t improve it” — Lord Kelvin
  • 8. worst case: no instruments http://www.flickr.com/photos/timothyhackworth/753783003/
  • 9. test build reactive deployreview users
  • 10. better case: RUM http://www.flickr.com/photos/pj/6116201547/
  • 11. /lo b.com gnorm githu al/ boo m er an gReal User Measurements http://lognormal.com/features/
  • 12. test build reactive deploymonitor users
  • 13. YSlow manually
  • 14. YSlow automation http://www.flickr.com/photos/snazzyguy/3381047684/
  • 15. +
  • 16. +much better: RUM + YSlow (CI) http://donq.com/recipes/rum-sour
  • 17. test build proactive wpo deploymonitor users
  • 18. +174k users +3.3mi downloads Top 25 2bi add-ons downloadedjul/07
  • 19. ~171k usersjul/07 mar/11
  • 20. jul/07 mar/11 jun/11
  • 21. ~86k usersjul/07 mar/11 jun/11 aug/11
  • 22. jul/07 mar/11 jun/11 aug/11oct/11
  • 23. jul/07 mar/11 jun/11 aug/11oct/11 dec/11
  • 24. first 24 hours 437 37 so far 919jul/07 mar/11 jun/11 aug/11 77oct/11 dec/11 feb/12
  • 25. th5 anniversary http://www.flickr.com/photos/spool32/5045502202
  • 26. jul/07 mar/11 jun/11 aug/11oct/11 dec/11 feb/12 apr/12
  • 27. jul/07 mar/11 jun/11 aug/11oct/11 dec/11 feb/12 apr/12 jun/12
  • 28. YSlow Command Line
  • 29. $ npm install yslow -g
  • 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. { "log": { "version": "1.1", "pages": [ { "startedDateTime": "2012-08-16T18:27:29.000+00:00", "id": "page_1_0", "pageTimings": { "onLoad": 13701, ... HAR file
  • 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. -f, --format <format> (json|xml|plain)
  • 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. -i, --info <info> (basic|grade|stats|comps|all)
  • 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. $ 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. -d, --dict
  • 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. -r, --ruleset <ruleset>(ydefault | yslow1 | yblog)
  • 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. 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. 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. -b, --beacon <url> -v, --verbose
  • 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. Case: Y! Continuous Deploymentbefore after
  • 47. No Performance Test Suite before after
  • 48. ! O BOYSlow for PhantomJS http://www.flickr.com/photos/pedroferrer/3615212504
  • 49. $ phantomjs yslow.js http://yslow.org
  • 50. -f, --format <format>( json | xml | plain | tap | junit )
  • 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. $ 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. -t, --threshold <score>( [0-100] | [A-F] | {json} ) default: 80
  • 54. -t B-t 75-t {"overall": "C", "ycdn": "F"}-t {"ycdn": "F", "yexpires": 75}
  • 55. -u, --ua "<user agent>"e.g: -u "Mozilla/4.0 (compatible; MSIE 6)"
  • 56. -vp, --viewport <WxH> e.g: -vp 640x960
  • 57. -ch, --headers <JSON>e.g: -ch {"Cookie": "foo=bar"}
  • 58. -c, --console <level>(0: none | 1: msg | 2: msg+line+source)
  • 59. YSlow + CI = BFF
  • 60. node.js server
  • 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. + +
  • 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. A A A A ...High Performance
  • 65. + +best: RUM + (YSlow + WPT) CI http://donq.com/recipes/rum-sour/
  • 66. WebPageTest
  • 67. test build proactive wpomonitor perf users deploy
  • 68. prod branch A branch B ... performance boxes
  • 69. branch A branch Bprod vs X+100ms X-50msXms branches comparison
  • 70. http://marcelduran.com/webpagetest-api
  • 71. github.com/marcelduran/webpagetest-api
  • 72. ++ vs +
  • 73. 谢谢yslow.org@yslow/getyslow slides icons: http://www.iconfinder.com/