@marcelduran

Avoiding Performance Regression

Web

email@marcelduran.com

about me

twitter: web-core

Flight

web-perf

not covered today

backend cdn / infra mobile

life before twitter

THE PROBLEM

new feature

bugfix

omg!

new release

easiest solution

new release

2.5s 2.3syay!

#kidding

typicaldev cycle

build

users

deploy

test

monitor

reactive

branches * (new features + bugfixes)

rum

new release

case: +100ms

previous

diff

new

HANDS ONcuzillion.com

yslow

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

webpagetest.org

$ npm install yslow -g

showslow.com

+ +

case: Yahoo! Profilecontinuous deployment

acceptanceregression

smokeintegrationunit

ninjachuck norris

but

performance

before after

before after

phantomjs

var page = require('webpage').create(), url = 'http://www.phantomjs.org/', start = new Date();

page.open(url, function(status) { console.log(new Date() - start); phantom.exit();});

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"}'

jenkins

+wpo build test

deploymonitor users

wpo

proactive

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');var wpt = new WebPageTest('webpagetest.org', 'API_key');

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

build test

deploy

monitor

wpo

perf

users

proactive

+perf

peregrine

geococcyx californianus

why peregrine? peregrine falcon

over 200mph

roadrunner

overview1

2

3

4

5

6

7

8

9

custom deploy

median of n times

script test

dev? staging? prod? perf?same location

Perf Box

WPT agent(vm)

twitter.com

cdn assets

screenshots

opensource

coming soon!

what's keeping us busy

foo

bar

baz

mastervs

+ ?mspass/no-pass

questions?

@JoinTheFlock

image creditsJava logo: aha-soft.comGauge: WebIconSet.comNetwork: Everaldo.comIphone: pierocksmysocks.deviantart.comYahoo logo: YOOtheme.comFlower: linux.softpedia.com/developer/Oliver-Scholtz-93.htmlBandaid: nahas-pro.deviantart.comNeedle: business2community.com/social-media/4-tips-for-converting-social-media-leads-0144554Ninja: Iconka.comFalcon1: vt.audubon.org/events/peregrine-falcon-recovery-lectureFalcon2: mendobrew.com/blog/476_the-peregrine-falconFork: fortawesome.github.io/Font-Awesome