metrics, metrics everywhere (but where the heck do you start?)
TRANSCRIPT
![Page 1: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/1.jpg)
Metrics, metrics everywhere(but where the heck do you start?)Tammy Everts & Cliff CrockerVelocity Santa Clara 2015
![Page 2: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/2.jpg)
@tameverts @cliffcrocker
#velocityconf
![Page 3: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/3.jpg)
![Page 4: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/4.jpg)
Who cares about performance today?How do I measure performance?
How fast am I?How fast should I be?How do I get there?
![Page 5: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/5.jpg)
![Page 6: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/6.jpg)
The myth of a single metric
![Page 7: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/7.jpg)
![Page 8: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/8.jpg)
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
![Page 9: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/9.jpg)
Who cares about performance?
![Page 10: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/10.jpg)
“47% of consumers expect a web page to load in 2 seconds or less.”
Akamai, 2009
![Page 11: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/11.jpg)
![Page 12: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/12.jpg)
1s = $27M DNS144ms
Start render1.59s
Hero image render2.01s
![Page 13: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/13.jpg)
How do I measure performance?
![Page 14: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/14.jpg)
![Page 15: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/15.jpg)
![Page 16: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/16.jpg)
![Page 17: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/17.jpg)
Andr
oid
devi
ce fr
agm
enta
tion
Ope
nSig
nal,
Augu
st 2
014
![Page 18: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/18.jpg)
RUM versus plus synthetic
![Page 19: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/19.jpg)
RUM 101
![Page 20: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/20.jpg)
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)
![Page 21: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/21.jpg)
What makes RUM great
Always on Every user, every browser, everywhere Able to capture human behavior/events Only getting better
![Page 22: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/22.jpg)
Questions your RUM data can answer
![Page 23: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/23.jpg)
What are my users’ environments?
![Page 24: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/24.jpg)
How do visitors move through my site?
![Page 25: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/25.jpg)
How are my third-party scripts
performing in real time?
![Page 26: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/26.jpg)
What impact does performance have
on my business?
![Page 27: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/27.jpg)
Synthetic Monitoring 101
![Page 28: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/28.jpg)
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
![Page 29: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/29.jpg)
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
![Page 30: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/30.jpg)
Questions your synthetic data can answer
![Page 31: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/31.jpg)
How do I compare to the competition?
![Page 32: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/32.jpg)
How does the design of my pages affect
performance?
![Page 33: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/33.jpg)
How does the newest version of my site compare to previous versions?
![Page 34: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/34.jpg)
How well am I sticking to my performance budget?
![Page 35: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/35.jpg)
What if my third parties fail?
Original: 3.5s
SPOF: 22.7s
![Page 36: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/36.jpg)
![Page 37: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/37.jpg)
37© 2014 SOASTA CONFIDENTIAL - All rights reserved.
Common things we hear about RUM & synthetic
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?
![Page 38: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/38.jpg)
“But it loads so much faster for me!?!”
2015 Macbook ProWarm browser cache
FIOS
X86 – Windows 7 VMCompletely cold cache/DNS
Throttled bandwidth
![Page 39: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/39.jpg)
boomerang.js
Episodes
![Page 40: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/40.jpg)
W3C Performance Working Group
![Page 41: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/41.jpg)
![Page 42: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/42.jpg)
![Page 43: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/43.jpg)
How fast am I?
![Page 44: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/44.jpg)
Navigation Timing API
![Page 45: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/45.jpg)
Browser support for Navigation Timing
!
![Page 46: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/46.jpg)
46© 2014 SOASTA CONFIDENTIAL - All rights reserved.
Role-specific use cases
Network operationsFront-end developerMarketing and site operationsDesignerC-level
![Page 47: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/47.jpg)
Use case: Measure network performance
![Page 48: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/48.jpg)
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)
![Page 49: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/49.jpg)
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
![Page 50: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/50.jpg)
Measuring DNS and TCP
function getPerf() { var timing = window.performance.timing; return {
dns: timing.domainLookupEnd - timing.domainLookupStart};
connect: timing.connectEnd - timing.connectStart};}
![Page 51: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/51.jpg)
What’s with all those zeros! Connection reuse DNS caching Prefetching
![Page 52: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/52.jpg)
Focus on higher percentiles
85th percentile
Median (50th)
![Page 53: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/53.jpg)
Use case: Measure front-end browser events
![Page 54: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/54.jpg)
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?
![Page 55: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/55.jpg)
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
![Page 56: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/56.jpg)
Isolate front-end vs. back-end
![Page 57: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/57.jpg)
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};}
![Page 58: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/58.jpg)
![Page 59: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/59.jpg)
Front-end
Back-end
![Page 60: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/60.jpg)
Investigate DOM eventsfunction 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 - timing.navigationStart};}
![Page 61: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/61.jpg)
2618 DOM nodes
86 DOM nodes
Visualizing DOM complexity
![Page 62: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/62.jpg)
Use case: Measure object-level performance
![Page 63: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/63.jpg)
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
![Page 64: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/64.jpg)
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
![Page 65: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/65.jpg)
Resource Timing interface
![Page 66: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/66.jpg)
Browser support for Resource Timing
![Page 67: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/67.jpg)
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 | "*"
![Page 68: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/68.jpg)
Resource Timingvar 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
![Page 69: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/69.jpg)
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
![Page 70: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/70.jpg)
Using Resource Groups
PLT impact not due resource groups
PLT impact correlates with improvement from image domains
![Page 71: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/71.jpg)
Use case: Measure the user experience
![Page 72: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/72.jpg)
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
![Page 73: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/73.jpg)
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
![Page 74: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/74.jpg)
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)
![Page 75: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/75.jpg)
First Paint is not equal to Start Render!Chrome – “First Paint” True Start Render
![Page 76: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/76.jpg)
Start Render and filmstrips
![Page 77: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/77.jpg)
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
![Page 78: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/78.jpg)
Measure duration between two marksperformance.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”);
![Page 79: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/79.jpg)
How long does it take to display
the main product image on my site?
![Page 80: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/80.jpg)
Record when an image loads
<img src=“image1.gif” onload=“performance.mark(‘image1’)”>
For more interesting examples, see:
Measure hero image delayhttp://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
![Page 81: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/81.jpg)
How do I measure performance when the onload event no longer matters?
Use case: Measure performance of SPAs
![Page 82: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/82.jpg)
onload event
visible resources
![Page 83: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/83.jpg)
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/
![Page 84: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/84.jpg)
How fast should I be?
![Page 85: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/85.jpg)
Use case: Measure business impact
![Page 86: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/86.jpg)
I need to understand… how performance affects business KPIs how our site compares to our
competitors
![Page 87: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/87.jpg)
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
![Page 88: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/88.jpg)
![Page 89: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/89.jpg)
![Page 90: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/90.jpg)
2% increase in conversions for every 1 second of improvement
![Page 91: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/91.jpg)
Cut load times in halfIncreased sales by 13%
![Page 92: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/92.jpg)
![Page 93: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/93.jpg)
So what?You must look at your own data.
![Page 94: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/94.jpg)
![Page 95: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/95.jpg)
![Page 96: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/96.jpg)
Not all pages are created equalTop of funnel impact (“browse” pages)
For a typical ecommerce site, conversion rate drops by up to 50% when “browse” pages increase from 1 to 6 seconds
![Page 97: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/97.jpg)
Not all pages are created equalBottom of funnel impact (“checkout” pages)
However, there is much less impact to conversion when “checkout” pages degrade
![Page 98: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/98.jpg)
Conversion Impact Score
![Page 99: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/99.jpg)
How do I get there?
![Page 100: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/100.jpg)
![Page 101: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/101.jpg)
Create a performance budget
See:
Setting a Performance Budgethttp://timkadlec.com/2013/01/setting-a-performance-budget/
Performance Budget Metricshttp://timkadlec.com/2014/11/performance-budget-metrics/
![Page 102: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/102.jpg)
Set meaningful, page-specific SLAs
![Page 103: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/103.jpg)
“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.”
![Page 104: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/104.jpg)
“Vendor will make an effort to ensure average response times for content is within reasonable limits.”
![Page 105: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/105.jpg)
![Page 106: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/106.jpg)
Chapter 8: Changing Culture
at Your Organization
![Page 107: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/107.jpg)
performancebacon.com
performancebeacon.com
![Page 108: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/108.jpg)
Thanks!
![Page 109: Metrics, metrics everywhere (but where the heck do you start?)](https://reader037.vdocuments.mx/reader037/viewer/2022102816/55b20370bb61eb0c4c8b4764/html5/thumbnails/109.jpg)
Meet us at booth #801