Web Page Test - Beyond the Basics
54 likes17,582 views
The document discusses advanced aspects of web page testing with a focus on performance optimization and various testing techniques. It highlights the impact of JavaScript, third-party requests, and user interactions on page load times, as well as scripting commands available for simulating testing environments. Additionally, it covers the use of APIs for submitting tests and retrieving results, with examples and potential issues in testing outcomes.
More Related Content
Similar to Web Page Test - Beyond the Basics (20)
Web Page Test - Beyond the Basics
- 1. Web Page Test - Beyond the Basics @aaronpeters & @andydavies Velocity Europe Oct 2012 http://www.flickr.com/photos/jlakliche/2305075743 Thursday, 4 October 2012
- 2. http://www.flickr.com/photos/capcase/4970062156 Thursday, 4 October 2012
- 3. New stuff in the UI… http://www.flickr.com/photos/wlodi/3085152649 Thursday, 4 October 2012
- 4. Homepage > Advanced tab Thursday, 4 October 2012
- 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. 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. Capture Network Log (Chrome) Returns big TXT file 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 Thursday, 4 October 2012
- 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. What happens when one of the UK’s largest ISPs has “routing problems”? http://www.flickr.com/photos/alexmartin81/4548775140 Thursday, 4 October 2012
- 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.html Thursday, 4 October 2012
- 11. ‘Blackhole’ Third-Party Requests Thursday, 4 October 2012
- 12. Impact on The Telegraph… cg-global.maxymiser.com unreachable http://bit.ly/Ncy7Rd Thursday, 4 October 2012
- 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.js Thursday, 4 October 2012
- 14. How much time do all those third-party components add? http://www.flickr.com/photos/kindofindie/4099768084 Thursday, 4 October 2012
- 15. Specify Requests to be Blocked Thursday, 4 October 2012
- 16. Is it quicker? Thursday, 4 October 2012
- 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 Normal Thursday, 4 October 2012
- 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 Normal Thursday, 4 October 2012
- 19. But… Numbers may not tell the Whole Story Thursday, 4 October 2012
- 20. Scripting http://www.flickr.com/photos/symphoney/76513801 Thursday, 4 October 2012
- 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/scripting Thursday, 4 October 2012
- 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. Logging in 1. Go to login page 2. Enter credentials in a web form 3. Submit the form Time how long the process takes Thursday, 4 October 2012
- 24. The WPT Script combineSteps navigate https://zakelijk.vodafone.nl setValue name=username xxxxxxxxxxxx setValue name=password xxxxxxxxxxxx submitForm name=login Thursday, 4 October 2012
- 25. Result Thursday, 4 October 2012
- 26. 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 Thursday, 4 October 2012
- 27. SetDOMElement (IE only) How long does it take for the element to appear? setDOMElement id=MyVodafone navigate http://www.vodafone.nl Thursday, 4 October 2012
- 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. 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 DSL Thursday, 4 October 2012
- 30. Why did the test fail? Can be very hard to troubleshoot, especially for large scripts! Thursday, 4 October 2012
- 31. Look ma, there’s an API! http://www.flickr.com/photos/ianus/121448487 Thursday, 4 October 2012
- 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 priority Thursday, 4 October 2012
- 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-apis Thursday, 4 October 2012
- 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. 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 Thursday, 4 October 2012
- 36. Check Test Status …/testStatus.php?f=xml& test=test_id Thursday, 4 October 2012
- 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. 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. So what can we build with the API? http://www.flickr.com/photos/13965522@N00/3922937189 Thursday, 4 October 2012
- 40. Track how the web is built… Thursday, 4 October 2012
- 41. Synthetic Monitoring wptmonitor.org Thursday, 4 October 2012
- 42. With Waterfalls Thursday, 4 October 2012
- 43. Continuous Integration Thursday, 4 October 2012
- 44. Be a Web Page Test Hero! http://www.flickr.com/photos/brianauer/2197218356 Thursday, 4 October 2012
- 45. Aaron: Andy: @aaronpeters @andydavies [email protected] [email protected] http://www.flickr.com/photos/auntiep/5024494612 Thursday, 4 October 2012
- 46. ‘Hidden’ API Gems http://www.flickr.com/photos/mariannedewit/3673379501 Thursday, 4 October 2012
- 47. Email when test completes &[email protected] Thursday, 4 October 2012
- 48. Level of compression in images and video &iq=90 Specify jpeg compression level (30-10095) for screen shots and video capture Thursday, 4 October 2012
- 49. Full resolution screenshots &pngss=1 1 = save a full-resolution version of fully loaded screen shot as a png Thursday, 4 October 2012
- 50. 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! Thursday, 4 October 2012
- 51. console.log() output Thursday, 4 October 2012
- 52. Time to <title> Not in UI, but ís in results from API: <titleTime> Can also be found in “Raw Page data” CSV Thursday, 4 October 2012