Slide 1

Slide 1 text

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

Slide 4

Slide 4 text

• Pinterest: -40% wait time => +15% SEO, +15% conversion (2017) • DoubleClick: 5s vs 19s on mobile => 2x ad revenue (2016) • Trainline: -300ms latency => +$11.5M / year revenue (2016) • Etsy: +160Kb => +12% bounce rate (2014) • Edmunds: -77% load time => +20% page views (2011) • Mozilla: -2.2s => +15.4% Downloads (2010) • Google: +400ms => -0.21% searches after experiment! (2009) • Netflix: +GZip => -43% Traffic cost (2008) • Amazon: +100ms => -1% revenue (2008) • Google: +500ms => -25% searches (2006) Stats @ WPOstats.com

Slide 5

Slide 5 text

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

Slide 29

Slide 29 text

Design Speed

Slide 30

Slide 30 text

Thank You! Twitter: @sergeyche Sergey.Chernyshev@gmail.com SergeyChernyshev.com