The document summarizes a hands-on web performance workshop. It discusses tools and techniques that will be covered, including live analysis of websites. Attendees are encouraged to ask questions and suggest sites to test. Various tools for performance testing like PhantomJS, Phantomas, and WebPageTest are introduced. The workshop also discusses integrating performance tests with TAP and Jenkins. Additional topics include processing performance data in R, looking at live sites, issues like unnecessary repainting, and lessons learned in web performance optimization.

1. Hands on Web
Performance Workshop
Andy Davies
@andydavies
Tobias Baldauf
@tbaldauf
#VelocityConf London 2013

2. We’re planning to cover
● Tools
● Techniques
● Live Analysis
But…

3. …this session is about
YOU
so feel free to jump in with questions

4. What sites should we test?
http://man.gl/londonworkshop

5. Do you use WebPageTest?

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

7. Phantomas
http://github.com/macbre/phantomas
{
"url":"http://tobias.is",
"metrics":{
"requests":11,
"gzipRequests":2,
"postRequests":0,
"redirects":0,
"notFound":0,
"timeToFirstByte":107,
"timeToLastByte":120,
"bodySize":151897,
"contentLength":206417,
[...]

8. All together now!
#!/usr/bin/env bash
URL_to_measure="$1"
#!/usr/bin/env bats
@test "Time to first byte" {
[ "$timeToFirstByte" -lt 200 ]
}
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
#1..3
ok 1 Time to first byte
ok 2 Number of HTTP requests
not ok 3 CSS size
# (in test file /test/webperf/performance-tests.bats, line 23)
@test "Number of HTTP requests" {
[ "$requests" -lt 30 ]
}
@test "CSS size" {
[ "$cssSize" -lt 15360 ]
}
http://github.com/technopagan/simple-website-speed-test

9. WebPagetest API
http://github.com/marcelduran/webpagetest-api

10. 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"
}

11. 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,
[...]

12. TAP & Jenkins Integration

13. What if we want
to test more
than one page?

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

20. Setup your own HTTP Archive…
Barbara Bermes - http://man.gl/1eHoyqB

21. Lots of data!

22. Import data into R
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;')
Plot histogram of requests / page
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))

24. Sometimes bi-modal distributions

28. Commercial tools available too…

30. Let’s look at some live sites

31. Performance isn’t just about load time
http://www.flickr.com/photos/jaxport/8554780980

33. Painting every 20ms!

36. 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

37. 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-purecss
body {
-webkit-animation: bugfix infinite 1s; /* here be dragons */
}
@-webkit-keyframes bugfix {
from {
white-space: default;
}
to {
white-space: normal;
}
}
http://bugs.webkit.org/show_bug.cgi?id=45168

39. Be neighborly
Adjacent 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;
}

40. Lessons learned
Working in web performance is as much
about educating as optimizing.
Choose your battles
http://sapdesignguild.org
http://josefbrandenburg.com

41. Thank You (we’re around all week)
Andy:
@andydavies
hello@andydavies.me
Tobias:
@tbaldauf
kontakt@tobias-baldauf.de
Office Hours: 12:30 Thursday