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.

Client-Side Performance Monitoring (MobileTea, Rome)

218 views

Published on

Presentation given on Thursday, March 23, 2017 at MobileTea meetup in Rome, Italy.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Client-Side Performance Monitoring (MobileTea, Rome)

  1. 1. Effectively Monitoring Client-Side Performance MobileTea, Rome | @AndrewRota
  2. 2. 1. Client-Side Performance 2. Collect + Monitor 3. Effectively
  3. 3. Andrew Rota Software Engineer, . @AndrewRota . Boston, MA
  4. 4. Web Performance
  5. 5. Client-Side Web Performance
  6. 6. Measuring Performance
  7. 7. Navigation Render Additional Resources Interaction
  8. 8. Navigation Render Additional Resources Interaction
  9. 9. Navigation Render Additional Resources Interaction
  10. 10. Navigation Render Additional Resources Interaction
  11. 11. There’s no single metric for measuring web performance
  12. 12. Performance Metric Sources 1. Observational data 2. Browser devtools 3. Browser reported metrics
  13. 13. Observational Data
  14. 14. Performance Metric Sources 1. Observational data 2. Browser devtools 3. Browser reported metrics
  15. 15. Browser Profiling Metrics
  16. 16. Performance Metric Sources 1. Observational data 2. Browser devtools 3. Browser reported metrics
  17. 17. Performance Metric Sources 1. Observational data 2. Browser devtools 3. Browser reported metrics • Navigation Timing API • Paint metrics • Custom Metrics
  18. 18. Navigation Timing API
  19. 19. navigationStart responseStart responseEnd domInteractive domContentLoaded domComplete
  20. 20. Paint Metrics window.performance.timing.msFirstPaint window.chrome.loadTimes().firstPaintTime Internet Explorer Chrome
  21. 21. firstPaint
  22. 22. Custom Metrics window.performance.now()
  23. 23. Custom Metrics window.performance.mark(‘mainImageLoaded’) window.performance .getEntriesByName(‘mainImageLoaded’)[0] .startTime
  24. 24. mainImageLoaded tableSorted
  25. 25. Making Metrics Meaningful
  26. 26. Traditional Site Visit Lifecycle
  27. 27. Page 1 Page 2 Page 3 Page 4
  28. 28. But what about single page applications (SPAs)?
  29. 29. Page 1 Page 2 Page 3 Page 4
  30. 30. SPAs can improve performance, but complicate performance metrics
  31. 31. With SPAs, 1) instrument router actions, and 2) know that metrics won’t be 1:1.
  32. 32. Determine meaningful abstract metrics on top of low-level browser/app metrics
  33. 33. Can we automate, collect, and monitor these metrics?
  34. 34. 1. Client-Side Performance 2. Collect + Monitor 3. Effectively
  35. 35. 1. Real User Monitoring (RUM)
 2. Synthetic Collecting Performance Metrics
  36. 36. RUM Performance Metrics Users Collect Metrics
  37. 37. Sources for RUM Metrics 1. Observational data 2. Browser devtools 3. Browser reported metrics • Navigation Timing API • Paint metrics • Custom Metrics
  38. 38. Tools for RUM Metrics
  39. 39. Browser reported metrics Collect Metrics Send Metrics (XHR)
  40. 40. Tools for RUM Metrics • Custom JavaScript • Open source JS libraries • github.com/lognormal/boomerang • Third party monitoring services
 
 
 

  41. 41. Synthetic Performance Metrics Automated Test Collect Metrics
  42. 42. Sources for Synthetic Metrics 1. Observational data 2. Browser devtools 3. Browser reported metrics • Navigation Timing API • Paint metrics • Custom Metrics
  43. 43. Tools for Synthetic Performance Metrics Scheduler Browser + Test Runner
  44. 44. Schedulers • Cron
 
 
 
 
 
 
 > 0 * * * * /path/to/script.sh
  45. 45. Schedulers • Cron • Continuous integration server • Jenkins
 
 
 
 > 0 * * * * /path/to/script.sh
  46. 46. Synthetic test runners • Phantomas • Browser-Perf • WebPagetest • Lighthouse
 
 

  47. 47. Phantomas Headless Browsers
  48. 48. Phantomas > phantomas http://reddit.com {
 "metrics": {
 "requests": 73,
 "bodySize": 580491,
 "contentLength": 629382,
 "timeToFirstByte": 94,
 "timeToLastByte": 105,
 "DOMqueries": 247,
 "firstPaint": 0,
 "domInteractive": 215,
 "domContentLoaded": 213,
 "domContentLoadedEnd": 355,
 "domComplete": 792,
 "httpsRequests": [
 "https://www.reddit.com/",
 "https://www.redditstatic.com/reddit-init.en.qq9nT0inXvw.js",
 "https://www.redditstatic.com/reddit.en.xlHlxcJziiU.js",
 "https://www.redditstatic.com/reddit.ooBJpEoO9vY.css",
 "https://www.google-analytics.com/analytics.js"
 ]
 // … and more!
 }
 }
  49. 49. Phantomas > phantomas http://reddit.com {
 "metrics": {
 "requests": 73,
 "bodySize": 580491,
 "contentLength": 629382,
 "timeToFirstByte": 94,
 "timeToLastByte": 105,
 "DOMqueries": 247,
 "firstPaint": 0,
 "domInteractive": 215,
 "domContentLoaded": 213,
 "domContentLoadedEnd": 355,
 "domComplete": 792,
 "httpsRequests": [
 "https://www.reddit.com/",
 "https://www.redditstatic.com/reddit-init.en.qq9nT0inXvw.js",
 "https://www.redditstatic.com/reddit.en.xlHlxcJziiU.js",
 "https://www.redditstatic.com/reddit.ooBJpEoO9vY.css",
 "https://www.google-analytics.com/analytics.js"
 ]
 // … and more!
 }
 }
  50. 50. Phantomas > phantomas http://reddit.com {
 "metrics": {
 "requests": 73,
 "bodySize": 580491,
 "contentLength": 629382,
 "timeToFirstByte": 94,
 "timeToLastByte": 105,
 "DOMqueries": 247,
 "firstPaint": 0,
 "domInteractive": 215,
 "domContentLoaded": 213,
 "domContentLoadedEnd": 355,
 "domComplete": 792,
 "httpsRequests": [
 "https://www.reddit.com/",
 "https://www.redditstatic.com/reddit-init.en.qq9nT0inXvw.js",
 "https://www.redditstatic.com/reddit.en.xlHlxcJziiU.js",
 "https://www.redditstatic.com/reddit.ooBJpEoO9vY.css",
 "https://www.google-analytics.com/analytics.js"
 ]
 // … and more!
 }
 }
  51. 51. Phantomas > phantomas http://reddit.com {
 "metrics": {
 "requests": 73,
 "bodySize": 580491,
 "contentLength": 629382,
 "timeToFirstByte": 94,
 "timeToLastByte": 105,
 "DOMqueries": 247,
 "firstPaint": 0,
 "domInteractive": 215,
 "domContentLoaded": 213,
 "domContentLoadedEnd": 355,
 "domComplete": 792,
 "httpsRequests": [
 "https://www.reddit.com/",
 "https://www.redditstatic.com/reddit-init.en.qq9nT0inXvw.js",
 "https://www.redditstatic.com/reddit.en.xlHlxcJziiU.js",
 "https://www.redditstatic.com/reddit.ooBJpEoO9vY.css",
 "https://www.google-analytics.com/analytics.js"
 ]
 // … and more!
 }
 }
  52. 52. Browser-Perf
  53. 53. Browser-Perf > browser-perf http://reddit.com --selenium=selenium.example.com
  54. 54. Browser-Perf > browser-perf http://reddit.com --selenium=selenium.example.com
  55. 55. Browser-Perf > browser-perf http://reddit.com --selenium=selenium.example.com
  56. 56. Browser-Perf > browser-perf http://reddit.com --selenium=selenium.example.com
  57. 57. WebPagetest http://www.webpagetest.org/
  58. 58. WebPagetest http://www.webpagetest.org/
  59. 59. WebPagetest Can run on mobile devices
  60. 60. WPT: Speed Index Paint Time of “Above the Fold” Content ( ) Source: WebPagetest
  61. 61. Calculating Speed Index 1. Take the duration until the page is visually complete, above the fold 2. Separate it into 100ms intervals 3. For each interval, assign it a “percent visually complete” 4. Invert that percentage so it’s “percent incomplete” or “percent remaining” 5. Multiply that by the interval length (100ms) 6. Sum all of the intervals. Speed Index! Mobile viewport size will affect this metric!
  62. 62. Lighthouse
  63. 63. Lighthouse
  64. 64. Lighthouse + WPT?! https://github.com/WPO-Foundation/webpagetest/pull/825
  65. 65. Storage and Monitoring
  66. 66. • Aggregation • Data storage + queries • Visualization • Alerts + Notification Storing and Monitoring
  67. 67. Aggregation via StatsD
  68. 68. Storage + Queries with Graphite mySite.homepage.phantomas.domComplete
  69. 69. Visualization with Grafana
  70. 70. Visualization with Grafana Source: play.grafana.org/
  71. 71. 1. Client-Side Performance 2. Collect + Monitor 3. Effectively
  72. 72. Effective Monitoring • Reduce noise • Be aware of environment differences • Beware skewed data • Make data actionable • Utilize data
  73. 73. Reduce Noise • Isolate third party scripts and external services
 • Control conditional code paths (A/B tests, etc.)
  74. 74. Be aware of environment differences • Especially in mobile
 • Bandwidth differences • CPU/memory differences
  75. 75. Pyramid of Environment Parity Mock user agent Throttle network connection, CPU Device simulator Real device
  76. 76. Pyramid of Environment Parity Mock user agent Throttle network connection, CPU Device simulator Real device Accuracy Ease/Speed
  77. 77. Beware Skewed Data • Observer effect
 • Noisy neighbors
  78. 78. Make Data Actionable Know what changes will affect each of your metrics
  79. 79. Do something with this data!
  80. 80. Utilize Data • Agree on performance metrics • Agree on performance goals • Allocate time and resources to achieving these goals
  81. 81. Performance is a means to an end: Remember
  82. 82. Performance is a means to an end: user experience Remember
  83. 83. Andrew Rota, . @AndrewRota . Thanks! Recommend Resources • bit.ly/google_rails • bit.ly/webpagetest_docs • bit.ly/browser_perf • bit.ly/statsdcc • bit.ly/phantomas_js • graphite.readthedocs.io

×