The Psychology of Speed

A presentation at Akamai Tech Day in April 2019 in Stockholm, Sweden by Simon Hearne

Slide 1

Slide 1

The Psychology of Speed Simon Hearne Web Performance Solutions Engineer @ Akamai simonhearne.com/presentations/psych-speed/

Slide 2

Slide 2

We’ve all seen the studies… Walmart sees 1% increase in revenue for every 100ms improvement wpostats.com/tags/conversion/

Slide 3

Slide 3

We’ve all seen the studies… Walmart sees 1% increase in revenue for every 100ms improvement Staples saw a 10% increase in conversion rate when reducing homepage load time by one second wpostats.com/tags/conversion/

Slide 4

Slide 4

We’ve all seen the studies… Walmart sees 1% increase in revenue for every 100ms improvement Staples saw a 10% increase in conversion rate when reducing homepage load time by one second AliExpress saw 10.5% increase in conversions when reducing load time by 36% wpostats.com/tags/conversion/

Slide 5

Slide 5

We’ve all seen the studies… The BBC loses an additional 10% of users for every additional second it takes to load wpostats.com/tags/engagement/

Slide 6

Slide 6

We’ve all seen the studies… The BBC loses an additional 10% of users for every additional second it takes to load Pinterest improved load time by 40% and saw 15% increase in SEO traf c and 15% increase in conversions wpostats.com/tags/engagement/

Slide 7

Slide 7

We’ve all seen the studies… The BBC loses an additional 10% of users for every additional second it takes to load Pinterest improved load time by 40% and saw 15% increase in SEO traf c and 15% increase in conversions The Financial times increased user engagement by 30% when they released the new, performance focused FT.com wpostats.com/tags/engagement/

Slide 8

Slide 8

What do we mean by speed?

Slide 9

Slide 9

What do we mean by speed? Simon Hearne @simonhearne I’m writing a new performance talk and I need your help! What’s your go-to performance measure? 13 11:34 PM - Mar 28, 2019 32% Load Time 19% DOM Ready / complete 33% First paint 16% Other / Lazy

Slide 10

Slide 10

Navigation Timing API

Slide 11

Slide 11

What actually matters?

Slide 12

Slide 12

What actually matters? Is it working?

Slide 13

Slide 13

What actually matters? Is it working? Is it useful?

Slide 14

Slide 14

What actually matters? Is it working? Is it useful? Is it interactive?

Slide 15

Slide 15

Is it working?

Slide 16

Slide 16

0:00 / 0:03

Slide 17

Slide 17

Is it working? Time to First Byte First Paint

Slide 18

Slide 18

Is it useful?

Slide 19

Slide 19

0:00 / 0:04

Slide 20

Slide 20

Is it useful? DOM Content Loaded DOM Complete First Contentful Paint Time to Visually Ready* *mPulse only

Slide 21

Slide 21

Is it interactive? 0:00 / 0:03

Slide 22

Slide 22

Is it interactive? Time to Interactive First Input Delay Time to First Interaction Rage Clicks* *mPulse only

Slide 23

Slide 23

POLL 1 What do you measure?

Slide 24

Slide 24

User Timing API window.addEventListener( ‘scroll’, ()=>{ performance.mark(‘first-scroll’); }, {once: true, capture: false, passive: true} ); *probably don’t use this in production User Timing API 94.23% global browser support caniuse.com

Slide 25

Slide 25

Timer Summary

Slide 26

Slide 26

Timer Summary Time to First Byte (TTFB) ⇨ The speed of the delivery stack

Slide 27

Slide 27

Timer Summary Time to First Byte (TTFB) DOM Content Loaded (DCL) ⇨ ⇨ The speed of the delivery stack The speed of critical dependencies

Slide 28

Slide 28

Timer Summary Time to First Byte (TTFB) DOM Content Loaded (DCL) DOM Ready ⇨ ⇨ ⇨ The speed of the delivery stack The speed of critical dependencies How fast the page is parsed

Slide 29

Slide 29

Timer Summary Time to First Byte (TTFB) DOM Content Loaded (DCL) DOM Ready First Paint (FP) ⇨ ⇨ ⇨ ⇨ The speed of the delivery stack The speed of critical dependencies How fast the page is parsed The rst time something is rendered

Slide 30

Slide 30

Timer Summary Time to First Byte (TTFB) DOM Content Loaded (DCL) DOM Ready First Paint (FP) First Contentful Paint (FCP) ⇨ ⇨ ⇨ ⇨ ⇨ The speed of the delivery stack The speed of critical dependencies How fast the page is parsed The rst time something is rendered When the user might rst see content

Slide 31

Slide 31

Timer Summary Time to First Byte (TTFB) DOM Content Loaded (DCL) DOM Ready First Paint (FP) First Contentful Paint (FCP) Time To Visually Ready (TTVR) ⇨ ⇨ ⇨ ⇨ ⇨ ⇨ The speed of the delivery stack The speed of critical dependencies How fast the page is parsed The rst time something is rendered When the user might rst see content When key content is rendered

Slide 32

Slide 32

Timer Summary Time to First Byte (TTFB) DOM Content Loaded (DCL) DOM Ready First Paint (FP) First Contentful Paint (FCP) Time To Visually Ready (TTVR) Page Load Time (PLT) ⇨ ⇨ ⇨ ⇨ ⇨ ⇨ ⇨ The speed of the delivery stack The speed of critical dependencies How fast the page is parsed The rst time something is rendered When the user might rst see content When key content is rendered When the page is complete

Slide 33

Slide 33

Timer Summary Time to First Byte (TTFB) DOM Content Loaded (DCL) DOM Ready First Paint (FP) First Contentful Paint (FCP) Time To Visually Ready (TTVR) Page Load Time (PLT) Time To Interactive ⇨ ⇨ ⇨ ⇨ ⇨ ⇨ ⇨ ⇨ The speed of the delivery stack The speed of critical dependencies How fast the page is parsed The rst time something is rendered When the user might rst see content When key content is rendered When the page is complete When the app is rst responsive to input

Slide 34

Slide 34

Timer Summary Time to First Byte (TTFB) DOM Content Loaded (DCL) DOM Ready First Paint (FP) First Contentful Paint (FCP) Time To Visually Ready (TTVR) Page Load Time (PLT) Time To Interactive Time to First Interaction (TTFI) ⇨ ⇨ ⇨ ⇨ ⇨ ⇨ ⇨ ⇨ ⇨ The speed of the delivery stack The speed of critical dependencies How fast the page is parsed The rst time something is rendered When the user might rst see content When key content is rendered When the page is complete When the app is rst responsive to input When a user rst tries to interact

Slide 35

Slide 35

Timer Summary Time to First Byte (TTFB) DOM Content Loaded (DCL) DOM Ready First Paint (FP) First Contentful Paint (FCP) Time To Visually Ready (TTVR) Page Load Time (PLT) Time To Interactive Time to First Interaction (TTFI) First Input Delay (FID) ⇨ ⇨ ⇨ ⇨ ⇨ ⇨ ⇨ ⇨ ⇨ ⇨ The speed of the delivery stack The speed of critical dependencies How fast the page is parsed The rst time something is rendered When the user might rst see content When key content is rendered When the page is complete When the app is rst responsive to input When a user rst tries to interact How long it takes to respond to input

Slide 36

Slide 36

Timer Summary Time to First Byte (TTFB) DOM Content Loaded (DCL) DOM Ready First Paint (FP) First Contentful Paint (FCP) Time To Visually Ready (TTVR) Page Load Time (PLT) Time To Interactive Time to First Interaction (TTFI) First Input Delay (FID) ⇨ ⇨ ⇨ ⇨ ⇨ ⇨ ⇨ ⇨ ⇨ ⇨ The speed of the delivery stack The speed of critical dependencies How fast the page is parsed The rst time something is rendered When the user might rst see content When key content is rendered When the page is complete When the app is rst responsive to input When a user rst tries to interact How long it takes to respond to input developer.akamai.com/mpulse/whats-in-a-beacon/

Slide 37

Slide 37

My requirements (for multi-app analysis)

Slide 38

Slide 38

My requirements (for multi-app analysis)

  1. Available in most browsers

Slide 39

Slide 39

My requirements (for multi-app analysis)

  1. Available in most browsers 2. Representative of user experience

Slide 40

Slide 40

< psychology >

Slide 41

Slide 41

Objective vs Subjective time Users don’t measure your speed with a stopwatch

Slide 42

Slide 42

How long does ten minutes feel?

Slide 43

Slide 43

How long does ten minutes feel?

Slide 44

Slide 44

Does an hour feel longer to some people?

Slide 45

Slide 45

Our perception of time is subjective… …but our measures are objective

Slide 46

Slide 46

What about web performance?

Slide 47

Slide 47

What about web performance? User perception is ~15% slower than objective measures (more waiting room than romantic evening)

Slide 48

Slide 48

What about web performance? User perception is ~15% slower than objective measures (more waiting room than romantic evening) Find the metric closest to user perception* *this depends entirely on your app!

Slide 49

Slide 49

First Law of Service satisfaction = perception - expectation The Psychology of Waiting Lines by David Maister

Slide 50

Slide 50

Speed?

Slide 51

Slide 51

How can we measure speed?

Slide 52

Slide 52

How can we measure speed? Synthetic Tests

Slide 53

Slide 53

How can we measure speed? Synthetic Tests Application Monitoring

Slide 54

Slide 54

How can we measure speed? Synthetic Tests Application Monitoring Analytics

Slide 55

Slide 55

How can we measure speed? Synthetic Tests Application Monitoring Analytics Real User Monitoring

Slide 56

Slide 56

POLL 2 How do you measure speed? Synthetic Tests Application Monitoring Analytics Real User Monitoring

Slide 57

Slide 57

< psychology >

Slide 58

Slide 58

Just Noticeable Difference

Slide 59

Slide 59

Faster, slower or the same? reset | all

Slide 60

Slide 60

Faster, slower or the same? The 20% Rule: “Designing and Engineering Time” by Steven C. Seow, Ph.D. reset | all

Slide 61

Slide 61

So what?

Slide 62

Slide 62

So what? Get 20% faster for existing customers to notice

Slide 63

Slide 63

So what? Get 20% faster for existing customers to notice Be 20% faster than your peers & competitors

Slide 64

Slide 64

Engagement?

Slide 65

Slide 65

What do you do when you feel engaged?

Slide 66

Slide 66

What do you do when you feel engaged? Hang around

Slide 67

Slide 67

What do you do when you feel engaged? Hang around Click on things

Slide 68

Slide 68

What do you do when you feel engaged? Hang around Click on things Complete an action

Slide 69

Slide 69

How can we measure engagement?

Slide 70

Slide 70

How can we measure engagement? Simon Hearne @simonhearne How do you measure “user engagement” on your site? #SEOChat #ecomchat 1 10:09 AM - Mar 15, 2019 33% Session Length (pages) 22% Session Duration (mins) 22% Bounce Rate 23% Other? (pls comment)

Slide 71

Slide 71

POLL 3 How do you measure engagement? Session Length Bounce Rate Exit Rate Time on page

Slide 72

Slide 72

Performance metrics correlate with engagement (session length) 10 Timer TTFB PLT TTI FCP TTVR DOM Ready FID 9 Session Length (pages) 8 7 6 5 4 3 2 1 0 0 1,000 2,000 3,000 4,000 5,000 6,000 7,000 8,000 9,000 10,000 First Page Speed (ms) ~1Bn mPulse pageview beacons - early March 2019

Slide 73

Slide 73

Performance metrics correlate with engagement (time on page) 180 Timer TTFB PLT TTI FCP TTVR DOM Ready FID 160 140 Time on Page (s) 120 100 80 60 40 20 0 0 1,000 2,000 3,000 4,000 5,000 6,000 7,000 8,000 9,000 10,000 First Page Speed (ms) ~1Bn mPulse pageview beacons - early March 2019

Slide 74

Slide 74

Performance metrics correlate with engagement (bounce rate) 100% Timer FCP PLT TTI TTFB DOM Ready FID 90% 80% Bounce Rate 70% 60% 50% 40% 30% 20% 10% 0% 0 1,000 2,000 3,000 4,000 5,000 6,000 7,000 8,000 9,000 10,000 First Page Speed (ms) ~1Bn mPulse pageview beacons - early March 2019

Slide 75

Slide 75

Goals for maximum engagement Timer First Input Delay (FID) Time to First Byte (TTFB) First Contentful Paint (FCP) DOM Ready Time To Visually Ready (TTVR) Page Load Time (PLT) Time To Interactive Goal Speed 200ms 500ms 1,000ms 2,500ms 2,500ms 3,000ms 4,000ms Based on aggregate data - what are yours?

Slide 76

Slide 76

Measuring against your goals What percentage of user experiences achieve the goal? perfScore = beacons faster than goal / total beacon count

Slide 77

Slide 77

Enable latest features Timer TTFB Page Load Time DOM Ready Time to Visually Ready First Contentful Paint Time to Interactive First Input Delay Rate 100% 99% 96% 88% 47% 38% 21% ~1Bn mPulse pageview beacons - early March 2019

Slide 78

Slide 78

< psychology >

Slide 79

Slide 79

Human Computer Interaction principles

Slide 80

Slide 80

Akscyn’s Law “ Hypertext systems should take about 1/4 second to move from one place to another. If the delay is longer, people may be distracted; if the delay is much longer, people will stop using the system “KMS: KMS A Distributed Hypermedia Systems for Managing Knowledge in Organizations”. Robert Akscyn, Donald McCracken & Elise Yoder. 1988.

Slide 81

Slide 81

We’ve known this since 1969! “Response Time in Man-Computer Conversational Interactions” by Robert B Miller. 1969.

Slide 82

Slide 82

So what?

Slide 83

Slide 83

So what? The fundamentals don’t change

Slide 84

Slide 84

So what? The fundamentals don’t change Simple & fast is better than complex and slow

Slide 85

Slide 85

So what? The fundamentals don’t change Simple & fast is better than complex and slow Give users something every ~1 second

Slide 86

Slide 86

Conclusions ✍

Slide 87

Slide 87

Conclusions ✍ Measuring speed is dif cult Use metrics which correlate with engagement Track the 75th - 95th percentile (with RUM) Calculate scores against goal speeds

Slide 88

Slide 88

Conclusions ✍ Measuring speed is dif cult Use metrics which correlate with engagement Track the 75th - 95th percentile (with RUM) Calculate scores against goal speeds Deliver something to the user quickly Server-side rendering Inline critical dependencies Optimise your CDN con gurations

Slide 89

Slide 89

Conclusions ✍ Measuring speed is dif cult Use metrics which correlate with engagement Track the 75th - 95th percentile (with RUM) Calculate scores against goal speeds Deliver something to the user quickly Server-side rendering Inline critical dependencies Optimise your CDN con gurations JavaScript is (usually) the bottleneck Analyse FID and TTI Manage event listeners Track third-party scripts

Slide 90

Slide 90

< hacking psychology >

Slide 91

Slide 91

Hacking human perception

Slide 92

Slide 92

There are no guarantees on performance

Slide 93

Slide 93

There are no guarantees on performance but you can buy some time

Slide 94

Slide 94

Anticipate Behaviour cheat with mouse events Click Me! Event Free Time! touchStart

mouseOver

mouseDown

click

Use to anticipate navigations, product viewer actions etc.

Slide 95

Slide 95

Anticipate Behaviour cheat with mouse events Click Me! Event Free Time! touchStart

mouseOver

mouseDown

click

Use to anticipate navigations, product viewer actions etc. but wait, there’s more!

Slide 96

Slide 96

mouseDown buys us 50 - 150ms hover transition buys another 50 - 100ms!

Slide 97

Slide 97

Keep Users Engaged Skeleton UI

Slide 98

Slide 98

Keep Users Engaged Skeleton UI

Slide 99

Slide 99

Keep Users Engaged Skeleton UI *use sparingly

Slide 100

Slide 100

Thank you @SimonHearne simonhearne.com/presentations/psych-speed @SimonHearne