BraziJS 2013 - Performance as a Feature

@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

typicaldev cycle

build

users

deploy

test

monitor

reactive

rum

new release

continuous integration

continuous integration

acceptanceregression

smokeintegrationunit

ninjachuck 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", "pageTimings": { "onLoad": 13701, . . .

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 '{"Cookie": "auth_token=foo"}'

jenkins

+wpo build test

deploymonitor users

wpo

proactive

high performance

A A A A ...

what's your metric?

page load

domReady

TTFBstart render

TTF

speed indexAFTfoobar

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('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

commands

statusresultslocationstesterstestcancelharpagespeed

utilizationrequesttimelinenetlogconsoletestinfowaterfallscreenshot

options

serveraftbodiesfirstfullignoresslkeepuanetlognoadsnoheaders

noimagesnooptnoscriptonloadprivatesensitivestandardstimelinevideoauth

typeblockbwdowntcpdumpbwupconnectionsconnectivitydomdurationjpegkey

labellatencylocationloginnotifypasswordpingbackplrrequestrunsspof

webpagetest architecture

location alpha

WPT server

age 1nt

age 2nt

age 3nt

location beta

age 1nt

age 2nt

age 3nt

any work for me? (polling)

test done! your results (post)

test foo.com

test

bar

.com

any work for me? (polling)

test done! your results (post)

via user

via api

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, ... }

polling workflow

some location

WPT server

age 1nt

age 2nt

age 3nt

some server

test foo.com

1te

st ID

=123

2 any work for me?yes foo.com

4

test foo.com5

test 123 done!results (post)

6

give me details of test 123

7

test

123

don

e?

3

pingback workflow

some location

WPT server

age 1nt

age 2nt

age 3nt

some server

test foo.com

1te

st ID

=123

2 any work for me?yes foo.com

3

test foo.com4

test 123 done!results (post)

5

test

123

don

e!

6

give me details of test 123

7

sync test

$ webpagetest test twitter.com --poll

{ ..., "loadTime": 1810, ... }

{ ..., "loadTime": 1810, ... }

$ webpagetest test twitter.com --wait

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

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 $?

wpt perf test specspowered 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

foo

bar

baz

continuous performance measurement

build test

deploy

monitor

wpo

perf

users

proactive

+perf

webpagetest

fim

image creditsChimarrão: terramate.com.brSpeed gauge: WebIconSet.comYahoo logo: YOOtheme.comFlower: linux.softpedia.com/developer/Oliver-Scholtz-93.htmlBandaid: nahas-pro.deviantart.comGuinea pig: en.academic.ru/dic.nsf/enwiki/2191230Needle: business2community.com/social-media/4-tips-for-converting-social-media-leads-0144554Ninja: Iconka.comSad Face: memegenerator.netFork: fortawesome.github.io/Font-AwesomeOthers: iconfinder.com