Not surprisingly, there’s no one-size-fits-all performance metric (though life would be simpler if there were). Different metrics will give you different critical insights into whether or not your pages are delivering the results you want — both from your end user’s perspective and ultimately from your organization’s perspective. Join Tammy Everts, and walk through various metrics that answer performance questions from multiple perspectives. You’ll walk away with a better understanding of your options, as well as a clear understanding of how to choose the right metric for the right audience.
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
20. 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)
21. What makes RUM great
Always on
Every user, every browser, everywhere
Able to capture human behavior/events
Only getting better
28. 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
29. 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
48. 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)
49. 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
50. Measuring DNS and TCP
function getPerf() {
var timing = window.performance.timing;
return {
dns: timing.domainLookupEnd -
timing.domainLookupStart};
connect: timing.connectEnd - timing.connectStart};
}
51. What’s with all those zeros!
Connection reuse
DNS caching
Prefetching
54. 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?
55. 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
63. 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
64. 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
67. 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 | "*"
68. Resource Timing
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
69. Other uses for Resource Timing
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
70. Using Resource Groups
PLT impact not due
resource groups
PLT impact
correlates with
improvement
from image domains
72. 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
73. 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
74. 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)
75. First Paint is not equal to Start Render!
Chrome – “First Paint” True Start Render
77. User Timing 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
78. 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”);
79. How long does it
take to display
the main product
image on my site?
80. Record when an image 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
81. How do I measure performance
when the onload event no longer
matters?
Use case: Measure
performance of SPAs
83. 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)
See: http://www.soasta.com/blog/angularjs-real-user-
monitoring-single-page-applications/
86. I need to understand…
how performance affects business KPIs
how our site compares to our
competitors
87. 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
88.
89.
90. 2% increase in conversions
for every 1 second of improvement
103. “Response time measured using resource timing from Chrome
browsers in the United States should not exceed a median
(50th percentile) of 100ms or a 95th percentile of 500ms for
a population of more than 500 users in a 24-hour period.”
104. “Vendor will make an effort to ensure average response
times for content is within reasonable limits.”
In this example, I’ve shown the impact of performance (Page Load time) on the Bounce rate for two different groups of sites.
Site A: A collection of user experiences for Specialty Goods eCommerce sites (luxury goods))
Site B: A collection of user experiences for General Merchandise eCommerce sites (commodity goods)
Notice the patience levels of the users after 6s for each site. Users for a specialty goods site with fewer options tend to be more patient. Meanwhile users that have other options for a GM site continue to abandon at the same rate.
The relationship between speed and behavior is even more noticeable when we look at conversion rates between the two sites. Notice how quickly users will decide to abandon a purchase for Site A, versus B.
Another important aspect is the realize all pages are not created equal.
In this study of retail, we found that pages that were at the top of the funnel (browser pages) such as Home, Search, Product were extremely sensitive to user dissatisfaction.
As these pages slowed from 1-6s, we saw a 50% decrease in the conversion rate!
However, when we looked at pages deeper in the funnel like Login, Billing (checkout pages) – users were more patient and committed to the transaction.