web performance workshop - velocity london 2013
TRANSCRIPT
![Page 1: Web Performance Workshop - Velocity London 2013](https://reader036.vdocument.in/reader036/viewer/2022062418/554e8190b4c905f66a8b554f/html5/thumbnails/1.jpg)
Hands on Web Performance Workshop
Andy Davies@andydavies
Tobias Baldauf@tbaldauf
#VelocityConf London 2013
![Page 2: Web Performance Workshop - Velocity London 2013](https://reader036.vdocument.in/reader036/viewer/2022062418/554e8190b4c905f66a8b554f/html5/thumbnails/2.jpg)
We’re planning to cover
● Tools● Techniques● Live Analysis
But…
![Page 3: Web Performance Workshop - Velocity London 2013](https://reader036.vdocument.in/reader036/viewer/2022062418/554e8190b4c905f66a8b554f/html5/thumbnails/3.jpg)
…this session is about
YOUso feel free to jump in with questions
![Page 4: Web Performance Workshop - Velocity London 2013](https://reader036.vdocument.in/reader036/viewer/2022062418/554e8190b4c905f66a8b554f/html5/thumbnails/4.jpg)
What sites should we test?
http://man.gl/londonworkshop
![Page 5: Web Performance Workshop - Velocity London 2013](https://reader036.vdocument.in/reader036/viewer/2022062418/554e8190b4c905f66a8b554f/html5/thumbnails/5.jpg)
Do you use WebPageTest?
![Page 6: Web Performance Workshop - Velocity London 2013](https://reader036.vdocument.in/reader036/viewer/2022062418/554e8190b4c905f66a8b554f/html5/thumbnails/6.jpg)
PhantomJS http://github.com/ariya/phantomjs/
![Page 7: Web Performance Workshop - Velocity London 2013](https://reader036.vdocument.in/reader036/viewer/2022062418/554e8190b4c905f66a8b554f/html5/thumbnails/7.jpg)
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
![Page 8: Web Performance Workshop - Velocity London 2013](https://reader036.vdocument.in/reader036/viewer/2022062418/554e8190b4c905f66a8b554f/html5/thumbnails/8.jpg)
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
![Page 9: Web Performance Workshop - Velocity London 2013](https://reader036.vdocument.in/reader036/viewer/2022062418/554e8190b4c905f66a8b554f/html5/thumbnails/9.jpg)
WebPagetest API
http://github.com/marcelduran/webpagetest-api
![Page 10: Web Performance Workshop - Velocity London 2013](https://reader036.vdocument.in/reader036/viewer/2022062418/554e8190b4c905f66a8b554f/html5/thumbnails/10.jpg)
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&req=1"
}
![Page 11: Web Performance Workshop - Velocity London 2013](https://reader036.vdocument.in/reader036/viewer/2022062418/554e8190b4c905f66a8b554f/html5/thumbnails/11.jpg)
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, [...]
![Page 12: Web Performance Workshop - Velocity London 2013](https://reader036.vdocument.in/reader036/viewer/2022062418/554e8190b4c905f66a8b554f/html5/thumbnails/12.jpg)
TAP & Jenkins Integration
![Page 13: Web Performance Workshop - Velocity London 2013](https://reader036.vdocument.in/reader036/viewer/2022062418/554e8190b4c905f66a8b554f/html5/thumbnails/13.jpg)
What if we want to test more
than one page?
![Page 14: Web Performance Workshop - Velocity London 2013](https://reader036.vdocument.in/reader036/viewer/2022062418/554e8190b4c905f66a8b554f/html5/thumbnails/14.jpg)
./sitespeed.io -u http://news.bbc.co.uk
![Page 15: Web Performance Workshop - Velocity London 2013](https://reader036.vdocument.in/reader036/viewer/2022062418/554e8190b4c905f66a8b554f/html5/thumbnails/15.jpg)
![Page 16: Web Performance Workshop - Velocity London 2013](https://reader036.vdocument.in/reader036/viewer/2022062418/554e8190b4c905f66a8b554f/html5/thumbnails/16.jpg)
![Page 17: Web Performance Workshop - Velocity London 2013](https://reader036.vdocument.in/reader036/viewer/2022062418/554e8190b4c905f66a8b554f/html5/thumbnails/17.jpg)
![Page 18: Web Performance Workshop - Velocity London 2013](https://reader036.vdocument.in/reader036/viewer/2022062418/554e8190b4c905f66a8b554f/html5/thumbnails/18.jpg)
![Page 19: Web Performance Workshop - Velocity London 2013](https://reader036.vdocument.in/reader036/viewer/2022062418/554e8190b4c905f66a8b554f/html5/thumbnails/19.jpg)
![Page 20: Web Performance Workshop - Velocity London 2013](https://reader036.vdocument.in/reader036/viewer/2022062418/554e8190b4c905f66a8b554f/html5/thumbnails/20.jpg)
Setup your own HTTP Archive…
Barbara Bermes - http://man.gl/1eHoyqB
![Page 21: Web Performance Workshop - Velocity London 2013](https://reader036.vdocument.in/reader036/viewer/2022062418/554e8190b4c905f66a8b554f/html5/thumbnails/21.jpg)
Lots of data!
![Page 22: Web Performance Workshop - Velocity London 2013](https://reader036.vdocument.in/reader036/viewer/2022062418/554e8190b4c905f66a8b554f/html5/thumbnails/22.jpg)
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
![Page 23: Web Performance Workshop - Velocity London 2013](https://reader036.vdocument.in/reader036/viewer/2022062418/554e8190b4c905f66a8b554f/html5/thumbnails/23.jpg)
![Page 24: Web Performance Workshop - Velocity London 2013](https://reader036.vdocument.in/reader036/viewer/2022062418/554e8190b4c905f66a8b554f/html5/thumbnails/24.jpg)
Sometimes bi-modal distributions
![Page 25: Web Performance Workshop - Velocity London 2013](https://reader036.vdocument.in/reader036/viewer/2022062418/554e8190b4c905f66a8b554f/html5/thumbnails/25.jpg)
![Page 26: Web Performance Workshop - Velocity London 2013](https://reader036.vdocument.in/reader036/viewer/2022062418/554e8190b4c905f66a8b554f/html5/thumbnails/26.jpg)
![Page 27: Web Performance Workshop - Velocity London 2013](https://reader036.vdocument.in/reader036/viewer/2022062418/554e8190b4c905f66a8b554f/html5/thumbnails/27.jpg)
![Page 28: Web Performance Workshop - Velocity London 2013](https://reader036.vdocument.in/reader036/viewer/2022062418/554e8190b4c905f66a8b554f/html5/thumbnails/28.jpg)
Commercial tools available too…
![Page 29: Web Performance Workshop - Velocity London 2013](https://reader036.vdocument.in/reader036/viewer/2022062418/554e8190b4c905f66a8b554f/html5/thumbnails/29.jpg)
![Page 30: Web Performance Workshop - Velocity London 2013](https://reader036.vdocument.in/reader036/viewer/2022062418/554e8190b4c905f66a8b554f/html5/thumbnails/30.jpg)
Let’s look at some live sites
![Page 31: Web Performance Workshop - Velocity London 2013](https://reader036.vdocument.in/reader036/viewer/2022062418/554e8190b4c905f66a8b554f/html5/thumbnails/31.jpg)
Performance isn’t just about load time
http://www.flickr.com/photos/jaxport/8554780980
![Page 32: Web Performance Workshop - Velocity London 2013](https://reader036.vdocument.in/reader036/viewer/2022062418/554e8190b4c905f66a8b554f/html5/thumbnails/32.jpg)
![Page 33: Web Performance Workshop - Velocity London 2013](https://reader036.vdocument.in/reader036/viewer/2022062418/554e8190b4c905f66a8b554f/html5/thumbnails/33.jpg)
Painting every 20ms!
![Page 34: Web Performance Workshop - Velocity London 2013](https://reader036.vdocument.in/reader036/viewer/2022062418/554e8190b4c905f66a8b554f/html5/thumbnails/34.jpg)
![Page 35: Web Performance Workshop - Velocity London 2013](https://reader036.vdocument.in/reader036/viewer/2022062418/554e8190b4c905f66a8b554f/html5/thumbnails/35.jpg)
![Page 36: Web Performance Workshop - Velocity London 2013](https://reader036.vdocument.in/reader036/viewer/2022062418/554e8190b4c905f66a8b554f/html5/thumbnails/36.jpg)
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
![Page 37: Web Performance Workshop - Velocity London 2013](https://reader036.vdocument.in/reader036/viewer/2022062418/554e8190b4c905f66a8b554f/html5/thumbnails/37.jpg)
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; }}
![Page 38: Web Performance Workshop - Velocity London 2013](https://reader036.vdocument.in/reader036/viewer/2022062418/554e8190b4c905f66a8b554f/html5/thumbnails/38.jpg)
![Page 39: Web Performance Workshop - Velocity London 2013](https://reader036.vdocument.in/reader036/viewer/2022062418/554e8190b4c905f66a8b554f/html5/thumbnails/39.jpg)
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;}
![Page 40: Web Performance Workshop - Velocity London 2013](https://reader036.vdocument.in/reader036/viewer/2022062418/554e8190b4c905f66a8b554f/html5/thumbnails/40.jpg)
Lessons learnedWorking in web performance is as much about educating as optimizing.
Choose your battles
http://josefbrandenburg.com
http://sapdesignguild.org
![Page 41: Web Performance Workshop - Velocity London 2013](https://reader036.vdocument.in/reader036/viewer/2022062418/554e8190b4c905f66a8b554f/html5/thumbnails/41.jpg)
Thank You (we’re around all week)
Office Hours: 12:30 Thursday
Andy: @[email protected]
Tobias: @[email protected]