LDNWebPerf May 2016 - Andy Davies

Transcript

1. Using WebPageTest @AndyDavies London Web Performance, May 2016
2. http://webpagetest.org
3. @patmeenan ▪ Web performance – Browser and OS activity ▪ Open source – Patrick Meenan – AOL 2008 ▪ webpagetest.org – Public instance – Global infrastructure
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
5. How it works (simplified) Poll for work, measure load and return results to server Load page / pages
6. Mobile is a bit more involved
7. http://man.gl/1PnErR2 Video and filmstrip of page loading Waterfall Summary metrics
8. Repeat View - check for effective caching
9. But what can it do beyond that?
11. Advanced Settings…
12. Shape network connection …is a whole another world Choose at least 3 runs
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
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
15. What happens when a 3rd Party Breaks?
16. Site to check Host to ‘blackhole’
17. http://man.gl/1PEz4Au
18. What’s the impact of 3rd Parties?
19. Convert the list of domains into a space separated list (copy ‘n’ paste plus text editor) http://man.gl/1OcK1FM
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
21. Paste list of domains / urls to remove (Don’t forget to remove the site you’re testing from the block list)
23. Doesn’t always go to plan! http://man.gl/1XGNjGi
24. But switching to Firefox With a bit of patience, and by adjusting the block list we can get there http://man.gl/1nLwRZe
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)
26. http://man.gl/1PnD9FE
27. Beyond simple single page tests
28. Scripting
29. Searching Google
30. logData 0 navigate http://google.co.uk setvalue id=lst-ib London Web Performance logData 1 submitform id=tsf Searching Google
31. Results page only - http://man.gl/1PEEwn4 Search and results page - http://man.gl/1PEEBak Waterfall for results page only Searching Google
32. Use DevTools to identify elements
33. How can we target this link? Sometimes there’s no obvious hook…
34. document.querySelector('.orb-nav-news a') JavaScript to the rescue! http://man.gl/1UxgOfy
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
36. Type ahead searches?
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
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
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();
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)
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
45. Using the API
46. http://www.webpagetest.org/getkey.php
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
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
49. Postman is handy for experimenting with RESTful APIs http://www.getpostman.com/
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" } }
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
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 - <b>Chrome<\/b> - <b>Cable<\/b>", "connectivity":"Cable", . . . }, "statusCode":200, "statusText":"Test Complete" } Until the test completes
53. Data Galore! http://man.gl/1octXxj
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
55. Sometimes… Perhaps… You just want a quick and easy solution…
56. https://www.flickr.com/photos/craigmoulding/8399214678
57. https://github.com/andydavies/WPT-Bulk-Tester
58. Demo - http://man.gl/1UxjYjs
59. https://www.flickr.com/photos/beccaplusmolly/3287530838 Bored with waiting for tests to run?
60. Run your own WPT instance (or use one of the commercial services)
61. Preconfigured AMIs = easy way to get started http://man.gl/1THSdot
62. My WPT Instance Mac Mini running VMware ESXi - Ubuntu 14.04 server - Win 7 agents
63. Not quite the same scale as Pat’s basement! https://twitter.com/patmeenan/status/702107267462782976
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.
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.
66. Thanks! @AndyDavies hello@andydavies.me P.S. Don’t forget to buy a copy of http://usingwpt.com