Web Performance Workshop - Velocity London 2013

Hands on Web Performance Workshop

Andy Davies@andydavies

Tobias Baldauf@tbaldauf

#VelocityConf London 2013

We’re planning to cover

● Tools● Techniques● Live Analysis

But…

…this session is about

YOUso feel free to jump in with questions

What sites should we test?

http://man.gl/londonworkshop

Do you use WebPageTest?

PhantomJS http://github.com/ariya/phantomjs/

Phantomas

{ "url":"http://tobias.is", "metrics":{

"requests":11,"gzipRequests":2,"postRequests":0,"redirects":0,"notFound":0,"timeToFirstByte":107,"timeToLastByte":120,"bodySize":151897,"contentLength":206417,

[...]

http://github.com/macbre/phantomas

All together now!#!/usr/bin/env bashURL_to_measure="$1"

Metrics_to_analyze=('timeToFirstByte' 'requests' 'cssSize')

Phantomas_JSON_output=$(phantomas --format=json --url "${URL_to_measure}")

for((i=0;i<${#Metrics_to_analyze[@]};i++)) ; do eval ${Metrics_to_analyze[$i]}=$(echo "$Phantomas_JSON_output" | jq ".metrics."${Metrics_to_analyze[$i]}) export ${Metrics_to_analyze[$i]}done

bats --tap performance-tests.bats

#!/usr/bin/env bats

@test "Time to first byte" { [ "$timeToFirstByte" -lt 200 ]}

@test "Number of HTTP requests" { [ "$requests" -lt 30 ]}

@test "CSS size" { [ "$cssSize" -lt 15360 ]}

#1..3ok 1 Time to first byteok 2 Number of HTTP requestsnot ok 3 CSS size# (in test file /test/webperf/performance-tests.bats, line 23)

http://github.com/technopagan/simple-website-speed-test

WebPagetest API

http://github.com/marcelduran/webpagetest-api

Run WPT Run!webpagetest test http://velocityconf.com --server wpt.yourdomain.tld --location Local-SGS2 --wait

{ "statusCode": 200, "statusText": "Ok", "data": {

"testId": "131019_VF_1","ownerKey": "b5cf1cb86be59d94f3ee714f15da3efe5cf05b7z","jsonUrl": "http://wpt.yourdomain.tld/jsonResult.php?test=131019_VF_1","xmlUrl": "http://wpt.yourdomain.tld/xmlResult.php?test=131019_VF_1","userUrl": "http://wpt.yourdomain.tld/results.php?test=131019_VF_1","summaryCSV": "http://wpt.yourdomain.tld/csv.php?test=131019_VF_1","detailCSV": "http://wpt.yourdomain.tld/csv.php?test=131019_VF_1&amp;req=1"

}

SwissArmyKnife Results"response": {

"statusCode": 200,"statusText": "Ok","data": {

"testId": "131019_VF_1", "summary": "http://wpt.yourdomain.tld/results.php?test=131019_VF_1", "from": "Samsung Galaxy SII - Native", "runs": 1, "successfulFVRuns": 1, "successfulRVRuns": 1, "average": { "firstView": { "loadTime": 6285, "TTFB": 2852, [...]

TAP & Jenkins Integration

What if we want to test more

than one page?

./sitespeed.io -u http://news.bbc.co.uk

Setup your own HTTP Archive…

Barbara Bermes - http://man.gl/1eHoyqB

Lots of data!

hist(results$reqTotal, xlim=c(0,200), ylim=c(0,375),breaks=seq(0,200,by=5), main="", xlab="Number of Requests",col="steelblue", border="white", axes=FALSE)

axis(1, at = seq(0, 225, by = 25))axis(2, at = seq(0, 400, by = 25))

library(RMySQL)drv = dbDriver('MySQL')con = dbConnect(drv, user='user', password='password', dbname='dbname', host='127.0.0.1')

results = dbGetQuery(con,statement='select * from pages;')

Import data into R

Plot histogram of requests / page

Sometimes bi-modal distributions

Commercial tools available too…

Let’s look at some live sites

Performance isn’t just about load time

http://www.flickr.com/photos/jaxport/8554780980

Painting every 20ms!

Logo is actually made of four images that fade from one to another.

CPU load varies between 7 - 20%

Has detrimental impact on mobile battery life

A Tale of CSS Checkbox Hacks<input type="checkbox" id="toggle" /><label for="toggle" class="toggle" onclick></label><ul class="menu"> <li><a href="#">Sictransit</a></li> <li><a href="#">Gloriamundi</a></li> </ul>

#toggle:checked ~ .menu {display: block;

}

http://css-tricks.com/the-checkbox-hack/

http://thenittygritty.co/toggle-navigation-with-pure-css

http://bugs.webkit.org/show_bug.cgi?id=45168

body { -webkit-animation: bugfix infinite 1s; /* here be dragons */}@-webkit-keyframes bugfix { from { white-space: default; } to { white-space: normal; }}

Be neighborlyAdjacent sibling selector trumps general sibling selector

<input type="checkbox" id="toggle" /><nav>

<label for="toggle" class="toggle" onclick></label><ul class="menu">

<li><a href="#">Sictransit</a></li> <li><a href="#">Gloriamundi</a></li>

</ul></nav>

#toggle:checked + nav .menu { display: block;}

Lessons learnedWorking in web performance is as much about educating as optimizing.

Choose your battles

http://josefbrandenburg.com

http://sapdesignguild.org

Thank You (we’re around all week)

Office Hours: 12:30 Thursday

Andy: @andydavieshello@andydavies.me

Tobias: @tbaldaufkontakt@tobias-baldauf.de