Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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

YOU
so 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
http://github.com/macbre/phantomas

{
"url":"http://tobias.is",
"metrics":{
"requests":11,
"gzipRequests":2,
"po...
All together now!
#!/usr/bin/env bash
URL_to_measure="$1"

#!/usr/bin/env bats
@test "Time to first byte" {
[ "$timeToFirs...
WebPagetest API

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

{
"statusC...
SwissArmyKnife Results
"response": {
"statusCode": 200,
"statusText": "Ok",
"data": {
"testId": "131019_VF_1",
"summary": ...
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!
Import data into R
library(RMySQL)
drv = dbDriver('MySQL')
con = dbConnect(drv, user='user', password='password', dbname='...
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...
A Tale of CSS Checkbox Hacks
<input type="checkbox" id="toggle" />
<label for="toggle" class="toggle" onclick></label>
<ul...
Be neighborly
Adjacent sibling selector trumps general sibling selector
<input type="checkbox" id="toggle" />
<nav>
<label...
Lessons learned
Working in web performance is as much
about educating as optimizing.

Choose your battles

http://sapdesig...
Thank You (we’re around all week)
Andy:

@andydavies
hello@andydavies.me

Tobias:

@tbaldauf
kontakt@tobias-baldauf.de

Of...
Web Performance Workshop - Velocity London 2013
Web Performance Workshop - Velocity London 2013
Web Performance Workshop - Velocity London 2013
Web Performance Workshop - Velocity London 2013
Web Performance Workshop - Velocity London 2013
Web Performance Workshop - Velocity London 2013
Web Performance Workshop - Velocity London 2013
Web Performance Workshop - Velocity London 2013
Web Performance Workshop - Velocity London 2013
Web Performance Workshop - Velocity London 2013
Web Performance Workshop - Velocity London 2013
Web Performance Workshop - Velocity London 2013
Web Performance Workshop - Velocity London 2013
Web Performance Workshop - Velocity London 2013
Upcoming SlideShare
Loading in …5
×

Web Performance Workshop - Velocity London 2013

15,363 views

Published on

Published in: Technology, Business

Web Performance Workshop - Velocity London 2013

  1. 1. Hands on Web Performance Workshop Andy Davies @andydavies Tobias Baldauf @tbaldauf #VelocityConf London 2013
  2. 2. We’re planning to cover ● Tools ● Techniques ● Live Analysis But…
  3. 3. …this session is about YOU so feel free to jump in with questions
  4. 4. What sites should we test? http://man.gl/londonworkshop
  5. 5. Do you use WebPageTest?
  6. 6. PhantomJS http://github.com/ariya/phantomjs/
  7. 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. 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. 9. WebPagetest API http://github.com/marcelduran/webpagetest-api
  10. 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. 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. 12. TAP & Jenkins Integration
  13. 13. What if we want to test more than one page?
  14. 14. ./sitespeed.io -u http://news.bbc.co.uk
  15. 15. Setup your own HTTP Archive… Barbara Bermes - http://man.gl/1eHoyqB
  16. 16. Lots of data!
  17. 17. 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))
  18. 18. Sometimes bi-modal distributions
  19. 19. Commercial tools available too…
  20. 20. Let’s look at some live sites
  21. 21. Performance isn’t just about load time http://www.flickr.com/photos/jaxport/8554780980
  22. 22. Painting every 20ms!
  23. 23. 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
  24. 24. 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
  25. 25. 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; }
  26. 26. Lessons learned Working in web performance is as much about educating as optimizing. Choose your battles http://sapdesignguild.org http://josefbrandenburg.com
  27. 27. Thank You (we’re around all week) Andy: @andydavies hello@andydavies.me Tobias: @tbaldauf kontakt@tobias-baldauf.de Office Hours: 12:30 Thursday

×