Capturing Speed of
User Experience
With UserTiming API
November 27, 2018 @ NY Web Performance Meetup
Sergey Chernyshev
Slide 2
Slide 2 text
Sergey Chernyshev
Principal Engineer
@ Meetup
November 27, 2018 @ NY Web Performance Meetup
• Care about
UX speed
• Organize
NY Web
Performance
Meetup Group
• Work on
Web Platform
team @ Meetup
Slide 3
Slide 3 text
• Monitor for degradation
• Analyze code for speed issues
• Verify experience improvements
• Prioritize improvements
• Budget for speed initiatives
Why do we measure speed?
Operations
Developers
Developers
Business
Business
Synthetic
• Tests from
particular location
• Tester controls
instrumentation
• One metric value
• Data can have lots of
details for analysis
Slide 6
Slide 6 text
Real User Measurement
• Real users (a lot of them)
• A lot of data (need to store it)
• All noise you can get, requires filtering
• Metrics are distributions
• Can correlate to business KPIs
Slide 7
Slide 7 text
Measure
User
Experience
Not
Technology
Slide 8
Slide 8 text
Measure
User Experience
• Great experience for users
• "Fast" is just a component
• Correlate what you measure
to business KPIs
• Do not measure what's easy,
measure what matters
Slide 9
Slide 9 text
• DNS, SSL/TLS, Time To First Byte (TTFB)
• Page Load, Document Complete, Fully
Loaded
• First Paint & First Contentful Paint (FCP)
• Above the Fold Time (AFT)
• Speed Index
Today’s Metrics
Slide 10
Slide 10 text
• Shows when completely
useless part is over
Time To
First Paint
TTFP: 3.5s
Slide 11
Slide 11 text
• When everything
is finally visible
Above the
Fold Time
AFT: 15.3s
Slide 12
Slide 12 text
Speed Index
• When everything is finally
visible
Speed Index: 8618
Slide 13
Slide 13 text
• “Time To First Tweet”
UX Speed
• “Pinner Wait Time”
Improving performance on twitter.com
https://blog.twitter.com/engineering/en_us/a/2012/
improving-performance-on-twittercom.html
Four lessons in making Pinterest faster on Android
https://medium.com/@Pinterest_Engineering/four-
lessons-in-making-pinterest-faster-on-
android-5a3c69c045af
Slide 14
Slide 14 text
User
Timing
API
Slide 15
Slide 15 text
marks - record individual User Timing events
UserTiming API
measures - record difference between two marks
91% support + polyfill by Nic Jansma https://github.com/nicjansma/usertiming.js
Slide 16
Slide 16 text
Retrieve the measurements
PerformanceTimeline API
Slide 17
Slide 17 text
DEMO
UserTiming API
Slide 18
Slide 18 text
• Measures your product’s,
not “standard metrics”
• Instruments your
JavaScript codebase not
browser codebase
• Records timings that can
be picked up by both
synthetic & RUM
• Does not really measure
browser painting
• Measures specific events
in your code rather than
user experience
• Requires detailed code
instrumentation
Pros Cons
Slide 19
Slide 19 text
text (w/o a custom font) - inserted into DOM
Measure The Browser
Steve Souders, “User Timing and Custom Metrics”
https://speedcurve.com/blog/user-timing-and-custom-metrics/
Technique by Steve Souders
Slide 20
Slide 20 text
image - inserted into DOM and downloaded
Measure The Browser
Steve Souders, “User Timing and Custom Metrics”
https://speedcurve.com/blog/user-timing-and-custom-metrics/
Technique by Steve Souders
Slide 21
Slide 21 text
Your Code Can Only Measure JavaScript Execution
Nolan Lawson, “Accurately measuring layout on the web”
https://nolanlawson.com/2018/09/25/accurately-measuring-layout-on-the-web/
Slide 22
Slide 22 text
Measure Real Painting
“Accurately measuring layout on the web”
https://nolanlawson.com/2018/09/25/accurately-measuring-layout-on-the-web/
for all marks fired in JS code wait till next paint
Technique by Nolan Lawson
Slide 23
Slide 23 text
UX
Capture
Library
Slide 24
Slide 24 text
Groups multiple marks into “zones” and records
UserTiming measures between navigationStart and last mark
UX Capture
Slide 25
Slide 25 text
Use UXCapture.mark() instead of performance.mark()
UX Capture
• waits till next paint (can be disabled for specific mark)
• records a console.timeStamp() to show marks on timeline
Slide 26
Slide 26 text
DEMO
UX Capture
Slide 27
Slide 27 text
• Destination Confirmed
• Primary Content Loaded
• Primary Action Available
• Secondary Action
Track same metrics that
represent user experience
across the site.
UX Metrics https://github.com/sergeychernyshev/ux-capture
Slide 28
Slide 28 text
Example: Custom Metrics in SpeedCurve Synthetic
• Track as UX Speed Metrics
• Correlate UX Speed & KPIs
using RUM
• Use for analysis with
filmstrips and waterfalls to
improve User Experience
Synthetic
& RUM