The document discusses web performance testing, contrasting front-end and back-end processing while emphasizing the importance of synthetic and real user monitoring methods. It highlights the limitations of using synthetic browsers compared to actual users and addresses performance metrics through various means including navigation timing and resource timing. Additionally, it covers advanced testing options and automation in testing rich applications to improve web performance and detect issues effectively.

1. Web Performance Testing NoVa Test Automation Interest Group Patrick Meenan Twitter: @PatMeenan [email_address] blog.patrickmeenan.com

2. Front-End vs. Back-End

4. Back-End This is the HTML that largely contains the content of the page and defines the structure.

5. Front-End CSS : Layout and style Images Graphical Elements

6. Waterfall Diagram Base Page CSS Images and Graphical Elements Javascript Start Render Document Complete (onLoad)

7. Front-End vs Back-End Base Page Back-End Processing

8. Front-End: 3.2s* Back-End: 0.010s* *WebPagetest performance as measured by New Relic

9. Measuring Performance

10. velocityconf.com/velocity2011/public/schedule/detail/18039

11. Active Testing Consistent results Good for detecting and diagnosing issues that are 100% repeatable and on pages you are monitoring Lots of detail Availability monitoring Not representative of actual end-user performance Usually tested from data centers Sometimes co-located with CDN provider equipment

12. US Broadband Bandwidth www.fcc.gov/document/measuring-broadband-america-report-consumer-broadband-performance-us

13. US Broadband Latency www.fcc.gov/document/measuring-broadband-america-report-consumer-broadband-performance-us

14. Bandwidth/Latency Impact www.belshe.com/2010/05/24/more-bandwidth-doesnt-matter-much/ (Fixed 60ms RTT) (Fixed 5Mbps Bandwidth)

15. Backbone Testing Actual Users

16. DSL – Back-End: 17% Backbone – Back-End: 52%

17. When is “Done”? Easy answer is onLoad But…

18. When is “Done”? Twitter onLoad (1.9s) Twitter end of activity (6.8s)

19. Synthetic Browsers Know HOW your active testing is done Some only test the base page Synthetic browsers usually not reflective of real browser Real browser testing Connectivity (backbone, last-mile) www.engadget.com Synthetic Browser: 447 requests IE 8: 241 requests

20. Real User Monitoring (RUM) Full coverage on all pages visited by users Real performance information for end-user experience No availability monitoring Limited detail … but getting better

21. Navigation Timing – IE9, Chrome, Firefox 7 window.performance.timing dvcs.w3.org/hg/webperf/raw-file/tip/specs/NavigationTiming/Overview.html Front-End Back-End

22. Resource Timing (draft) w3c-test.org/webperf/specs/ResourceTiming/ Timing for every network-loaded resource

23. _gaq.push(['_trackPageLoadTime']);

26. Back-End Only

27. Frontend Single Point Of Failure

28. Asynchronous Javascript It’s not just good for web performance… <script type=&quot;text/javascript&quot; src=&quot;http://platform.twitter.com/widgets.js&quot;></script> vs. <script type=&quot;text/javascript&quot;> (function() { var tw = document.createElement('script'); tw.type = 'text/javascript'; tw.async = true; tw.src = 'http://platform.twitter.com/widgets.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(tw, s); })(); </script>

29. It prevents Frontend SPOF User stares at a blank window for 21 seconds (usually < 2 seconds)

30. What it feels like

31. Testing for Frontend SPOF blackhole.webpagetest.org (aka 72.66.115.13) Hosts file: 72.66.115.13 ajax.googleapis.com 72.66.115.13 apis.google.com 72.66.115.13 www.google-analytics.com 72.66.115.13 connect.facebook.net 72.66.115.13 platform.twitter.com WebPagetest.org: setDnsName platform.twitter.com blackhole.webpagetest.org navigate your.url.com

32. WebPagetest

33. The basics – testing “pages” www.webpagetest.org Submit an URL….

34. From multiple locations globally…

35. The basics – get “results” Performance and optimization information

36. What it looks like

37. What it looks like

38. What if…

39. Comparing arbitrary tests

40. The comparison

41. More advanced capabilities Automating Rich Applications Authenticating into form-protected applications Interacting with Web Apps (Mail, Calendar, etc) Testing a navigation flow from one page to another Execute arbitrary Javascript REALLY Advanced Options Re-writing DNS lookups (directing traffic to a test/staging box) Custom User-Agent strings & HTTP Headers Pre-populating cookies Custom test end conditions Capture Dynatrace Ajax Edition sessions Tcpdump capture

42. Private Instances http://sites.google.com/a/webpagetest.org/docs/private-instances Bulk Testing EC2 Agent Public AMI’s US (East/West) Europe Asia (Singapore/Tokyo) Public Projects HTTP Archive Blaze Mobitest

43. REST API Submit tests (API key required for public instance) Check status Fetch Result XML HAR http://sites.google.com/a/webpagetest.org/docs/advanced-features/webpagetest-restful-apis

44. WPT Monitor Tony Perkins (Sabre) http://www.webpagetest.org/forums/forumdisplay.php?fid=21

45. HTTP Archive http://httparchive.org/