Web Page Test -  Beyond the Basics @aaronpeters & @andydavies Velocity Europe Oct 2012                              http:/...
http://www.flickr.com/photos/capcase/4970062156Thursday, 4 October 2012
New stuff in the UI…                                         http://www.flickr.com/photos/wlodi/3085152649Thursday, 4 Octob...
Homepage > Advanced tabThursday, 4 October 2012
Disable JavaScript                 Is JS indeed the big performance culprit?                 Remove the JS from the page -...
Disable Compatibility View IE only: Does the page load/render faster in Standards mode? <meta http-equiv="X-UA-Compatible"...
Capture Network Log (Chrome)                           Returns big TXT file with JSON … then what?                         ...
Minimum test duration               Make sure things that happen after onload are captured               It works… kindof…...
What happens when one of           the UK’s largest ISPs has             “routing problems”?                           htt...
“Virgin Media Broadband ISP Users  Affected by Website Routing Woes”                                                      ...
‘Blackhole’ Third-Party RequestsThursday, 4 October 2012
Impact on The Telegraph…        cg-global.maxymiser.com              unreachable         http://bit.ly/Ncy7RdThursday, 4 O...
The Problem Script              _t._d.write(px ? <img id=" + id + "             src=" + uri + "/> : <scr + ipt            ...
How much time do all those     third-party components add?                           http://www.flickr.com/photos/kindofindi...
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                      ...
Repeat View (54 requests removed)             6          4.5             3          1.5             0                     ...
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    ...
Commands you’ll love  navigate                 Navigate to next page, wait for it to complete  logData                  Se...
Logging in            1. Go to login page            2. Enter credentials in a web form            3. Submit the form     ...
The WPT Script     combineSteps     navigate   https://zakelijk.vodafone.nl     setValue   name=username    xxxxxxxxxxxx  ...
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) ...
SetDOMElement (IE only)    How long does it take for the element to appear?      setDOMElement id=MyVodafone      navigate...
Responsive design / media queries    Do those media queries work as expected?    Case: loading two font files only on iPad/...
Perf impact of font files is ...           Chrome 800px           1.19 sec           Chrome 480px           1.13 sec       ...
Why did the test fail?        Can be very hard to troubleshoot, especially for large                              scripts!...
Look ma, there’s an API!                                  http://www.flickr.com/photos/ianus/121448487Thursday, 4 October 2...
Getting started…        1. Submit request via POST or GET        2. Poll for the test status (or use pingback)        3. F...
Create a Test …/runtest.php?f=xml&               location=Europe&               url=http://news.bbc.co.uk&               k...
Create a Test - Response <response>   <script/>   <statusCode>200</statusCode>   <statusText>Ok</statusText>   <data>     ...
Available Locations    /getLocations.php                              Idle   Total Being   High  Location                 ...
Check Test Status                       …/testStatus.php?f=xml&                                        test=test_idThursda...
Check Test Status - Response      <response>        <script/>        <statusCode>101</statusCode>        <statusText>Test ...
Get the Results    …/xmlResult/test_id/  <response>    <script/>    <statusCode>200</statusCode>    <statusText>Ok</status...
So what can we build with the               API?                           http://www.flickr.com/photos/13965522@N00/392293...
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 Oct...
Aaron:                 Andy:    @aaronpeters         @andydavies    aaron@turbobytes.com andy@asteno.com                  ...
‘Hidden’ API Gems                                     http://www.flickr.com/photos/mariannedewit/3673379501Thursday, 4 Octo...
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...
Full resolution screenshots                           &pngss=1     1 = save a full-resolution version of fully loaded     ...
JSON                               &f=json          By default you get XML, but its a JSON world          nowadays, right?...
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...
Upcoming SlideShare
Loading in...5
×

Web Page Test - Beyond the Basics

14,748

Published on

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

Published in: Technology
1 Comment
46 Likes
Statistics
Notes
No Downloads
Views
Total Views
14,748
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
0
Comments
1
Likes
46
Embeds 0
No embeds

No notes for slide

Web Page Test - Beyond the Basics

  1. 1. Web Page Test - Beyond the Basics @aaronpeters & @andydavies Velocity Europe Oct 2012 http://www.flickr.com/photos/jlakliche/2305075743Thursday, 4 October 2012
  2. 2. http://www.flickr.com/photos/capcase/4970062156Thursday, 4 October 2012
  3. 3. New stuff in the UI… http://www.flickr.com/photos/wlodi/3085152649Thursday, 4 October 2012
  4. 4. Homepage > Advanced tabThursday, 4 October 2012
  5. 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. 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. 7. 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
  8. 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. 9. What happens when one of the UK’s largest ISPs has “routing problems”? http://www.flickr.com/photos/alexmartin81/4548775140Thursday, 4 October 2012
  10. 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.htmlThursday, 4 October 2012
  11. 11. ‘Blackhole’ Third-Party RequestsThursday, 4 October 2012
  12. 12. Impact on The Telegraph… cg-global.maxymiser.com unreachable http://bit.ly/Ncy7RdThursday, 4 October 2012
  13. 13. 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
  14. 14. How much time do all those third-party components add? http://www.flickr.com/photos/kindofindie/4099768084Thursday, 4 October 2012
  15. 15. Specify Requests to be BlockedThursday, 4 October 2012
  16. 16. Is it quicker?Thursday, 4 October 2012
  17. 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 NormalThursday, 4 October 2012
  18. 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 NormalThursday, 4 October 2012
  19. 19. But… Numbers may not tell the Whole StoryThursday, 4 October 2012
  20. 20. Scripting http://www.flickr.com/photos/symphoney/76513801Thursday, 4 October 2012
  21. 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/scriptingThursday, 4 October 2012
  22. 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. 23. 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
  24. 24. The WPT Script combineSteps navigate https://zakelijk.vodafone.nl setValue name=username xxxxxxxxxxxx setValue name=password xxxxxxxxxxxx submitForm name=loginThursday, 4 October 2012
  25. 25. ResultThursday, 4 October 2012
  26. 26. 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
  27. 27. SetDOMElement (IE only) How long does it take for the element to appear? setDOMElement id=MyVodafone navigate http://www.vodafone.nlThursday, 4 October 2012
  28. 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. 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 DSLThursday, 4 October 2012
  30. 30. Why did the test fail? Can be very hard to troubleshoot, especially for large scripts!Thursday, 4 October 2012
  31. 31. Look ma, there’s an API! http://www.flickr.com/photos/ianus/121448487Thursday, 4 October 2012
  32. 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 priorityThursday, 4 October 2012
  33. 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-apisThursday, 4 October 2012
  34. 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. 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 0Thursday, 4 October 2012
  36. 36. Check Test Status …/testStatus.php?f=xml& test=test_idThursday, 4 October 2012
  37. 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. 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. 39. So what can we build with the API? http://www.flickr.com/photos/13965522@N00/3922937189Thursday, 4 October 2012
  40. 40. Track how the web is built…Thursday, 4 October 2012
  41. 41. Synthetic Monitoring wptmonitor.orgThursday, 4 October 2012
  42. 42. With WaterfallsThursday, 4 October 2012
  43. 43. Continuous IntegrationThursday, 4 October 2012
  44. 44. Be a Web Page Test Hero! http://www.flickr.com/photos/brianauer/2197218356Thursday, 4 October 2012
  45. 45. Aaron: Andy: @aaronpeters @andydavies aaron@turbobytes.com andy@asteno.com http://www.flickr.com/photos/auntiep/5024494612Thursday, 4 October 2012
  46. 46. ‘Hidden’ API Gems http://www.flickr.com/photos/mariannedewit/3673379501Thursday, 4 October 2012
  47. 47. Email when test completes &notify=theboss@whitehouse.orgThursday, 4 October 2012
  48. 48. Level of compression in images and video &iq=90 Specify jpeg compression level (30-10095) for screen shots and video captureThursday, 4 October 2012
  49. 49. Full resolution screenshots &pngss=1 1 = save a full-resolution version of fully loaded screen shot as a pngThursday, 4 October 2012
  50. 50. 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
  51. 51. console.log() outputThursday, 4 October 2012
  52. 52. 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

×