Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Measuring performance - Velocity 2016 Training

589 views

Published on

Presentation from the 2016 Velocity training on debugging front-end performance

Published in: Technology
  • Be the first to comment

Measuring performance - Velocity 2016 Training

  1. 1. DEBUGGING FRONT-END PERFORMANCE Tim Kadlec (@tkadlec) & Pat Meenan (@patmeenan) June 20-21, 2016 at Velocity Conference (#velocityconf)
  2. 2. MEASURING PERFORMANCE
  3. 3. velocityconf.com/velocity2011/public/schedule/detail/18039
  4. 4. Synthetic Testing
  5. 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
  6. 6. BANDWIDTH/LATENCY IMPACT www.belshe.com/2010/05/24/more-bandwidth-doesnt-matter-much/ (Fixed 60ms RTT) (Fixed 5Mbps Bandwidth)
  7. 7. US BROADBAND LATENCY www.fcc.gov/document/measuring-broadband-america-report-consumer-broadband-performance-us
  8. 8. DSL – Back-End: 17% Backbone – Back-End: 52%
  9. 9. CHROME DEV TOOLS
  10. 10. 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
  11. 11. http://facebook.github.io/augmented-traffic-control/ FACEBOOK ATC
  12. 12. • 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
  13. 13. MOBILE DEVICES VS EMULATION MotoG – 47s Emulated MotoG – 26s
  14. 14. GAMING SYNTHETIC TESTING
  15. 15. Real User Measurement (RUM)
  16. 16. • 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
  17. 17. 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
  18. 18. 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
  19. 19. performance.mark() performance.measure() USER TIMING velocityconf.com/velocity2011/public/schedule/detail/18039
  20. 20. SOASTA MPULSE
  21. 21. SOASTA MPULSE
  22. 22. NEWRELIC
  23. 23. Application Performance Measurement (APM)
  24. 24. COMMERCIAL
  25. 25. NEWRELIC
  26. 26. • 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!
  27. 27. ROLL YOUR OWN REPORTING codeascraft.com/2011/02/15/measure-anything-measure-everything/
  28. 28. Measuring the Visual Experience “SpeedIndex”
  29. 29. WHEN IS “DONE” Twitter onLoad (2.4s) Twitter end of activity (8.2s)
  30. 30. 2 PAGES, IDENTICAL PERFORMANCE
  31. 31. START RENDER Identical
  32. 32. LOAD TIME Identical
  33. 33. LAST VISUAL CHANGE Identical
  34. 34. VISUAL COMPLETENESS
  35. 35. sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index
  36. 36. AMAZON VS TWITTER
  37. 37. WebPageTest
  38. 38. Divining Waterfalls
  39. 39. POOR CACHING
  40. 40. SLOW BACK-END
  41. 41. BASE PAGE REDIRECT
  42. 42. SLOW BASE PAGE REDIRECT
  43. 43. RESOURCE ERRORS
  44. 44. DISABLED KEEP-ALIVE
  45. 45. SLOW, BLOCKING RESOURCE
  46. 46. LARGE RESOURCES
  47. 47. BANDWIDTH CONSTRAINED
  48. 48. SLOW DOM CONTENT LOADED HANDLER
  49. 49. LOTS OF REQUESTS
  50. 50. SLOW INITIAL PAINT
  51. 51. JAVASCRIPT EXECUTION CONSTRAINED
  52. 52. THANK YOU! Tim Kadlec (@tkadlec) & Pat Meenan (@patmeenan) June 20-21, 2016 at Velocity Conference (#velocityconf) Icons courtesy of The Noun Project

×