1 of 47

WebPageTest - Beyond The Basics

@AndyDavies

5 Feb 2016

2 of 47

http://webpagetest.org

3 of 47

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

4 of 47

http://man.gl/1PnErR2

Video and filmstrip of page loading

Waterfall

Summary metrics

5 of 47

Repeat View - check for effective caching

6 of 47

But what can it do beyond that?

7 of 47

8 of 47

Advanced Settings…

9 of 47

…is a whole another world

Shape network connection

Choose at least 3 runs

10 of 47

Create pcap for Wireshark etc.

Inject custom headers

e.g. Akamai debug

Make tests run for longer

e.g catch slow XHR requests

11 of 47

Chrome only options

Emulate mobile browsers

Capture Chrome debugging info from remote browser

Add command-line options - great for comparing HTTP/1.1 vs HTTP/2

12 of 47

What happens when a 3rd Party Breaks?

13 of 47

Site to check

Host to ‘blackhole’

14 of 47

http://man.gl/1PEz4Au

15 of 47

What’s the impact of 3rd Parties?

16 of 47

Convert the list of domains into a space separated list�(copy ‘n’ paste plus text editor)

17 of 47

Paste list of domains / urls to remove

18 of 47

19 of 47

Doesn’t always go to plan!

But with patience, and by adjusting the block list we can get there http://man.gl/1nLwRZe

20 of 47

Custom Metrics

https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/custom-metrics

Query DOM using JavaScript to create custom measurement

21 of 47

http://man.gl/1PnD9FE

22 of 47

Beyond simple single page tests

23 of 47

Scripting

24 of 47

Searching Google

25 of 47

Searching Google

logData 0

navigate http://google.co.uk

setvalue id=lst-ib akamai

logData 1

submitform id=tsf

26 of 47

Searching Google

Results page only - http://man.gl/1PEEwn4

Search and results page - http://man.gl/1PEEBak

Waterfall for results page only

27 of 47

Use DevTools to identify elements

28 of 47

Sometimes there’s no obvious hook…

How can we target this link?

29 of 47

JavaScript to the rescue!

document.querySelector('.orb-nav-news a')

30 of 47

JavaScript to the Rescue!

Result 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

31 of 47

Debugging scripts can be hard!

navigate http://www.thetrainline.com

logData 0

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

32 of 47

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

33 of 47

Using the API

34 of 47

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

35 of 47

Works with these public locations

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

36 of 47

Submitting a test

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

37 of 47

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

38 of 47

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"

}

39 of 47

Poll the JSON or XML URL

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

40 of 47

Until the test completes

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

41 of 47

Data Galore!

http://man.gl/1octXxj

42 of 47

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

43 of 47

Sometimes…

You just want a quick and easy solution…

So how about a spreadsheet?

44 of 47

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

45 of 47

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

46 of 47

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.

47 of 47

Thanks!

@AndyDavies hello@andydavies.me

P.S. Don’t forget to buy a copy of http://usingwpt.com