LDNWebPerf May 2016 - Andy Davies

Transcript

1. Using WebPageTest
   @AndyDavies
   London Web Performance, May 2016
   

   View Slide

2. http://webpagetest.org
   

   View Slide

3. @patmeenan
   ▪ Web performance
   – Browser and OS activity
   ▪ Open source
   – Patrick Meenan
   – AOL 2008
   ▪ webpagetest.org
   – Public instance
   – Global infrastructure
   

   View Slide

4. http://usingwpt.com
   Aimed at Novices and Power Users
   Includes:
   Basics
   Getting started, running tests, understanding waterfall
   charts and the metrics WebPageTest captures
   Intermediate
   Picking the right test parameters, scripting multi-page tests
   and using your existing analytics data to help the decisions
   Advanced
   Using the API, integrating WebPageTest into build and CI
   processes, and setting up your own private instances
   

   View Slide

5. How it works (simplified)
   Poll for work, measure load and
   return results to server
   Load page / pages
   

   View Slide

6. Mobile is a bit more involved
   

   View Slide

7. http://man.gl/1PnErR2
   Video and filmstrip
   of page loading
   Waterfall
   Summary metrics
   

   View Slide

8. Repeat View - check for effective caching
   

   View Slide

9. But what can it do beyond that?
   

   View Slide

10. View Slide

11. Advanced Settings…
    

    View Slide

12. Shape network connection
    …is a whole another world
    Choose at least 3 runs
    

    View Slide

13. Create pcap for
    Wireshark etc.
    Inject custom headers
    e.g. Akamai debug
    Make tests run for longer
    e.g catch slow XHR requests
    http://man.gl/1UxalBe
    

    View Slide

14. Emulate mobile
    browsers
    Capture Chrome debugging info
    from remote browser
    Add command-line options -
    great for comparing HTTP/1.1
    vs HTTP/2
    Chrome only options
    http://man.gl/1UxetBe
    

    View Slide

15. What happens when a 3rd Party Breaks?
    

    View Slide

16. Site to check
    Host to ‘blackhole’
    

    View Slide

17. http://man.gl/1PEz4Au
    

    View Slide

18. What’s the impact of 3rd Parties?
    

    View Slide

19. Convert the list of domains into
    a space separated list
    (copy ‘n’ paste plus text editor)
    http://man.gl/1OcK1FM
    

    View Slide

20. curl 'http://www.webpagetest.org/domains.php?
    test=160429_5W_cbb3cdebf94050c7b08e49e596d89103&run=1&cached=0& f=json'
    |
    jq -rj '.domains.firstView[].domain + " "'
    |
    pbcopy
    Or grab domains in json and pipe through jq
    Copy to clipboard
    Extract domain names
    Get domain
    breakdown in JSON
    

    View Slide

21. Paste list of domains / urls to
    remove
    (Don’t forget to remove the site
    you’re testing from the block list)
    

    View Slide

22. View Slide

23. Doesn’t always go to plan!
    http://man.gl/1XGNjGi
    

    View Slide

24. But switching to Firefox
    With a bit of patience, and by adjusting the block list we can get there http://man.gl/1nLwRZe
    

    View Slide

25. Custom Metrics
    https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/custom-metrics
    Query DOM using JavaScript to
    create custom measurement
    (runs at very end of test)
    

    View Slide

26. http://man.gl/1PnD9FE
    

    View Slide

27. Beyond simple single page tests
    

    View Slide

28. Scripting
    

    View Slide

29. Searching Google
    

    View Slide

30. logData 0
    navigate http://google.co.uk
    setvalue id=lst-ib London Web Performance
    logData 1
    submitform id=tsf
    Searching Google
    

    View Slide

31. Results page only - http://man.gl/1PEEwn4
    Search and results page - http://man.gl/1PEEBak
    Waterfall for results page only
    Searching Google
    

    View Slide

32. Use DevTools to identify elements
    

    View Slide

33. How can we target this link?
    Sometimes there’s no obvious hook…
    

    View Slide

34. document.querySelector('.orb-nav-news a')
    JavaScript to the rescue!
    http://man.gl/1UxgOfy
    

    View Slide

35. JavaScript to the Rescue!
    http://man.gl/1PEGQdL
    logData 0
    navigate http://www.bbc.co.uk/
    logData 1
    execAndWait document.querySelector('.orb-nav-newsdotcom a').click();
    execAndWait - execute JS and wait for browser to complete activity
    exec - execute JS and don’t wait
    

    View Slide

36. Type ahead searches?
    

    View Slide

37. JQuery FTW! Honestly!
    logData 0
    navigate http://www.thetrainline.com
    exec document.getElementById('originStation').value='Cheltenham';
    exec $('#originStation').keydown();
    exec document.querySelectorAll('#originStation + div + ul > li > a')[0].click();
    Use JQuery’s keydown method
    JQuery must be already on the page
    

    View Slide

38. Debugging scripts can be hard!
    logData 0
    navigate http://www.thetrainline.com
    exec document.getElementById('originStation').value='Cheltenham';
    exec $('#originStation').keydown();
    exec document.querySelectorAll('#originStation + div + ul > li > a')[0].click();
    exec document.getElementById('destinationStation').value='Leeds';
    exec $('#destinationStation').keydown();
    exec document.querySelectorAll('#destinationStation + div + ul > li > a')[0].click();
    exec document.getElementById('isOneWay').checked='checked';
    logData 1
    execAndWait document.getElementById('submitButton').click();
    Script fails due to timing issues
    

    View Slide

39. View Slide

40. View Slide

41. execAndWait to the rescue!
    navigate http://www.thetrainline.com
    logData 0
    exec document.getElementById('originStation').value='Cheltenham';
    execAndWait $('#originStation').keydown();
    exec document.querySelectorAll('#originStation + div + ul > li > a')[0].click();
    exec document.getElementById('destinationStation').value='Leeds';
    execAndWait $('#destinationStation').keydown();
    exec document.querySelectorAll('#destinationStation + div + ul > li > a')[0].click();
    exec document.getElementById('isOneWay').checked='checked';
    logData 1
    execAndWait document.getElementById('submitButton').click();
    

    View Slide

42. View Slide

43. Authentication
    Basic Auth
    setHeader Authorization: Basic dGVzdDp0ZXN0
    navigate http://browserspy.dk/password-ok.php
    Set a Cookie
    setCookie http://www.example.com session=286755fad04869ca523320acce0dc6a4
    navigate http://www.example.com/
    Fill in a form (as per earlier form examples)
    base64(username + “:” + password)
    

    View Slide

44. Lots more detail on scripting in the docs:
    https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/scripting
    Debugging:
    - Use DevTools to check any DOM queries
    - Save response bodies in WPT (advanced tab) and manually inspect
    - Watch test execute on Private Instance
    - Adding sleep or switching to execAndWait can help
    

    View Slide

45. Using the API
    

    View Slide

46. http://www.webpagetest.org/getkey.php
    

    View Slide

47. Dulles_IE9
    Dulles_IE10
    Dulles_IE11
    Dulles:Chrome
    Dulles:Canary
    Dulles:Firefox
    Dulles:Firefox Nightly
    Dulles:Safari
    Dulles_Chrome40
    Dulles_MotoG:Motorola G - Chrome
    Dulles_MotoG:Motorola G - Chrome
    Beta
    Dulles_MotoG:Motorola G - Chrome Dev
    ec2-us-east-1:Chrome
    ec2-us-east-1:IE 11
    ec2-us-east-1:Firefox
    ec2-us-east-1:Safari
    ec2-us-west-1:Chrome
    ec2-us-west-1:IE 11
    ec2-us-west-1:Firefox
    ec2-us-west-1:Safari
    ec2-us-west-2:Chrome
    ec2-us-west-2:IE 11
    ec2-us-west-2:Firefox
    ec2-us-west-2:Safari
    ec2-eu-west-1:Chrome
    ec2-eu-west-1:IE 11
    ec2-eu-west-1:Firefox
    ec2-eu-west-1:Safari
    ec2-eu-central-1:Chrome
    ec2-eu-central-1:IE 11
    ec2-eu-central-1:Firefox
    ec2-eu-central-1:Safari
    ec2-ap-northeast-1:Chrome
    ec2-ap-northeast-1:IE 11
    ec2-ap-northeast-1:Firefox
    ec2-ap-northeast-1:Safari
    ec2-ap-southeast-1:Chrome
    ec2-ap-southeast-1:IE 11
    ec2-ap-southeast-1:Firefox
    ec2-ap-southeast-1:Safari
    ec2-ap-southeast-2:Chrome
    ec2-ap-southeast-2:IE 11
    ec2-ap-southeast-2:Firefox
    ec2-ap-southeast-2:Safari
    ec2-sa-east-1:Chrome
    ec2-sa-east-1:IE 11
    ec2-sa-east-1:Firefox
    ec2-sa-east-1:Safari
    Works with these public locations
    

    View Slide

48. http://www.webpagetest.org/runtest.php?mv=1&
    video=0&
    location=Dulles:Chrome&
    f=json&
    fvonly=1&
    k=A.a69f6e28fc64e15b8d330a700f104977&
    private=1&
    url=http://news.bbc.co.uk
    Submitting a test
    

    View Slide

49. Postman is handy for experimenting with RESTful APIs http://www.getpostman.com/
    

    View Slide

50. Get a response…
    {
    "statusCode": 200,
    "statusText": "Ok",
    "data": {
    "testId": "160205_N4_d2ea71c14d70c68bb0e3d30a88e59d76",
    "ownerKey": "b6a596f5ce4165ef9725bb91d9e4cec75e1f1d8c",
    "jsonUrl": "http://www.webpagetest.org/jsonResult.php?test=160205_N4_d2ea71c14d70c68bb0e3d30a88e59d76",
    "xmlUrl": "http://www.webpagetest.org/xmlResult/160205_N4_d2ea71c14d70c68bb0e3d30a88e59d76/",
    "userUrl": "http://www.webpagetest.org/result/160205_N4_d2ea71c14d70c68bb0e3d30a88e59d76/",
    "summaryCSV": "http://www.webpagetest.org/result/160205_N4_d2ea71c14d70c68bb0e3d30a88e59d76/page_data.csv",
    "detailCSV": "http://www.webpagetest.org/result/160205_N4_d2ea71c14d70c68bb0e3d30a88e59d76/requests.csv"
    }
    }
    

    View Slide

51. {
    "data": {
    "statusCode":100,
    "statusText":"Test Started 13 seconds ago",
    "id":"160205_N4_d2ea71c14d70c68bb0e3d30a88e59d76",
    "testInfo": {
    "url":"http:\/\/news.bbc.co.uk",
    "runs":1,
    "fvonly":1,
    .
    .
    .
    },
    "statusCode":100,
    "statusText":"Test Started 15 seconds ago"
    }
    Poll the JSON or XML URL
    

    View Slide

52. {
    "data": {
    "id":"160205_N4_d2ea71c14d70c68bb0e3d30a88e59d76",
    "url":"http:\/\/news.bbc.co.uk",
    "summary":"http:\/\/www.webpagetest.org\/results.php?test=160205_N4_d2ea71c14d70c68bb0e3d30a88...
    "testUrl":"http:\/\/news.bbc.co.uk",
    "location":"Dulles:Chrome",
    "from":"Dulles, VA - Chrome<\/b> - Cable<\/b>",
    "connectivity":"Cable",
    .
    .
    .
    },
    "statusCode":200,
    "statusText":"Test Complete"
    }
    Until the test completes
    

    View Slide

53. Data Galore!
    http://man.gl/1octXxj
    

    View Slide

54. Lots more detail on the API in the docs:
    https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/scripting
    Marcel Duran’s NodeJS API wrapper:
    https://github.com/marcelduran/webpagetest-api
    

    View Slide

55. Sometimes…
    Perhaps…
    You just want a quick and easy solution…
    

    View Slide

56. https://www.flickr.com/photos/craigmoulding/8399214678
    

    View Slide

57. https://github.com/andydavies/WPT-Bulk-Tester
    

    View Slide

58. Demo - http://man.gl/1UxjYjs
    

    View Slide

59. https://www.flickr.com/photos/beccaplusmolly/3287530838
    Bored with waiting for tests to run?
    

    View Slide

60. Run your own WPT instance
    (or use one of the commercial services)
    

    View Slide

61. Preconfigured AMIs = easy way to get started
    http://man.gl/1THSdot
    

    View Slide

62. My WPT Instance
    Mac Mini running VMware ESXi
    - Ubuntu 14.04 server
    - Win 7 agents
    

    View Slide

63. Not quite the same scale as Pat’s basement!
    https://twitter.com/patmeenan/status/702107267462782976
    

    View Slide

64. Relay mode
    Passes test to another WPT server
    and polls for results
    Piggyback on others infrastructure e.g. public agents,
    Useful for keeping results from ephemeral instances e.g. AWS
    Or to keep final results within firewall etc.
    

    View Slide

65. WebPageTest is really great tool
    You can use it for quick and simple testing
    but…
    If you take the time to experiment and learn, you can do a whole lot more.
    

    View Slide

66. Thanks!
    @AndyDavies hello@andydavies.me
    P.S. Don’t forget to buy a copy of http://usingwpt.com
    

    View Slide