webpagetest - good, bad & ugly
DESCRIPTION
Presentation by @aaronpeters at Dutch Web Performance Meetup on August 22 2012. The presentation covers new stuff in WPT UI, the WPT API, scripting and hidden gems. Awesome tool, but also room for improvement.TRANSCRIPT
Using the WebPagetest APIWebPagetest:
The Good, The Bad & The Ugly
1 First … some basic tips
Understand the test environmentWindows version? DNS resolver?
Hardware specs (RAM, processor)?
Run a large number of tests
Collect RUM data too !
Summary statistics hide insight
Mean: ~1400 msMedian: ~1100 ms
Look at individual tests
Normal
Ouch!
New stuff in the WPT ui2
Homepage > Advanced tab
Capture Network Log (Chrome)Returns big TXT file with JSON … then what?
Pat: “You probably don't want to use the network log - it was added for the Chrome team themselves to debug the browser :-)”
Minimum test durationIt works, kindof ...
Example (minTestDur=45)
WPT API introduction3
Getting started
Get an API key from Pat (required)
Basic process:
1. Submit request via POST or GET
2. Poll for the test status (or use pingback)
3. Fetch test results
4. Fetch objects (charts, screen shots, ...)
Know your requests will have low prio /getLocations.php
Submitting requests
Send a POST or GET to http://www.webpagetest.org/runtest.php
url is only required parameter
Defaults: Dulles DSL, 1 run, first & repeat view, public, no video
Overview of parameters
Results
Example XML
It has it all, incl.
1. PageSpeed version & results
2. Page <title>
3. Links to pages/files for everything in UI
4. Video frame URLs & Speed Index score !
Documentation
Official API documentation
Python lib for ad-hoc batch processing
Batch processing command line tool
Scripting4
Lots of possibilities!
Navigation/DOM interaction (submitForm)
End Conditions (setDOMelement)
Request Manipulation (setDNS)
Misc (combineSteps)
Great for simulating user-page interaction, multi-page testing and different 'conditions'
https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/scripting
Example scripts
logData 0navigate http://www.gamesgames.com/logData 1navigate http://www.gamesgames.com/search.html?
search=bloons+4
SetDNSName cdn.domain.com www.domain.comoverrideHost cdn.domain.com www.domain.comnavigate www.domain.com
Commands you'll likely useCommand Descriptionnavigate Navigate to next page, wait for it to completelogData Set to 0 to not record anything; 1 = record!setValue Sets the value attribute of the given DOM element to the
provided value.submitForm Triggers a submit event for the identified form.setDOMElement Sets the attribute of a DOM element that is required for
the next event to complete successfully.block Blocks individual requests from loadingcombineSteps Causes multiple script steps to be combined into a single
"step" in the resultssetViewportSize Changes size of visible browser windowfirefoxPref Allows you to specify arbitrary preferences that will be
configured before launching the browser. Eg. firefoxPref network.http.pipelining false
setDNS Allows for overriding the IP address for a host name.
Why did the test fail?Can be very hard to troubleshoot, esp. on large scripts
5 WPT – hidden gems
&iq=90
Specify a jpeg compression level (30-10095) for the screen shots and video capture
iq=default
iq=90
Video!
&pngss=1
Set to 1 to save a full-resolution version of the fully loaded screen shot as a png
Normal JPG
Big PNG24
&f=json
Format. Set to "xml" to request an XML response instead of a redirect ("json" is also provisionally supported)
&plr=50
Packet loss rate - percent of packets to drop (used when specifying a custom connectivity profile)
plr=0
plr=50
No diff !Location specific issue?
console.log() outputCan be found on the screen shots page ...
Example
Time to TitleNot in UI, but ís in results from API: <titleTime>
Example
Can also be found in “Raw Page data” CSV
Closing remarks6
WPT can act … surprising
The documentation may not help out
It may drive you mad
Don't give up easily
Put some effort in!
Be the Success Kid!
