Web Page Test - Beyond the Basics

50 %
50 %
Information about Web Page Test - Beyond the Basics

Published on October 4, 2012

Author: AndyDavies

Source: slideshare.net


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

Web Page Test - Beyond the Basics @aaronpeters & @andydavies Velocity Europe Oct 2012 http://www.flickr.com/photos/jlakliche/2305075743Thursday, 4 October 2012

http://www.flickr.com/photos/capcase/4970062156Thursday, 4 October 2012

New stuff in the UI… http://www.flickr.com/photos/wlodi/3085152649Thursday, 4 October 2012

Homepage > Advanced tabThursday, 4 October 2012

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

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 file 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.flickr.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.flickr.com/photos/kindofindie/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.flickr.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 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

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 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.flickr.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.flickr.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.flickr.com/photos/brianauer/2197218356Thursday, 4 October 2012

Aaron: Andy: @aaronpeters @andydavies aaron@turbobytes.com andy@asteno.com http://www.flickr.com/photos/auntiep/5024494612Thursday, 4 October 2012

‘Hidden’ API Gems http://www.flickr.com/photos/mariannedewit/3673379501Thursday, 4 October 2012

Email when test completes &notify=theboss@whitehouse.orgThursday, 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

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

Web Performance Tricks - Beyond the Basics - SitePoint

Learn about some less known web performance techniques. ... Web Performance Tricks – Beyond the Basics ... If you’d like to test it out immediately, ...
Read more

10 BEYOND THE BASICS - pitt.edu

... PowerPoint Beyond the Basics ... from one Web site to another, from a Web page to your E ... You are going to prepare a simple test about the U.S ...
Read more

Web Development with Adobe Dreamweaver CS5.5: Beyond the ...

Web Development with Adobe ... Test on Internet Explorer ... Web Development with Adobe Dreamweaver CS5.5 Page 5 of 7 Beyond the Basics: ...
Read more

Back to Basics: Structuring a Web Page with CSS and ASP ...

Back to Basics: Structuring a Web Page with CSS ... to make quick changes or to test a new ... can master new technologies like silver light and beyond.
Read more

ArcGIS for Engineers-Beyond the Basics: Web Maps and File ...

... Beyond the Basics: Web Maps and File ... www.SunCam.com Copyright 2015 Julie Coco Page 2 of 78 I. INTRODUCING WEB-BASED ... No test questions will ...
Read more

Beyond the Basics - Advanced Joomla Tutorials ~ Build a ...

... you can test and measure changes to your ... promoting those pages correctly throughout the web. ... right, Beyond the Basics includes a ...
Read more

In Introduction to HTTP Basics

HTTP (HyperText Transfer Protocol) Basics Introduction ... //www.ftp.org/docs/test.txt mailto: ... If you click a link from web page 1 to visit web page 2, ...
Read more

The web accessibility basics - Marco's Accessibility Blog

Continue reading "The web accessibility basics" ... How to use NVDA and Firefox to test your web ... Pinching to zoom something small on a web page is very ...
Read more

GIMP Intermediate: Free Graphic Design Beyond the Basics ...

GIMP intermediate topics to go beyond the basics of ... to add GIMP Intermediate: Free Graphic Design Beyond the ... to cover Web page development ...
Read more