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.

1. Effectively Monitoring
Client-Side Performance
Andrew Rota
Guidebook app: NEPHP2016

2. Effectively Monitoring
Client-Side Performance
NEPHP 2016 | @AndrewRota

3. 1. Client-Side Performance
2. Collect + Monitor
3. Effectively

4. Andrew Rota
Software Engineer, .
@andrewrota
github.com/andrewrota
Boston, MA

5. Web Performance

17. Client-Side Web
Performance

18. Measuring
Performance

19. Navigation
Render
Additional
Resources
Interaction

20. Navigation
Render
Additional
Resources
Interaction

21. Navigation
Render
Additional
Resources
Interaction

22. Navigation
Render
Additional
Resources
Interaction

23. There’s no single metric
for measuring web
performance

24. Performance Metric Sources
1. Observational data
2. Browser devtools
3. Browser reported metrics

25. Observational Data

26. Performance Metric Sources
1. Observational data
2. Browser devtools
3. Browser reported metrics

27. Browser Profiling Metrics

28. Performance Metric Sources
1. Observational data
2. Browser devtools
3. Browser reported metrics

29. Performance Metric Sources
1. Observational data
2. Browser devtools
3. Browser reported metrics
• Navigation Timing API
• Paint metrics
• Custom Metrics

30. Navigation Timing API

31. Navigation Timing API
• navigationStart
• unloadEventStart
• unloadEventEnd
• redirectStart
• redirectEnd
• fetchStart
• domainLookupStart
• domainLookupEnd
• connectStart
• connectEnd
• secureConnectionStart
• requestStart
• responseStart
• responseEnd
• domLoading
• domInteractive
• domContentLoadedEventStart
• domContentLoadedEventEnd
• domComplete
• loadEventStart
• loadEventEnd

32. 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

33. navigationStart
responseStart
responseEnd
domInteractive
domContentLoaded
domComplete

34. Paint Metrics
window.performance.timing.msFirstPaint
window.chrome.loadTimes().firstPaintTime
Internet Explorer
Chrome

35. firstPaint

36. Custom Metrics
window.performance.now()

37. Custom Metrics
window.performance.mark(‘mainImageLoaded’)
window.performance
.getEntriesByName(‘mainImageLoaded’)[0]
.startTime

38. mainImageLoaded
tableSorted

39. Making Metrics
Meaningful

41. Traditional Site Visit
Lifecycle

42. Page
1
Page
2
Page
3
Page
4

43. But what about single
page applications (SPAs)?

44. Page
1
Page
2
Page
3
Page
4

45. SPAs can improve
performance, but complicate
performance metrics

46. With SPAs, 1) write scripts
for actions, and 2) double
down on custom metrics.

47. Determine meaningful abstract metrics
on top of low-level browser/app metrics

48. Can we automate, collect,
and monitor these metrics?

49. 1. Client-Side Performance
2. Collect + Monitor
3. Effectively

50. 1. Real User Monitoring (RUM)
2. Synthetic
Collecting Performance Metrics

51. RUM Performance Metrics
Users Collect Metrics

52. Sources for RUM Metrics
1. Observational data
2. Browser devtools
3. Browser reported metrics
• Navigation Timing API
• Paint metrics
• Custom Metrics

53. Tools for RUM Metrics

54. Browser reported
metrics
Collect Metrics
Send Metrics
(XHR)

55. Tools for RUM Metrics
• Custom JavaScript
• Open source JS libraries
• github.com/lognormal/boomerang

56. Synthetic Performance
Metrics
Automated Test Collect Metrics

57. Sources for Synthetic Metrics
1. Observational data
2. Browser devtools
3. Browser reported metrics
• Navigation Timing API
• Paint metrics
• Custom Metrics

58. Tools for Synthetic
Performance Metrics
Scheduler “Browser” + Test Runner

59. Schedulers
• Cron
> 0 * * * * /path/to/script.sh

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

61. Synthetic test runners
• Phantomas
• Browser-Perf
• WebPagetest
• Lighthouse

62. Phantomas
Headless Browsers

63. 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!
}
}

64. 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!
}
}

65. 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!
}
}

66. 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!
}
}

67. Browser-Perf

68. Browser-Perf
> browser-perf http://reddit.com
--selenium=selenium.example.com

69. Browser-Perf
> browser-perf http://reddit.com
--selenium=selenium.example.com

70. Browser-Perf
> browser-perf http://reddit.com
--selenium=selenium.example.com

71. Browser-Perf
> browser-perf http://reddit.com
--selenium=selenium.example.com

72. WebPagetest
http://www.webpagetest.org/

73. WebPagetest
http://www.webpagetest.org/

74. WebPagetest

75. WPT: Speed Index
Paint Time of “Above the Fold” Content
( )
Source: WebPagetest

76. 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!

77. Lighthouse

79. Lighthouse

80. Storage and Monitoring

81. • Aggregation
• Data storage + queries
• Visualization
• Alerts + Notification
Storing and Monitoring

82. Aggregation via StatsD

83. Aggregation via StatsD

84. Storage + Queries with Graphite
mySite.homepage.phantomas.domComplete

85. Visualization with Grafana

86. Visualization with Grafana
Source: play.grafana.org/

87. Alerts and Notifications

88. 1. Client-Side Performance
2. Collect + Monitor
3. Effectively

89. Effective Monitoring
• Reduce noise
• Beware skewed data
• Make data actionable
• Utilize data

90. Reduce Noise
• Isolate third party scripts and
external services
• Control conditional code paths (A/B
tests, etc.)

91. Beware Skewed Data
• Observer effect
• Noisy neighbors

92. Make Data Actionable
Know what changes will
affect each of your
metrics

93. How do you improve…
DOM Complete?

94. How do you improve…
Frame rate during scroll?

95. How do you improve…
Speed Index?

96. Do something with this data!

97. Utilize Data
• Agree on performance metrics
• Agree on performance goals
• Allocate time and resources
to achieving these goals

98. Performance is a means
to an end:
Remember

99. Performance is a means
to an end:
user experience
Remember

100. 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