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.

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

5. Do you use WebPageTest?
   

   View Slide

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

   View Slide

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
   

   View Slide

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
   

   View Slide

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

   View Slide

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&req=1"
    }
    

    View Slide

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

    View Slide

12. TAP & Jenkins Integration
    

    View Slide

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

    View Slide

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

    View Slide

15. View Slide

16. View Slide

17. View Slide

18. View Slide

19. View Slide

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

    View Slide

21. Lots of data!
    

    View Slide

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
    

    View Slide

23. View Slide

24. Sometimes bi-modal distributions
    

    View Slide

25. View Slide

26. View Slide

27. View Slide

28. Commercial tools available too…
    

    View Slide

29. View Slide

30. Let’s look at some live sites
    

    View Slide

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

    View Slide

32. View Slide

33. Painting every 20ms!
    

    View Slide

34. View Slide

35. View Slide

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
    

    View Slide

37. A Tale of CSS Checkbox Hacks
    
    
    
    Sictransit
    Gloriamundi
    
    #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;
    }
    }
    

    View Slide

38. View Slide

39. Be neighborly
    Adjacent sibling selector trumps general sibling selector
    
    
    
    
    Sictransit
    Gloriamundi
    
    
    #toggle:checked + nav .menu {
    display: block;
    }
    

    View Slide

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

    View Slide

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

    View Slide