BraziJS 2013 - Performance as a Feature

2,924 views
2,791 views

Published on

Published in: Technology, Business

BraziJS 2013 - Performance as a Feature

  1. 1. @marcelduran Performance as a Feature
  2. 2. tri afudê tchê
  3. 3. about me
  4. 4. web-perf
  5. 5. features
  6. 6. losing features omg!
  7. 7. losing performance before after
  8. 8. what does performance mean?
  9. 9. how to lose performance new feature bugfix omg! new release
  10. 10. typical dev cycle build users deploy test monitor reactive
  11. 11. rum new release
  12. 12. continuous integration
  13. 13. continuous integration acceptance regression smoke integrationunit ninja chuck norris
  14. 14. continuous integration
  15. 15. branches * (new features + bugfixes)
  16. 16. looking for performance regression previous diff new
  17. 17. yslow.org
  18. 18. har { "log": { "version": "1.1", "pages": [ { "startedDateTime": "2012-08-16T18:27:29.000+00:00", "id": "page_1_0", "pageTimings": { "onLoad": 13701, . . .
  19. 19. generating har
  20. 20. $ npm install yslow -g
  21. 21. + +
  22. 22. yslow + phantomjs $ phantomjs yslow.js http://yslow.org
  23. 23. new test output formats -f, --format <format> ( json | xml | plain | tap | junit )
  24. 24. test specs -t, --threshold <score> ( [0-100] | [A-F] | {json} ) default: 80
  25. 25. test specs examples -t B -t 75 -t '{"overall": "C", "ycdn": "F"}' -t '{"ycdn": "F", "yexpires": 75}'
  26. 26. browser impersonation -u, --ua "<user agent>" e.g: -u "Mozilla/5.0 (iPhone; ...)" -vp, --viewport <WxH> e.g: -vp 320x480
  27. 27. authentication -ch, --headers <JSON> e.g: -ch '{"Cookie": "auth_token=foo"}'
  28. 28. exempli gratia $ phantomjs yslow.js http://twitter.com --info grade --format tap -t '{"overall": "B", "ycdn": "F"}' -ch '{"Cookie": "auth_token=foo"}'
  29. 29. jenkins
  30. 30. +wpo build test deploy monitor users wpo proactive
  31. 31. high performance A A A A ...
  32. 32. what's your metric? page load domReady TTFB start render TTF speed indexAFT foobar
  33. 33. TTFT TTFT
  34. 34. RESTful API XML JSON
  35. 35. marcelduran.com/webpagetest-api
  36. 36. webpagetest-api wrapper overview http://webpagetest.org/testStatus.php?test=121119_DJ_J0R var WebPageTest = require('webpagetest'), wpt = new WebPageTest(); wpt.getTestStatus('121119_DJ_J0R', function(err, data) { console.log(err || data); }); $ webpagetest status 121119_DJ_J0R http://webpagetest.aws.af.cm/status/121119_DJ_J0R
  37. 37. commands status results locations testers test cancel har pagespeed utilization request timeline netlog console testinfo waterfall screenshot
  38. 38. options server aft bodies first full ignoressl keepua netlog noads noheaders noimages noopt noscript onload private sensitive standards timeline video auth type block bwdown tcpdump bwup connections connectivity dom duration jpeg key label latency location login notify password pingback plr request runs spof
  39. 39. webpagetest architecture location alpha WPT server a g e 1 n t a g e 2 n t a g e 3 n t location beta a g e 1 n t a g e 2 n t a g e 3 n t any work for me? (polling) test done! your results (post) testfoo.com testbar.com any work for me? (polling) test done! your results (post) via user via api
  40. 40. testing then polling results $ webpagetest test twitter.com { ..., "testId": "121119_DJ_J0R", ... } $ webpagetest results 121119_DJ_J0R { ..., "statusText": "Test Started", ... } $ webpagetest results 121119_DJ_J0R { ..., "loadTime": 1810, ... }
  41. 41. polling workflow some location WPT server a g e 1 n t a g e 2 n t a g e 3 n t some server testfoo.com 1 testID=123 2 any work for me? yes foo.com 4 test foo.com5 test 123 done! results (post) 6 givemedetailsoftest123 7 test123done? 3
  42. 42. pingback workflow some location WPT server a g e 1 n t a g e 2 n t a g e 3 n t some server testfoo.com 1 testID=123 2 any work for me? yes foo.com 3 test foo.com4 test 123 done! results (post) 5 test123done! 6 givemedetailsoftest123 7
  43. 43. sync test $ webpagetest test twitter.com --poll { ..., "loadTime": 1810, ... } { ..., "loadTime": 1810, ... } $ webpagetest test twitter.com --wait
  44. 44. performance test specs { "response": { ... "data": { ... "median": { "firstView": { ... "requests": 15 "render": 500, "loadTime": 2500, "score_gzip": 70 ... } } } ... } } wpt results { "median": { "firstView": { "requests": 20 "render": 400, "loadTime": 3000, "score_gzip": { "min": 90 } } } } specs testspecs.json
  45. 45. performance test specs $ webpagetest test example.com --poll --spec testspecs.json WebPageTest ✓ median.firstView.requests: 15 should be less than 20 1) median.firstView.render: 500 should be less than 400 ✓ median.firstView.loadTime: 2500 should be less than 3000 2) median.firstView.score_gzip: 70 should be greater than 90 2 passing (3 ms) 2 failing 2 $ echo $?
  46. 46. wpt perf test specs powered by
  47. 47. performance test reporters dot (default) spec tap xunit list progress min nyan landing json doc markdown teamcity
  48. 48. continuous integration + performance bit.ly/wpt-jenkins bit.ly/wpt-travis bit.ly/wpt-drone bit.ly/wpt-ci
  49. 49. continuous performance measurement pre prod branches: foo + bar + baz foobarbaz
  50. 50. continuous performance measurement
  51. 51. build test deploy monitor wpo perf users proactive +perf webpagetest
  52. 52. fim
  53. 53. image credits Chimarrão: terramate.com.br Speed gauge: WebIconSet.com Yahoo logo: YOOtheme.com Flower: linux.softpedia.com/developer/Oliver-Scholtz-93.html Bandaid: nahas-pro.deviantart.com Guinea pig: en.academic.ru/dic.nsf/enwiki/2191230 Needle: business2community.com/social-media/4-tips-for-converting-social-media-leads-0144554 Ninja: Iconka.com Sad Face: memegenerator.net Fork: fortawesome.github.io/Font-Awesome Others: iconfinder.com

×