Measuring web performance

• 1. Measuring Web Performance Patrick Meenan [email protected]@patmeenan

2. Types of Measurementvelocityconf.com/velocity2011/public/schedule/detail/18039 3. Measuring Web PerformanceSYNTHETIC TESTING 4. Active Testing Consistent results Good for detecting and diagnosing issues that are 100% repeatableand on pages you are monitoring Lots of detail Availability monitoring Not representative of actual end-userperformance Usually tested from data centers Sometimes co-located with CDN providerequipment 5. Bandwidth/Latency Impact(Fixed 60ms RTT) (Fixed 5Mbps Bandwidth) 5 www.belshe.com/2010/05/24/more-bandwidth-doesnt-matter-much/ 6. US Broadband Latency WebPagetest DSLWebPagetest CableWebPagetest FIOS Backbone6www.fcc.gov/document/measuring-broadband-america-report-consumer-broadband-performance-us 7. Actual UsersBackboneTesting 7 8. DSL Back-End: 17%Backbone Back-End: 52%8 9. Mac Traffic Shaping OS X Lion + Xcode 4.1 Cable, DSL, 3G, Edge, WiFi and Custom GUI for dummynet (which has been available for a while)osxdaily.com/2011/08/10/simulate-internet-connectivity-bandwidth-speeds-network-link-conditioner/ 10. Synthetic Browsers Know HOW your active testing is done Some only test the base page Synthetic browsers usually not reflective of realbrowser Real browser testing Connectivity (backbone, last-mile) www.engadget.com Synthetic Browser: 447 requests IE 8: 241 requests 11. Measuring Web PerformanceREAL USER MONITORING (RUM) 12. Real User Monitoring (RUM) Full coverage on all pages visited by users Real performance information for end-userexperience No availability monitoring No competitive reference Limited detail but getting better 13. Navigation Timingwindow.performance.timingIE 9+ChromeFirefox 9+Android 4+ Front-EndBack-End13dvcs.w3.org/hg/webperf/raw-file/tip/specs/NavigationTiming/Overview.html 14. Resource Timing (draft)Timing for every network-loaded resourcew3c-test.org/webperf/specs/ResourceTiming/ 15. Back-End Only 16. Access Logs Overall Response Times - %D (Apache) Custom variables (app-specific timings) Logster + graphite = graphs Lots of data-mining opportunities Broken links/content (404s with useful referer information) Mike Brittain (Etsy) Presentation http://www.slideshare.net/mikebrittain/web-performance-culture-and-tools-at-etsy-11159635 17. Measuring Web PerformanceTHE METRICS 18. When is Done?Easy answer is onLoadBut 19. When is Done?Twitter onLoad (2.4s) Twitter end of activity (8.2s) 20. 2 Pages, Identical Performance 21. http://youtu.be/Ipk1k_IobYg 22. Start Render Identical 23. Load TimeIdentical 24. Last Visual ChangeIdentical 25. Visual Completeness 26. Measuring Web PerformanceINTRODUCING 27. The Speed IndexThe user experience of A was 7.4 times faster than B sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index 28. Amazon.com vs. Twitter 29. Amazon vs. TwitterAmazonTwitterSpeed Index 15016014 (+300%)onload2.4 2.4Fully Loaded6.4 8.2 (+28%)www.webpagetest.org/video/view.php?id=120414_22f2206da973b41621c499e2be01d555cdac6ab0&bare=1 30. Measuring Web PerformanceWHATS NEW IN WEBPAGETEST 31. New Waterfall UINav Timing domContentLoaded(Firefox/Chrome)Nav Timing load event(Firefox/Chrome) Pop-up request details 32. Dependencies (Chrome)Line of code thatTriggered request 33. Response Bodies 34. Dev Tools Timeline (Chrome) 35. Dev Tools Timeline (Chrome) 36. Creating Videos 37. Creating Videos (cont)Customize:- End Point/Times- Specific Run- First/Repeat View- Labelswww.webpagetest.org/video/compare.php?tests=120416_QX_3ZKFP%2C120416_DR_3ZKFJ&bare=1 38. SPOF Demonstratingwww.webpagetest.org/video/view.php?id=120416_d635d742a17d7eecf57df6282bcea87f5de2322c&bare=1 39. Custom viewport sizeChrome/Firefox 40. EC2 AMIsIE 7m1.small orIE 8c1.mediumIE 9, Chrome, Firefox (single image) 41. News/Updates Twitter:@patmeenan [email protected] WebPagetest Forumshttp://www.webpagetest.org/forums/