Using WebPageTest @AndyDavies London Web Performance, May 2016

http://webpagetest.org

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

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

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

Mobile is a bit more involved

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

Repeat View - check for effective caching

But what can it do beyond that?

No content

Advanced Settings…

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

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

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

What happens when a 3rd Party Breaks?

Site to check Host to ‘blackhole’

http://man.gl/1PEz4Au

What’s the impact of 3rd Parties?

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

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

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

No content

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

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

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)

http://man.gl/1PnD9FE

Beyond simple single page tests

Scripting

Searching Google

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

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

Use DevTools to identify elements

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

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

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

Type ahead searches?

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

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

No content

No content

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();

No content

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)

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

Using the API

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

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

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

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

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" } }

{ "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

{ "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

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

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

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

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

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

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

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

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

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

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

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

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.

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.

Thanks! @AndyDavies [email protected] P.S. Don’t forget to buy a copy of http://usingwpt.com