0
@marcelduran
Performance as a Feature
tri afudê tchê
about me
web-perf
features
losing features
omg!
losing performance
before after
what does performance mean?
how to lose performance
new
feature
bugfix
omg!
new release
typical
dev cycle
build
users
deploy
test
monitor
reactive
rum
new release
continuous integration
continuous integration
acceptance
regression
smoke
integrationunit
ninja
chuck norris
continuous integration
branches * (new features + bugfixes)
looking for performance regression
previous
diff
new
yslow.org
har
{
"log": {
"version": "1.1",
"pages": [
{
"startedDateTime": "2012-08-16T18:27:29.000+00:00",
"id": "page_1_0",
"pageT...
generating har
$ npm install yslow -g
+ +
yslow + phantomjs
$ phantomjs yslow.js http://yslow.org
new test output formats
-f, --format <format>
( json | xml | plain | tap | junit )
test specs
-t, --threshold <score>
( [0-100] | [A-F] | {json} )
default: 80
test specs examples
-t B
-t 75
-t '{"overall": "C", "ycdn": "F"}'
-t '{"ycdn": "F", "yexpires": 75}'
browser impersonation
-u, --ua "<user agent>"
e.g: -u "Mozilla/5.0 (iPhone; ...)"
-vp, --viewport <WxH>
e.g: -vp 320x480
authentication
-ch, --headers <JSON>
e.g: -ch '{"Cookie": "auth_token=foo"}'
exempli gratia
$ phantomjs yslow.js http://twitter.com
--info grade --format tap
-t '{"overall": "B", "ycdn": "F"}'
-ch '{...
jenkins
+wpo
build test
deploy
monitor
users
wpo
proactive
high performance
A A A A ...
what's your metric?
page load
domReady
TTFB
start render
TTF
speed indexAFT
foobar
TTFT
TTFT
RESTful API
XML
JSON
marcelduran.com/webpagetest-api
webpagetest-api wrapper overview
http://webpagetest.org/testStatus.php?test=121119_DJ_J0R
var WebPageTest = require('webpa...
commands
status
results
locations
testers
test
cancel
har
pagespeed
utilization
request
timeline
netlog
console
testinfo
w...
options
server
aft
bodies
first
full
ignoressl
keepua
netlog
noads
noheaders
noimages
noopt
noscript
onload
private
sensit...
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...
testing then polling results
$ webpagetest test twitter.com
{ ..., "testId": "121119_DJ_J0R", ... }
$ webpagetest results ...
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 w...
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 ...
sync test
$ webpagetest test twitter.com --poll
{ ..., "loadTime": 1810, ... }
{ ..., "loadTime": 1810, ... }
$ webpagetes...
performance test specs
{
"response": {
...
"data": {
...
"median": {
"firstView": {
...
"requests": 15
"render": 500,
"loa...
performance test specs
$ webpagetest test example.com --poll
--spec testspecs.json
WebPageTest
✓ median.firstView.requests...
wpt perf test specs
powered by
performance test reporters
dot (default)
spec
tap
xunit
list
progress
min
nyan
landing
json
doc
markdown
teamcity
continuous integration
+ performance
bit.ly/wpt-jenkins bit.ly/wpt-travis bit.ly/wpt-drone
bit.ly/wpt-ci
continuous performance
measurement
pre prod
branches: foo + bar + baz
foobarbaz
continuous performance
measurement
build test
deploy
monitor
wpo
perf
users
proactive
+perf
webpagetest
fim
image credits
Chimarrão: terramate.com.br
Speed gauge: WebIconSet.com
Yahoo logo: YOOtheme.com
Flower: linux.softpedia.com...
BraziJS 2013 - Performance as a Feature
Upcoming SlideShare
Loading in...5
×

BraziJS 2013 - Performance as a Feature

2,420

Published on

Published in: Technology, Business

Transcript of "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
  1. A particular slide catching your eye?

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

×