Your SlideShare is downloading. ×
  • Like
BraziJS 2013 - Performance as a Feature
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

BraziJS 2013 - Performance as a Feature

  • 2,182 views
Published

 

Published in Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,182
On SlideShare
0
From Embeds
0
Number of Embeds
8

Actions

Shares
Downloads
22
Comments
0
Likes
14

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. @marcelduran Performance as a Feature
  • 2. tri afudê tchê
  • 3. about me
  • 4. web-perf
  • 5. features
  • 6. losing features omg!
  • 7. losing performance before after
  • 8. what does performance mean?
  • 9. how to lose performance new feature bugfix omg! new release
  • 10. typical dev cycle build users deploy test monitor reactive
  • 11. rum new release
  • 12. continuous integration
  • 13. continuous integration acceptance regression smoke integrationunit ninja chuck norris
  • 14. continuous integration
  • 15. branches * (new features + bugfixes)
  • 16. looking for performance regression previous diff new
  • 17. yslow.org
  • 18. har { "log": { "version": "1.1", "pages": [ { "startedDateTime": "2012-08-16T18:27:29.000+00:00", "id": "page_1_0", "pageTimings": { "onLoad": 13701, . . .
  • 19. generating har
  • 20. $ npm install yslow -g
  • 21. + +
  • 22. yslow + phantomjs $ phantomjs yslow.js http://yslow.org
  • 23. new test output formats -f, --format <format> ( json | xml | plain | tap | junit )
  • 24. test specs -t, --threshold <score> ( [0-100] | [A-F] | {json} ) default: 80
  • 25. test specs examples -t B -t 75 -t '{"overall": "C", "ycdn": "F"}' -t '{"ycdn": "F", "yexpires": 75}'
  • 26. browser impersonation -u, --ua "<user agent>" e.g: -u "Mozilla/5.0 (iPhone; ...)" -vp, --viewport <WxH> e.g: -vp 320x480
  • 27. authentication -ch, --headers <JSON> e.g: -ch '{"Cookie": "auth_token=foo"}'
  • 28. exempli gratia $ phantomjs yslow.js http://twitter.com --info grade --format tap -t '{"overall": "B", "ycdn": "F"}' -ch '{"Cookie": "auth_token=foo"}'
  • 29. jenkins
  • 30. +wpo build test deploy monitor users wpo proactive
  • 31. high performance A A A A ...
  • 32. what's your metric? page load domReady TTFB start render TTF speed indexAFT foobar
  • 33. TTFT TTFT
  • 34. RESTful API XML JSON
  • 35. marcelduran.com/webpagetest-api
  • 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. commands status results locations testers test cancel har pagespeed utilization request timeline netlog console testinfo waterfall screenshot
  • 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. 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. 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. 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. 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. sync test $ webpagetest test twitter.com --poll { ..., "loadTime": 1810, ... } { ..., "loadTime": 1810, ... } $ webpagetest test twitter.com --wait
  • 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. 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. wpt perf test specs powered by
  • 47. performance test reporters dot (default) spec tap xunit list progress min nyan landing json doc markdown teamcity
  • 48. continuous integration + performance bit.ly/wpt-jenkins bit.ly/wpt-travis bit.ly/wpt-drone bit.ly/wpt-ci
  • 49. continuous performance measurement pre prod branches: foo + bar + baz foobarbaz
  • 50. continuous performance measurement
  • 51. build test deploy monitor wpo perf users proactive +perf webpagetest
  • 52. fim
  • 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