Slide 1

Slide 1 text

T R A C K I N G PA G E S P E E D S E R G E Y C H E R N Y S H E V

Slide 2

Slide 2 text

S C A L A B I L I T Y & P E R F O R M A N C E number of users time to load

Slide 3

Slide 3 text

number of users time to load S C A L A B I L I T Y & P E R F O R M A N C E 0

Slide 4

Slide 4 text

S C A L A B I L I T Y & P E R F O R M A N C E One User time to load 0 S1

Slide 5

Slide 5 text

W H Y D O W E M E A S U R E S P E E D ? • Monitor for degradations (Ops) • Analyze code for perf issues (Devs) • Verify improvements (Devs) • Prioritize improvements (Business) • Budget for WPO initiatives (Business)

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

S Y N T H E T I C M O N I T O R I N G , T E S T I N G & A N A LY S I S • From particular location • Tester controls instrumentation • One metric value • Data can have lots of details for analysis

Slide 8

Slide 8 text

R E A L U S E R M E A S U R E M E N T • 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 9

Slide 9 text

T O D AY ' S M E T R I C S • DNS, SSL/TLS, Time To First Byte (TTFB) • Page Load, Document Complete, Fully Loaded • Size of DOM, Frames per Second • First Paint, First “Contentful” or Meaningful Paint • Above the Fold Time (AFT) • SpeedIndex

Slide 10

Slide 10 text

T I M E T O F I R S T PA I N T • Shows when completely useless part is over TTFP 3.5s

Slide 11

Slide 11 text

A F T ( A B O V E T H E F O L D T I M E ) • When everything is finally visible AFT 15.3s

Slide 12

Slide 12 text

S P E E D I N D E X • Unifies rendering progress in one number Speed Index 8618

Slide 13

Slide 13 text

M E A S U R E U S E R E X P E R I E N C E • 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 N O T T E C H N O L O G Y

Slide 14

Slide 14 text

I N T E R A C T I O N O N T H E W E B 1. Verify destination 2. Provide primary content 3. Allow interaction 4. Show secondary content 5. Invisible tasks ✦ Acknowledge action

Slide 15

Slide 15 text

D E S I G N C O M P O N E N T S 1. Verify destination 2. Primary content …

Slide 16

Slide 16 text

E X T E N D E D M E T R I C S • Time To First Paint (TTFP) - 3.5s • Verify Destination - 8s • Primary content - 11s • ... • Above The Fold (AFT) - 15.3s

Slide 17

Slide 17 text

U S E R T I M I N G A P I • Records custom JS timings on the page • Recorded by both RUM and Synthetic tools • Can be hard to match with user's reality • Uses JavaScript instrumentation https://github.com/sergeychernyshev/ux-capture

Slide 18

Slide 18 text

T H A N K Y O U ! [email protected] @SergeyChe