$30 off During Our Annual Pro Sale. View Details »

Velocity 2013 Hands On Web Performance Workshop

Tobias Baldauf
November 13, 2013

Velocity 2013 Hands On Web Performance Workshop

Slides from the Hands On Web Performance Workshop given at Velocity Europe 2013 by Andy Davies (@andydavies) and me.

Tobias Baldauf

November 13, 2013
Tweet

More Decks by Tobias Baldauf

Other Decks in Technology

Transcript

  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 { "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
  8. All together now! #!/usr/bin/env bash URL_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..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) 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

  15. None
  16. None
  17. None
  18. None
  19. None
  20. Setup your own HTTP Archive… Barbara Bermes - http://man.gl/1eHoyqB

  21. Lots of data!

  22. 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
  23. None
  24. Sometimes bi-modal distributions

  25. None
  26. None
  27. None
  28. Commercial tools available too…

  29. None
  30. Let’s look at some live sites

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

  32. None
  33. Painting every 20ms!

  34. None
  35. None
  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-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; } }
  38. None
  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://josefbrandenburg.com http://sapdesignguild.org
  41. Thank You (we’re around all week) Office Hours: 12:30 Thursday

    Andy: @andydavies hello@andydavies.me Tobias: @tbaldauf kontakt@tobias-baldauf.de