Web Page Test - Beyond the Basics

Web Page Test -
Beyond the Basics

@aaronpeters & @andydavies

Velocity Europe
Oct 2012

http://www.ﬂickr.com/photos/jlakliche/2305075743
Thursday, 4 October 2012

http://www.ﬂickr.com/photos/capcase/4970062156

New stuff in the UI…

http://www.ﬂickr.com/photos/wlodi/3085152649

Homepage > Advanced tab


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!


Disable Compatibility View

IE only:

Does the page load/render faster in Standards mode?

<meta http-equiv="X-UA-Compatible" content="IE=8" />


Capture Network Log (Chrome)

Returns big TXT ﬁle 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


Minimum test duration

Make sure things that happen after onload are captured

It works… kindof…

Entered 45, test ran for 35 seconds!


What happens when one of
the UK’s largest ISPs has
“routing problems”?
http://www.ﬂickr.com/photos/alexmartin81/4548775140

“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

‘Blackhole’ Third-Party Requests


Impact on The Telegraph…

cg-global.maxymiser.com
unreachable http://bit.ly/Ncy7Rd

The Problem Script

_t._d.write(px ? '<img id="' + id + '"
src="' + uri + '"/>' : '<scr' + 'ipt
id="' + id + '" type="' + tp + '"
charset="utf-8" src="' + uri + '"></
scr' + 'ipt>')

http://s.telegraph.co.uk/maxymiser/production/js/mmcore.js


How much time do all those
third-party components add?
http://www.ﬂickr.com/photos/kindoﬁndie/4099768084

Specify Requests to be Blocked


Is it quicker?


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

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

But… Numbers may not tell the Whole Story


Scripting

http://www.ﬂickr.com/photos/symphoney/76513801

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

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.


Logging in

1. Go to login page
2. Enter credentials in a web form
3. Submit the form

Time how long the process takes


The WPT Script

combineSteps
navigate https://zakelijk.vodafone.nl
setValue name=username xxxxxxxxxxxx
setValue name=password xxxxxxxxxxxx
submitForm name=login


Result


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

SetDOMElement (IE only)

How long does it take for the element to appear?

setDOMElement id=MyVodafone
navigate http://www.vodafone.nl


Responsive design / media queries

Do those media queries work as expected?

Case: loading two font ﬁles only on iPad/desktop

setViewportSize 480 800
navigate http://www.turbobytes.com/products/optimizer/

setViewportSize 800 800
navigate http://www.turbobytes.com/products/optimizer/


Perf impact of font ﬁles is ...

Chrome 800px 1.19 sec

Chrome 480px 1.13 sec

iPhone iOS 5.1 480px 1.28 sec *

* wiﬁ, not DSL

Why did the test fail?

Can be very hard to troubleshoot, especially for large
scripts!


Look ma, there’s an API!
http://www.ﬂickr.com/photos/ianus/121448487

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


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


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>

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


Check Test Status

…/testStatus.php?f=xml&
test=test_id


Check Test Status - Response

<response>
<script/>
<statusText>Test Pending</statusText>
<data>
<statusText>Test Pending</statusText>
<testId>120928_0_G</testId>
<runs>1</runs>
<fvonly>0</fvonly>
<location>Europe</location>
</data>
</response>


Get the Results

…/xmlResult/test_id/
<response>
<script/>
<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>
…

So what can we build with the
API?

http://www.ﬂickr.com/photos/13965522@N00/3922937189

Track how the web is built…


Synthetic Monitoring

wptmonitor.org

With Waterfalls


Continuous Integration


Be a Web Page Test Hero!

http://www.ﬂickr.com/photos/brianauer/2197218356

Aaron: Andy:

@aaronpeters @andydavies
aaron@turbobytes.com andy@asteno.com

http://www.ﬂickr.com/photos/auntiep/5024494612

‘Hidden’ API Gems

http://www.ﬂickr.com/photos/mariannedewit/3673379501

Email when test completes

&notify=theboss@whitehouse.org


Level of compression in images and video

&iq=90

Specify jpeg compression level (30-10095) for
screen shots and video capture


Full resolution screenshots

&pngss=1

1 = save a full-resolution version of fully loaded
screen shot as a png


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!


console.log() output


Time to <title>

Not in UI, but ís in results from API: <titleTime>

Can also be found in “Raw Page data” CSV


Web Page Test - Beyond the Basics

Web Page Test - Beyond the Basics

Recommended

More Related Content

What's hot

What's hot(20)

Viewers also liked

Viewers also liked(20)

Similar to Web Page Test - Beyond the Basics

Similar to Web Page Test - Beyond the Basics(20)

More from Andy Davies

More from Andy Davies(18)

Recently uploaded

Recently uploaded(20)

Web Page Test - Beyond the Basics