Measuring performance - Velocity 2016 Training
•Download as PPTX, PDF•
2 likes•882 views
This document discusses various methods for measuring front-end performance, including synthetic testing, active testing, real user measurement, and measuring the visual experience. Synthetic testing provides consistent results but may not reflect actual user performance, while real user measurement captures real user experiences but with limited detail. The document also covers specific tools like Navigation Timing, Resource Timing, User Timing, SpeedIndex, and services from companies like Soasta, New Relic, and WebPageTest that can help with performance measurement.
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (19)
Similar to Measuring performance - Velocity 2016 Training
Similar to Measuring performance - Velocity 2016 Training (20)
More from Patrick Meenan
More from Patrick Meenan (18)
Recently uploaded
Recently uploaded (20)
Measuring performance - Velocity 2016 Training
- 1. DEBUGGING FRONT-END PERFORMANCE Tim Kadlec (@tkadlec) & Pat Meenan (@patmeenan) June 20-21, 2016 at Velocity Conference (#velocityconf)
- 5. • Consistent results o 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 ACTIVE TESTING velocityconf.com/velocity2011/public/schedule/detail/18039
- 7. BANDWIDTH/LATENCY IMPACT www.belshe.com/2010/05/24/more-bandwidth-doesnt-matter-much/ (Fixed 60ms RTT) (Fixed 5Mbps Bandwidth)
- 10. DSL – Back-End: 17% Backbone – Back-End: 52%
- 11. CHROME DEV TOOLS
- 12. NETWORK LINK CONDITIONER Cable, DSL, 3G, Edge, WiFi and Custom osxdaily.com/2011/08/10/simulate-internet-connectivity-bandwidth-speeds-network-link-conditioner/ OSX Lion + XCode
- 14. • Know HOW your active testing is done o Some only test the base page o Synthetic browsers usually not reflective of real browser o Real browser testing o Connectivity (backbone, last-mile) • www.engadget.com o Synthetic Browser: 447 requests o IE 8: 241 requests SYNTHETIC BROWSERS
- 15. MOBILE DEVICES VS EMULATION MotoG – 47s Emulated MotoG – 26s
- 18. • Full coverage on all pages visited by users • Real performance information for end-user experience • No availability monitoring • No competitive reference • Limited detail o … but getting better REAL USER MEASUREMENT velocityconf.com/velocity2011/public/schedule/detail/18039
- 19. NAVIGATION TIMING www.w3.org/TR/navigation-timing/ window.performance.timing IE 9+/Edge Chrome Firefox Opera Safari 8+ Android 4+ Safari iOS 9+ UC Browser
- 20. RESOURCE TIMING www.w3.org/TR/resource-timing/ IE 10+/Edge Chrome Firefox Opera Safari 8+ Android 4.4+ Safari iOS 9+ UC Browser window.performance.getEntriesByType("resource"); Timing for every network-loaded resource
- 26. SOASTA MPULSE
- 27. SOASTA MPULSE
- 28. NEWRELIC
- 30. COMMERCIAL
- 31. NEWRELIC
- 32. • Tons of “free” data: o Timestamp o Region (IP Lookup) o ISP (IP Lookup) o OS o Browser o Mobile Device o Page (Referer) • Add metrics as URL query params ACCESS LOGS FTW!
- 33. ROLL YOUR OWN REPORTING codeascraft.com/2011/02/15/measure-anything-measure-everything/
- 35. WHEN IS “DONE” Twitter onLoad (2.4s) Twitter end of activity (8.2s)
- 36. 2 PAGES, IDENTICAL PERFORMANCE
- 46. WebPageTest
- 49. POOR CACHING
- 50. SLOW BACK-END
- 52. SLOW BASE PAGE REDIRECT
- 53. RESOURCE ERRORS
- 56. LARGE RESOURCES
- 58. SLOW DOM CONTENT LOADED HANDLER
- 59. LOTS OF REQUESTS
- 62. THANK YOU! Tim Kadlec (@tkadlec) & Pat Meenan (@patmeenan) June 20-21, 2016 at Velocity Conference (#velocityconf) Icons courtesy of The Noun Project