Velocity NY Presentation by Cliff Crocker and Tammy Everts

1. Metrics, metrics everywhere
(but where the heck do you start?)

2. @tameverts @cliffcrocker
#velocityconf

4. Who cares about performance today?
How do I measure performance?
How fast am I?
How fast should I be?
How do I get there?

6. The myth of a single metric

8. Start render DNS TCP TTFB
DOM loading DOM ready Page load Fully loaded
User timing Resource timing Requests Bytes in
Speed Index Pagespeed score 1s = $$ DOM elements
DOM size Visually complete Redirect SSL negotiation

9. Who cares about performance?

10. “47% of consumers expect a web
page to load in 2 seconds or less.”
Akamai, 2009

12. 1s = $27M DNS
144ms
Start render
1.59s
Hero image render
2.01s

13. How do I measure performance?

17. Androiddevicefragmentation
OpenSignal,August2015

18. How do we measure UX for mobile?

19. https://gist.github.com/larahogan/b681da601e3c94fdd3a6

20. RUM versus plus synthetic

21. Real User Monitoring 101

22. Technology for collecting performance metrics
directly from the end user’s browser
Involves instrumenting your site via JavaScript
Measurements are fired across the network to a
collection point through a small request object
(beacon)

23. What makes RUM great
 Always on
 Every user, every browser, everywhere
 Able to capture human behavior/events
 Only getting better

24. Questions your RUM data can answer

25. What are
my users’
environments?

26. How do visitors move
through my site?

27. How are my
third-party scripts
performing in
real time?

28. What impact does
performance have
on my business?

29. Synthetic Monitoring 101

30. Uses automated agents (bots) to measure your
website from different physical locations
A set “path” or URL is defined
Tests are run either ad hoc or scheduled,
and data is collected

31. What makes synthetic monitoring great
 Rich data collected (waterfall, video,
filmstrip, HTTP headers)
 Consistent “clean room” baseline
 Nothing to install
 Doesn’t require users / ability to
measure pre-production and
competition

32. Questions your synthetic data can answer

33. How do I compare to the competition?

34. How does the
design of my
pages affect
performance?

35. How does the newest version of my site
compare to previous versions?

36. How well am I sticking to my performance budget?

37. What if my third parties fail?
Original: 3.5s
SPOF: 22.7s

39. 38© 2014 SOASTA CONFIDENTIAL - All rights reserved.
Why are these numbers so different?
I don’t trust your data. Your numbers are wrong.
How are you calculating page load time?
I can’t share two sets of numbers with the business.

40. “But it loads so much faster for me!?!”
2015 Macbook Pro
Warm browser cache
FIOS
X86 – Windows 7 VM
Completely cold cache/DNS
Throttled bandwidth

41. boomerang.js
Episodes

42. W3C Performance
Working Group

45. How fast am I?

46. http://soasta.io/perftimings

47. NavigationTiming API

48. Browser support for NavigationTiming
http://caniuse.com/#feat=nav-timing

49. 48© 2014 SOASTA CONFIDENTIAL - All rights reserved.
Network operations
Front-end developer
Marketing and site operations
Designer
C-level

50. Use case: Measure
network performance

51. I need visibility into…
 issues with authoritative DNS servers
 impact of denial of service attacks
on end users
 efficiency of connection re-use
 tier 1 connectivity issues (load balancer,
web server)

52. Start render DNS TCP TTFB
DOM loading DOM ready Page load Fully loaded
User timing Resource timing Requests Bytes in
Speed Index Pagespeed score 1s = $$ DOM elements
DOM size Visually complete Redirect SSL negotiation

53. Measuring DNS and TCP
function getPerf() {
var timing = window.performance.timing;
return {
dns: timing.domainLookupEnd -
timing.domainLookupStart};
connect: timing.connectEnd - timing.connectStart};
}

54. What’s with all those zeros!
 Connection reuse
 DNS caching
 Prefetching

55. Focus on higher percentiles
85th percentile
Median (50th)

56. Use case: Measure
front-end browser events

57. How do I…
 understand the impact of back-end
versus front-end on page speed?
 investigate how DOM complexity affects
performance?
 measure a “fully loaded” page?

58. Start render DNS TCP TTFB
DOM load event DOM ready Page load Fully loaded
User timing Resource timing Requests Bytes in
Speed Index Pagespeed score 1s = $$ DOM elements
DOM size Visually complete Redirect SSL negotiation

59. Isolate front-end vs. back-end

60. Isolate front-end vs. back-end
function getPerf() {
var timing = window.performance.timing;
return {
ttfb: timing.responseStart - timing.connectEnd};
basePage: timing.responseEnd - timing.responseStart};
frontEnd: timing.loadEventStart -
timing.responseEnd};
}

62. Front-end
Back-end

63. Measuring the critical rendering path

64. Investigate DOM events
function getPerf() {
var timing = window.performance.timing;
return {
DLoading: timing.domLoading –
timing.navigationStart};
DInt: timing.domInteractive –
timing.navigationStart};
DContLoaded: timing.domContentLoadedEventEnd –
timing.navigationStart;
DContLoadTime: timing.domContentLoadedEventEnd –
timing.domContentLoadedEventStart};
DComplete: timing.domComplete -
timing.navigationStart};
PLoad: timing.loadEventStart -

65. Understanding critical rendering path
 DOM Loading – browser begins parsing initial
bytes of the document
 DOM Interactive – doc parsed, DOM has been
constructed
 DOM Content Loaded – No blocking style sheets
 DOM Complete – All processing complete, all
assets downloaded
https://developers.google.com/web/fundamentals/performance/critical-rendering-path

66. 2618 DOM nodes
86 DOM nodes
Visualizing DOM complexity

67. Use case: Measure
object-level performance

68. I need to understand…
 how third-party content affects my
performance
 how long a group of assets takes to
download
 how assets served by a CDN are
performing

69. Start render DNS TCP TTFB
DOM loading DOM ready Page load Fully loaded
User timing Resource timing Requests Bytes in
Speed Index Pagespeed score 1s = $$ DOM elements
DOM size Visually complete Redirect SSL negotiation

70. ResourceTiming interface

71. Browser support for Resource Timing
http://caniuse.com/#feat=resource-timing

72. Cross-Origin Resource Sharing (CORS)
Start/End time only unless Timing-Allow-Origin
HTTP Response Header defined
Timing-Allow-Origin = "Timing-Allow-Origin" ":" origin-list-
or-null | "*"

73. ResourceTiming
var rUrl = ‘http://www.akamai.com/images/img/cliff-crocker-
dualtone-150x150.png’;
var me = performance.getEntriesByName(rUrl)[0];
var timings = {
loadTime: me.duration,
dns: me.domainLookupEnd - me.domainLookupStart,
tcp: me.connectEnd - me.connectStart,
waiting: me.responseStart - me.requestStart,
fetch: me.responseEnd - me.responseStart
}
Measuring a single resource

74. Other uses for ResourceTiming
 Slowest resources
 Time to first image (download)
 Response time by domain
 Time a group of assets
 Response time by initiator type (element type)
 Cache-hit ratio for resources
For examples see: https://github.com/lognormal/beyond-page-metrics

75. Using Resource Groups
PLT impact not due
resource groups
PLT impact
correlates with
improvement
from image domains

76. Use case: Measure
the user experience

77. I just need to understand…
 when users perceive the page to
be ready
 how long until my page begins
to render
 when content above the fold is visible

78. Start render DNS TCP TTFB
DOM loading DOM ready Page load Fully loaded
User timing Resource timing Requests Bytes in
Speed Index Pagespeed score 1s = $$ DOM elements
DOM size Visually complete Redirect SSL negotiation

79. The fallacy of “First Paint” in the wild
 Support for First Paint is not standardized between browsers
 Metric can be misleading (i.e. painting a white screen)

80. First Paint is not equal to Start Render!
Chrome – “First Paint” True Start Render

81. Start Render and filmstrips

82. UserTiming Interface
 Allows developers to measure performance of
their applications through high-precision
timestamps
 Consists of “marks” and “measures”
 PerformanceMark: Timestamp
 PerformanceMeasure: Duration between
two given marks

83. Browser support for UserTiming
http://caniuse.com/#feat=user-timing

84. Measure duration between two marks
performance.mark(“startTask”);
//Some stuff you want to measure happens here
performance.mark(“stopTask”);
//Measure the duration between the two marks
performance.measure(“taskDuration”,“startTask”,“stopTask”);

85. How long does it
take to display
the main product
image on my site?

86. Record when an img loads
<img src=“image1.gif” onload=“performance.mark(‘image1’)”>
For more interesting examples, see:
Measure hero image delay
http://www.stevesouders.com/blog/2015/05/12/hero-image-custom-metrics/
Measure aggregate times to get an “above fold time”
http://blog.patrickmeenan.com/2013/07/measuring-performance-of-user-
experience.html

88. Adoption of
UserTiming
for top 25
shopping sites
(Global)
Nope
User
Timing
Sales

89. http://soasta.io/perftimings

90. How do I measure performance
when the onload event loses
relevance?
Use case: Measure
performance of SPAs

91. http://www.ryan-williams.net/hacker-news-hiring-trends/2015/october.html

92. What is a SPA?
• Single Page Application
• HTML loads once
• Fluid user experience
• Can be great for performance
• Hard to measure

93. onload event
visible resources

94. Measuring SPAs
• Accept the fact that onload no longer matters
• Tie into routing events of SPA framework
• Measure downloads during soft refreshes
• (support in boomerang.js for Angular and other
SPA frameworks)

95. How fast should I be?

96. Use case: Measure
business impact

97. I need to understand…
 how performance affects business KPIs
 how our site compares to our
competitors

98. Start render DNS TCP TTFB
DOM loading DOM ready Page load Fully loaded
User timing Resource timing Requests Bytes in
Speed Index Pagespeed score 1s = $$ DOM elements
DOM size Visually complete Redirect SSL negotiation

100. http://www.soasta.com/blog/mobile-web-performance-monitoring-conversion-rate/

101. 2% increase in conversions
for every 1 second of improvement

103. Cut load time by 80%
83% traffic increase
32% increase in time on
site
108% increase in
interaction rate with ads

104. So what?
You must look at your own data.

107. Not all pages are created equal
For a typical
ecommerce site,
conversion rate
drops by up to 50%
when “browse”
pages increase from
1 to 6 seconds

108. Not all pages are created equal
However, there is
much less impact
to conversion
when “checkout”
pages degrade

109. What is the Conversion Impact Score?
The Conversion Impact Score (CIS) is a relative score that ranks page groups
by their propensity to negatively impact conversions due to high load times.
For each page group, the Conversion Impact Score is calculated using the
proportion of overall requests that are associated with that group, along with
the Spearman Ranked Correlation between its load times and number of
conversions. The Conversion Impact Score will always be a number between
-1 and 1, though scores much greater than zero should be very rare. The more
negative the score, the more detrimental to conversions that high load times
for that page group are, relative to the other page groups.

110. TL;DR
The Conversion Impact Score answers this question:
How much impact does the performance
of this page have on conversions?

111. Conversion Impact Score

112. http://www.soasta.com/blog/website-monitoring-conversion-impact-score/

113. How do I get there?

114. Create a performance budget
Setting a Performance Budget
http://timkadlec.com/2013/01/setting-a-performance-budget/
Performance Budget Metrics
http://timkadlec.com/2014/11/performance-budget-metrics/

115. Set meaningful, page-specific SLAs

117. Chapter 8:
Changing Culture
at Your Organization

118. Free download (until November 4)
http://soasta.io/time
ismoneybook

119. performancebacon.com
performancebeacon.com

120. Thanks!

121. Meet us at booth #51