WebPageTest is a great tool for testing and analysing how quickly web pages load.
Many people just use it as a simple testing tool, but it has advanced scripting capabilities for multi-page testing, completing forms etc.
It also has an API so performance testing can be integrated into Continuous Integration processes, used for monitoring and analysing how the web is built.
These slides explore some of these capabilities in more detail.
There are bonus slides after the "Thank You" slide
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Web Page Test - Beyond the Basics
1. Web Page Test -
Beyond the Basics
@aaronpeters & @andydavies
Velocity Europe
Oct 2012
http://www.flickr.com/photos/jlakliche/2305075743
Thursday, 4 October 2012
5. Disable JavaScript
Is JS indeed the big performance culprit?
Remove the JS from the page - no JS is loaded,
parsed or executed
Works very well!
Thursday, 4 October 2012
6. Disable Compatibility View
IE only:
Does the page load/render faster in Standards mode?
<meta http-equiv="X-UA-Compatible" content="IE=8" />
Thursday, 4 October 2012
7. Capture Network Log (Chrome)
Returns big TXT file with JSON … then what?
“You probably don't want to use the
network log - it was added for the Chrome
team themselves to debug the browser :-)”
Pat Meenan
Thursday, 4 October 2012
8. Minimum test duration
Make sure things that happen after onload are captured
It works… kindof…
Entered 45, test ran for 35 seconds!
Thursday, 4 October 2012
9. What happens when one of
the UK’s largest ISPs has
“routing problems”?
http://www.flickr.com/photos/alexmartin81/4548775140
Thursday, 4 October 2012
10. “Virgin Media Broadband ISP Users
Affected by Website Routing Woes”
ISP Review, May 26, 2012
Customer jcmm33 said:
“Same issue here as well, been like this all day. Sites like
autotrader.co.uk don’t appear to be accessible, others like
the telegraph.co.uk are waiting on other components to
download (content from sites like cg-global.maxymiser.com,
pixel.quantserve.com).”
http://www.ispreview.co.uk/index.php/2012/05/uk-virgin-media-broadband-isp-users-affected-by-website-routing-woes.html
Thursday, 4 October 2012
17. First View (65 requests removed)
6
4.5
3
1.5
0
Load Time First Byte Start Render Doc Complete Fully Loaded
Third-Party Requests Removed Normal
Thursday, 4 October 2012
18. Repeat View (54 requests removed)
6
4.5
3
1.5
0
Load Time First Byte Start Render Doc Complete Fully Loaded
Third-Party Requests Removed Normal
Thursday, 4 October 2012
19. But… Numbers may not tell the Whole Story
Thursday, 4 October 2012
20. Scripting
http://www.flickr.com/photos/symphoney/76513801
Thursday, 4 October 2012
21. Lots of possibilities!
Great for simulating user-page interaction, multi-page testing
and different 'conditions'
Navigation/DOM interaction submitForm
End Conditions setDOMelement
Request Manipulation setDNS
Misc combineSteps
https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/scripting
Thursday, 4 October 2012
22. Commands you’ll love
navigate Navigate to next page, wait for it to complete
logData Set to 0 to not record anything; 1 = record!
setValue Sets value attribute of given DOM element to
provided value.
submitForm Triggers a submit event for the identified form.
setDOMElement Sets attribute of a DOM element that is required
for the next event to complete successfully.
block Blocks individual requests from loading
combineSteps Causes multiple script steps to be combined into a
single "step" in the results
setViewportSize Changes size of visible browser window
setDNS Allows for overriding the IP address for a host
name.
Thursday, 4 October 2012
23. Logging in
1. Go to login page
2. Enter credentials in a web form
3. Submit the form
Time how long the process takes
Thursday, 4 October 2012
24. The WPT Script
combineSteps
navigate https://zakelijk.vodafone.nl
setValue name=username xxxxxxxxxxxx
setValue name=password xxxxxxxxxxxx
submitForm name=login
Thursday, 4 October 2012
26. How to set the value of a <select> ?
Can't use setValue
Solution: do it with exec or execAndWait (Chrome & Firefox only)
But: unusual waterfalls
navigate http://www.turbobytes.com/signup/
setValue name=name John
setValue name=email Allspaw
setValue name=url http://etsy.com
exec document.getElementById(“plan”).value = “Pro”;
submitForm name=contactFormCdn
Thursday, 4 October 2012
27. SetDOMElement (IE only)
How long does it take for the element to appear?
setDOMElement id=MyVodafone
navigate http://www.vodafone.nl
Thursday, 4 October 2012
28. Responsive design / media queries
Do those media queries work as expected?
Case: loading two font files only on iPad/desktop
setViewportSize 480 800
navigate http://www.turbobytes.com/products/optimizer/
setViewportSize 800 800
navigate http://www.turbobytes.com/products/optimizer/
Thursday, 4 October 2012
29. Perf impact of font files is ...
Chrome 800px 1.19 sec
Chrome 480px 1.13 sec
iPhone iOS 5.1 480px 1.28 sec *
* wifi, not DSL
Thursday, 4 October 2012
30. Why did the test fail?
Can be very hard to troubleshoot, especially for large
scripts!
Thursday, 4 October 2012
31. Look ma, there’s an API!
http://www.flickr.com/photos/ianus/121448487
Thursday, 4 October 2012
32. Getting started…
1. Submit request via POST or GET
2. Poll for the test status (or use pingback)
3. Fetch test results
4. Fetch objects (charts, screenshots, ...)
Want to use a public instance?
Need an API key
Tests will have low priority
Thursday, 4 October 2012
33. Create a Test
…/runtest.php?f=xml&
location=Europe&
url=http://news.bbc.co.uk&
k=myprivatekey
https://sites.google.com/a/webpagetest.org/docs/advanced-features/webpagetest-restful-apis
Thursday, 4 October 2012
34. Create a Test - Response
<response>
<script/>
<statusCode>200</statusCode>
<statusText>Ok</statusText>
<data>
<testId>120928_0_G</testId>
<ownerKey>4fa9bc3fdf1a54ba082a00b2a035879c231a5a1b</ownerKey>
<xmlUrl>http://velocity.webpagetest.org/xmlResult/120928_0_G/</
xmlUrl>
<userUrl>http://velocity.webpagetest.org/result/120928_0_G/</
userUrl>
<summaryCSV>http://velocity.webpagetest.org/result/120928_0_G/
page_data.csv</summaryCSV>
<detailCSV>http://velocity.webpagetest.org/result/120928_0_G/
requests.csv</detailCSV>
</data>
</response>
Thursday, 4 October 2012
35. Available Locations
/getLocations.php
Idle Total Being High
Location P1 P2 … P8 P9
Testers Tests Tested Priority
Europe_wptdriver:Chrome 2 0 0 0 0 0 … 0 0
Europe_wptdriver:Firefox 2 0 0 0 0 0 … 0 0
Europe 2 0 0 0 0 0 … 0 0
Thursday, 4 October 2012
36. Check Test Status
…/testStatus.php?f=xml&
test=test_id
Thursday, 4 October 2012
37. Check Test Status - Response
<response>
<script/>
<statusCode>101</statusCode>
<statusText>Test Pending</statusText>
<data>
<statusCode>101</statusCode>
<statusText>Test Pending</statusText>
<testId>120928_0_G</testId>
<runs>1</runs>
<fvonly>0</fvonly>
<location>Europe</location>
</data>
</response>
Thursday, 4 October 2012
38. Get the Results
…/xmlResult/test_id/
<response>
<script/>
<statusCode>200</statusCode>
<statusText>Ok</statusText>
<data>
<testId>120928_0_J</testId>
<summary>http://velocity.webpagetest.org/result/120928_0_J/</summa
<testUrl>http://news.bbc.co.uk</testUrl>
<location>Europe</location>
<connectivity>DSL</connectivity>
<bwDown>1500</bwDown>
<bwUp>384</bwUp>
…
Thursday, 4 October 2012
39. So what can we build with the
API?
http://www.flickr.com/photos/13965522@N00/3922937189
Thursday, 4 October 2012
40. Track how the web is built…
Thursday, 4 October 2012
46. ‘Hidden’ API Gems
http://www.flickr.com/photos/mariannedewit/3673379501
Thursday, 4 October 2012
47. Email when test completes
¬ify=theboss@whitehouse.org
Thursday, 4 October 2012
48. Level of compression in images and video
&iq=90
Specify jpeg compression level (30-10095) for
screen shots and video capture
Thursday, 4 October 2012
49. Full resolution screenshots
&pngss=1
1 = save a full-resolution version of fully loaded
screen shot as a png
Thursday, 4 October 2012
50. JSON
&f=json
By default you get XML, but it's a JSON world
nowadays, right?!
Can’t get full results in JSON yet, but it’s promised!
Thursday, 4 October 2012