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.
Effectively Monitoring
Client-Side Performance
Andrew Rota
Guidebook app: NEPHP2016
Effectively Monitoring
Client-Side Performance
NEPHP 2016 | @AndrewRota
1. Client-Side Performance
2. Collect + Monitor
3. Effectively
Andrew Rota
Software Engineer, .
@andrewrota
github.com/andrewrota
Boston, MA
Web Performance
Client-Side Web
Performance
Measuring
Performance
Navigation
Render
Additional
Resources
Interaction
Navigation
Render
Additional
Resources
Interaction
Navigation
Render
Additional
Resources
Interaction
Navigation
Render
Additional
Resources
Interaction
There’s no single metric
for measuring web
performance
Performance Metric Sources
1. Observational data
2. Browser devtools
3. Browser reported metrics
Observational Data
Performance Metric Sources
1. Observational data
2. Browser devtools
3. Browser reported metrics
Browser Profiling Metrics
Performance Metric Sources
1. Observational data
2. Browser devtools
3. Browser reported metrics
Performance Metric Sources
1. Observational data
2. Browser devtools
3. Browser reported metrics
• Navigation Timing API
•...
Navigation Timing API
Navigation Timing API
• navigationStart
• unloadEventStart
• unloadEventEnd
• redirectStart
• redirectEnd
• fetchStart
• d...
Navigation Timing API
• navigationStart - navigation initiated
• responseStart - first byte of doc from server
• responseEn...
navigationStart
responseStart
responseEnd
domInteractive
domContentLoaded
domComplete
Paint Metrics
window.performance.timing.msFirstPaint
window.chrome.loadTimes().firstPaintTime
Internet Explorer
Chrome
firstPaint
Custom Metrics
window.performance.now()
Custom Metrics
window.performance.mark(‘mainImageLoaded’)
window.performance
.getEntriesByName(‘mainImageLoaded’)[0]
.star...
mainImageLoaded
tableSorted
Making Metrics
Meaningful
Traditional Site Visit
Lifecycle
Page
1
Page
2
Page
3
Page
4
But what about single
page applications (SPAs)?
Page
1
Page
2
Page
3
Page
4
SPAs can improve
performance, but complicate
performance metrics
With SPAs, 1) write scripts
for actions, and 2) double
down on custom metrics.
Determine meaningful abstract metrics
on top of low-level browser/app metrics
Can we automate, collect,
and monitor these metrics?
1. Client-Side Performance
2. Collect + Monitor
3. Effectively
1. Real User Monitoring (RUM)

2. Synthetic
Collecting Performance Metrics
RUM Performance Metrics
Users Collect Metrics
Sources for RUM Metrics
1. Observational data
2. Browser devtools
3. Browser reported metrics
• Navigation Timing API
• Pa...
Tools for RUM Metrics
Browser reported
metrics
Collect Metrics
Send Metrics
(XHR)
Tools for RUM Metrics
• Custom JavaScript
• Open source JS libraries
• github.com/lognormal/boomerang







Synthetic Performance
Metrics
Automated Test Collect Metrics
Sources for Synthetic Metrics
1. Observational data
2. Browser devtools
3. Browser reported metrics
• Navigation Timing AP...
Tools for Synthetic
Performance Metrics
Scheduler “Browser” + Test Runner
Schedulers
• Cron













> 0 * * * * /path/to/script.sh
Schedulers
• Cron
• Continuous integration server
• Jenkins







> 0 * * * * /path/to/script.sh
Synthetic test runners
• Phantomas
• Browser-Perf
• WebPagetest
• Lighthouse





Phantomas
Headless Browsers
Phantomas
> phantomas http://reddit.com
{

"metrics": {

"requests": 73,

"bodySize": 580491,

"contentLength": 629382,

"...
Phantomas
> phantomas http://reddit.com
{

"metrics": {

"requests": 73,

"bodySize": 580491,

"contentLength": 629382,

"...
Phantomas
> phantomas http://reddit.com
{

"metrics": {

"requests": 73,

"bodySize": 580491,

"contentLength": 629382,

"...
Phantomas
> phantomas http://reddit.com
{

"metrics": {

"requests": 73,

"bodySize": 580491,

"contentLength": 629382,

"...
Browser-Perf
Browser-Perf
> browser-perf http://reddit.com
--selenium=selenium.example.com
Browser-Perf
> browser-perf http://reddit.com
--selenium=selenium.example.com
Browser-Perf
> browser-perf http://reddit.com
--selenium=selenium.example.com
Browser-Perf
> browser-perf http://reddit.com
--selenium=selenium.example.com
WebPagetest
http://www.webpagetest.org/
WebPagetest
http://www.webpagetest.org/
WebPagetest
WPT: Speed Index
Paint Time of “Above the Fold” Content
( )
Source: WebPagetest
Calculating Speed Index
1. Take the duration until the page is visually
complete
2. Separate it into 100ms intervals
3. Fo...
Lighthouse
Lighthouse
Storage and Monitoring
• Aggregation
• Data storage + queries
• Visualization
• Alerts + Notification
Storing and Monitoring
Aggregation via StatsD
Aggregation via StatsD
Storage + Queries with Graphite
mySite.homepage.phantomas.domComplete
Visualization with Grafana
Visualization with Grafana
Source: play.grafana.org/
Alerts and Notifications
1. Client-Side Performance
2. Collect + Monitor
3. Effectively
Effective Monitoring
• Reduce noise
• Beware skewed data
• Make data actionable
• Utilize data
Reduce Noise
• Isolate third party scripts and
external services

• Control conditional code paths (A/B
tests, etc.)
Beware Skewed Data
• Observer effect

• Noisy neighbors
Make Data Actionable
Know what changes will
affect each of your
metrics
How do you improve…
DOM Complete?
How do you improve…
Frame rate during scroll?
How do you improve…
Speed Index?
Do something with this data!
Utilize Data
• Agree on performance metrics
• Agree on performance goals
• Allocate time and resources
to achieving these ...
Performance is a means
to an end:
Remember
Performance is a means
to an end:
user experience
Remember
Andrew Rota, .
@AndrewRota .
Thanks!
Recommend Resources
• bit.ly/google_rails
• bit.ly/webpagetest_docs
• bit.ly/browser_...
Effectively Monitoring Client-Side Performance: NEPHP2016
Effectively Monitoring Client-Side Performance: NEPHP2016
Effectively Monitoring Client-Side Performance: NEPHP2016
Effectively Monitoring Client-Side Performance: NEPHP2016
Effectively Monitoring Client-Side Performance: NEPHP2016
Effectively Monitoring Client-Side Performance: NEPHP2016
Effectively Monitoring Client-Side Performance: NEPHP2016
Effectively Monitoring Client-Side Performance: NEPHP2016
Effectively Monitoring Client-Side Performance: NEPHP2016
Effectively Monitoring Client-Side Performance: NEPHP2016
Effectively Monitoring Client-Side Performance: NEPHP2016
Effectively Monitoring Client-Side Performance: NEPHP2016
Effectively Monitoring Client-Side Performance: NEPHP2016
Upcoming SlideShare
Loading in …5
×

Effectively Monitoring Client-Side Performance: NEPHP2016

2,203 views

Published on

Conference talk presented on August 4, 2016 at the 2016 Northeast PHP & UX Conference in Charlottetown, Prince Edward Island, Canada.

The performance of our client-side web applications directly impacts the experience of our users, yet browser performance can be one of the most difficult metrics to reliably track. The best way to improve performance is to collect and monitor a wide range of these metrics over time.

Published in: Software
  • How we discovered the real reason nice guys don't get laid, and a simple "fix" that allows you to gain the upper hand with a girl... without changing your personality or pretending to be someone you're not. learn more... ●●● http://scamcb.com/unlockher/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • The Scrambler Unlock Her Legs | 95% Off by Bobby Rio-Rob Judge? ■■■ http://scamcb.com/unlockher/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ♣♣ 10 Easy Ways to Improve Your Performance in Bed... ■■■ https://tinyurl.com/rockhardxxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Effectively Monitoring Client-Side Performance: NEPHP2016

  1. 1. Effectively Monitoring Client-Side Performance Andrew Rota Guidebook app: NEPHP2016
  2. 2. Effectively Monitoring Client-Side Performance NEPHP 2016 | @AndrewRota
  3. 3. 1. Client-Side Performance 2. Collect + Monitor 3. Effectively
  4. 4. Andrew Rota Software Engineer, . @andrewrota github.com/andrewrota Boston, MA
  5. 5. Web Performance
  6. 6. Client-Side Web Performance
  7. 7. Measuring Performance
  8. 8. Navigation Render Additional Resources Interaction
  9. 9. Navigation Render Additional Resources Interaction
  10. 10. Navigation Render Additional Resources Interaction
  11. 11. Navigation Render Additional Resources Interaction
  12. 12. There’s no single metric for measuring web performance
  13. 13. Performance Metric Sources 1. Observational data 2. Browser devtools 3. Browser reported metrics
  14. 14. Observational Data
  15. 15. Performance Metric Sources 1. Observational data 2. Browser devtools 3. Browser reported metrics
  16. 16. Browser Profiling Metrics
  17. 17. Performance Metric Sources 1. Observational data 2. Browser devtools 3. Browser reported metrics
  18. 18. Performance Metric Sources 1. Observational data 2. Browser devtools 3. Browser reported metrics • Navigation Timing API • Paint metrics • Custom Metrics
  19. 19. Navigation Timing API
  20. 20. Navigation Timing API • navigationStart • unloadEventStart • unloadEventEnd • redirectStart • redirectEnd • fetchStart • domainLookupStart • domainLookupEnd • connectStart • connectEnd • secureConnectionStart • requestStart • responseStart • responseEnd • domLoading • domInteractive • domContentLoadedEventStart • domContentLoadedEventEnd • domComplete • loadEventStart • loadEventEnd
  21. 21. Navigation Timing API • navigationStart - navigation initiated • responseStart - first byte of doc from server • responseEnd - last byte of doc from server • domInteractive - HTML parsed, DOM constructed • domContentLoaded - DOM and CSSOM constructed • domComplete/load - all subresources loaded
  22. 22. navigationStart responseStart responseEnd domInteractive domContentLoaded domComplete
  23. 23. Paint Metrics window.performance.timing.msFirstPaint window.chrome.loadTimes().firstPaintTime Internet Explorer Chrome
  24. 24. firstPaint
  25. 25. Custom Metrics window.performance.now()
  26. 26. Custom Metrics window.performance.mark(‘mainImageLoaded’) window.performance .getEntriesByName(‘mainImageLoaded’)[0] .startTime
  27. 27. mainImageLoaded tableSorted
  28. 28. Making Metrics Meaningful
  29. 29. Traditional Site Visit Lifecycle
  30. 30. Page 1 Page 2 Page 3 Page 4
  31. 31. But what about single page applications (SPAs)?
  32. 32. Page 1 Page 2 Page 3 Page 4
  33. 33. SPAs can improve performance, but complicate performance metrics
  34. 34. With SPAs, 1) write scripts for actions, and 2) double down on custom metrics.
  35. 35. Determine meaningful abstract metrics on top of low-level browser/app metrics
  36. 36. Can we automate, collect, and monitor these metrics?
  37. 37. 1. Client-Side Performance 2. Collect + Monitor 3. Effectively
  38. 38. 1. Real User Monitoring (RUM)
 2. Synthetic Collecting Performance Metrics
  39. 39. RUM Performance Metrics Users Collect Metrics
  40. 40. Sources for RUM Metrics 1. Observational data 2. Browser devtools 3. Browser reported metrics • Navigation Timing API • Paint metrics • Custom Metrics
  41. 41. Tools for RUM Metrics
  42. 42. Browser reported metrics Collect Metrics Send Metrics (XHR)
  43. 43. Tools for RUM Metrics • Custom JavaScript • Open source JS libraries • github.com/lognormal/boomerang
 
 
 

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

  50. 50. Phantomas Headless Browsers
  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. 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!
 }
 }
  53. 53. 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!
 }
 }
  54. 54. 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!
 }
 }
  55. 55. Browser-Perf
  56. 56. Browser-Perf > browser-perf http://reddit.com --selenium=selenium.example.com
  57. 57. Browser-Perf > browser-perf http://reddit.com --selenium=selenium.example.com
  58. 58. Browser-Perf > browser-perf http://reddit.com --selenium=selenium.example.com
  59. 59. Browser-Perf > browser-perf http://reddit.com --selenium=selenium.example.com
  60. 60. WebPagetest http://www.webpagetest.org/
  61. 61. WebPagetest http://www.webpagetest.org/
  62. 62. WebPagetest
  63. 63. WPT: Speed Index Paint Time of “Above the Fold” Content ( ) Source: WebPagetest
  64. 64. Calculating Speed Index 1. Take the duration until the page is visually complete 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!
  65. 65. Lighthouse
  66. 66. Lighthouse
  67. 67. Storage and Monitoring
  68. 68. • Aggregation • Data storage + queries • Visualization • Alerts + Notification Storing and Monitoring
  69. 69. Aggregation via StatsD
  70. 70. Aggregation via StatsD
  71. 71. Storage + Queries with Graphite mySite.homepage.phantomas.domComplete
  72. 72. Visualization with Grafana
  73. 73. Visualization with Grafana Source: play.grafana.org/
  74. 74. Alerts and Notifications
  75. 75. 1. Client-Side Performance 2. Collect + Monitor 3. Effectively
  76. 76. Effective Monitoring • Reduce noise • Beware skewed data • Make data actionable • Utilize data
  77. 77. Reduce Noise • Isolate third party scripts and external services
 • Control conditional code paths (A/B tests, etc.)
  78. 78. Beware Skewed Data • Observer effect
 • Noisy neighbors
  79. 79. Make Data Actionable Know what changes will affect each of your metrics
  80. 80. How do you improve… DOM Complete?
  81. 81. How do you improve… Frame rate during scroll?
  82. 82. How do you improve… Speed Index?
  83. 83. Do something with this data!
  84. 84. Utilize Data • Agree on performance metrics • Agree on performance goals • Allocate time and resources to achieving these goals
  85. 85. Performance is a means to an end: Remember
  86. 86. Performance is a means to an end: user experience Remember
  87. 87. 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

×