Published on October 4, 2012
Web Page Test - Beyond the Basics @aaronpeters & @andydavies Velocity Europe Oct 2012 http://www.ﬂickr.com/photos/jlakliche/2305075743Thursday, 4 October 2012
http://www.ﬂickr.com/photos/capcase/4970062156Thursday, 4 October 2012
New stuff in the UI… http://www.ﬂickr.com/photos/wlodi/3085152649Thursday, 4 October 2012
Homepage > Advanced tabThursday, 4 October 2012
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
Capture Network Log (Chrome) Returns big TXT ﬁle with JSON … then what? “You probably dont want to use the network log - it was added for the Chrome team themselves to debug the browser :-)” Pat MeenanThursday, 4 October 2012
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
What happens when one of the UK’s largest ISPs has “routing problems”? http://www.ﬂickr.com/photos/alexmartin81/4548775140Thursday, 4 October 2012
“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.htmlThursday, 4 October 2012
‘Blackhole’ Third-Party RequestsThursday, 4 October 2012
Impact on The Telegraph… cg-global.maxymiser.com unreachable http://bit.ly/Ncy7RdThursday, 4 October 2012
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.jsThursday, 4 October 2012
How much time do all those third-party components add? http://www.ﬂickr.com/photos/kindoﬁndie/4099768084Thursday, 4 October 2012
Specify Requests to be BlockedThursday, 4 October 2012
Is it quicker?Thursday, 4 October 2012
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 NormalThursday, 4 October 2012
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 NormalThursday, 4 October 2012
But… Numbers may not tell the Whole StoryThursday, 4 October 2012
Scripting http://www.ﬂickr.com/photos/symphoney/76513801Thursday, 4 October 2012
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/scriptingThursday, 4 October 2012
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
Logging in 1. Go to login page 2. Enter credentials in a web form 3. Submit the form Time how long the process takesThursday, 4 October 2012
The WPT Script combineSteps navigate https://zakelijk.vodafone.nl setValue name=username xxxxxxxxxxxx setValue name=password xxxxxxxxxxxx submitForm name=loginThursday, 4 October 2012
ResultThursday, 4 October 2012
How to set the value of a <select> ? Cant 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=contactFormCdnThursday, 4 October 2012
SetDOMElement (IE only) How long does it take for the element to appear? setDOMElement id=MyVodafone navigate http://www.vodafone.nlThursday, 4 October 2012
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/Thursday, 4 October 2012
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 DSLThursday, 4 October 2012
Why did the test fail? Can be very hard to troubleshoot, especially for large scripts!Thursday, 4 October 2012
Look ma, there’s an API! http://www.ﬂickr.com/photos/ianus/121448487Thursday, 4 October 2012
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 priorityThursday, 4 October 2012
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-apisThursday, 4 October 2012
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
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 0Thursday, 4 October 2012
Check Test Status …/testStatus.php?f=xml& test=test_idThursday, 4 October 2012
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
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
So what can we build with the API? http://www.ﬂickr.com/photos/13965522@N00/3922937189Thursday, 4 October 2012
Track how the web is built…Thursday, 4 October 2012
Synthetic Monitoring wptmonitor.orgThursday, 4 October 2012
With WaterfallsThursday, 4 October 2012
Continuous IntegrationThursday, 4 October 2012
Be a Web Page Test Hero! http://www.ﬂickr.com/photos/brianauer/2197218356Thursday, 4 October 2012
Aaron: Andy: @aaronpeters @andydavies email@example.com firstname.lastname@example.org http://www.ﬂickr.com/photos/auntiep/5024494612Thursday, 4 October 2012
‘Hidden’ API Gems http://www.ﬂickr.com/photos/mariannedewit/3673379501Thursday, 4 October 2012
Email when test completes ¬email@example.comThursday, 4 October 2012
Level of compression in images and video &iq=90 Specify jpeg compression level (30-10095) for screen shots and video captureThursday, 4 October 2012
Full resolution screenshots &pngss=1 1 = save a full-resolution version of fully loaded screen shot as a pngThursday, 4 October 2012
JSON &f=json By default you get XML, but its a JSON world nowadays, right?! Can’t get full results in JSON yet, but it’s promised!Thursday, 4 October 2012
console.log() outputThursday, 4 October 2012
Time to <title> Not in UI, but ís in results from API: <titleTime> Can also be found in “Raw Page data” CSVThursday, 4 October 2012
First Steps With WordPress. ... web pages, and the internet and ... Above and Beyond the Basics.
Chapter 5: Beyond the Basics ... stored as files and designed to be inserted into a document or web page. ... attendance, test scores) ...
Beyond the basics; SpecFlow eco ... Continue reading on the Getting Started page.) Now that you have the basics ... Handling test errors – boost your ...
Basic web page code with instructions for newbies. ... Here are some basic HTML tags that show how a web page is created. For a fast start, ...
Web Design Basics. When you're setting ... 5 Resources You Can Use To Test Your Website’s ... Plus there are other tools you will need to build Web pages ...
To get the basic NHibernate sample ... Although implementation examples of Fit tests are beyond the ... BasicSample.Tests/Web/WebSmokeTests.cs ...
HTML Geolocation HTML Drag/Drop HTML Local Storage HTML App Cache HTML Web Workers HTML SSE HTML Examples HTML Examples HTML Quiz HTML5 Quiz ... HTML Basic ...
A Basic Page Format. All pages follow this basic structure. Let’s start with the first tags you’re going to learn. Tags, eh? Yeah. They are the things ...
PHP Tutorial: First Page. ... The PHP code you write is replace in the resulting web page by the ... created your first PHP page and learned the basic ...