@SimonHearne

The Psychology of Speed

Simon Hearne

Web Performance Solutions Engineer @ Akamai

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/

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 traffic 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/

What do we mean by speed?

Navigation Timing API

w3c.github.io/perf-timing-primer/

What actually matters?

  • Is it working?
  • Is it useful?
  • Is it interactive?

Is it working?

Is it working?

  • Time to First Byte
  • First Paint

Is it useful?

Is it useful?

  • DOM Content Loaded
  • DOM Complete
  • First Contentful Paint
  • Time to Visually Ready*

*mPulse only

Is it interactive?

Is it interactive?

  • Time to Interactive
  • First Input Delay
  • Time to First Interaction
  • Rage Clicks*

*mPulse only

POLL 1

What do you measure?

User Timing API ๐Ÿฆ„


window.addEventListener(
  'scroll',
  ()=>{
    performance.mark('first-scroll');
  },
  {once: true, capture: false, passive: true}
);
						

*probably don't use this in production

Timer Summary

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

developer.akamai.com/mpulse/whats-in-a-beacon/

My requirements(for multi-app analysis)

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

< psychology >

Objective vs Subjective time

Users don't measure your speed with a stopwatch

How long does ten minutes feel?

How long does ten minutes feel?

Does an hour feel longer to some people?

Our perception of time is subjective...

...but our measures are objective

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!

First Law of Service

satisfaction = perception - expectation

The Psychology of Waiting Lines by David Maister

Speed? ๐Ÿš€

How can we measure speed?

  • Synthetic Tests
  • Application Monitoring
  • Analytics
  • Real User Monitoring

POLL 2

How do you measure speed?

  • Synthetic Tests
  • Application Monitoring
  • Analytics
  • Real User Monitoring

< psychology >

Just Noticeable Difference

Faster, slower or the same?

reset | all

The 20% Rule: "Designing and Engineering Time" by Steven C. Seow, Ph.D.

So what?

Get 20% faster for existing customers to notice

Be 20% faster than your peers & competitors

Engagement? ๐Ÿ˜‘

What do you do when you feel engaged?

  • Hang around
  • Click on things
  • Complete an action

How can we measure engagement?

POLL 3

How do you measure engagement?

  • Session Length
  • Bounce Rate
  • Exit Rate
  • Time on page

Performance metrics correlate with engagement(session length)

~1Bn mPulse pageview beacons - early March 2019

Performance metrics correlate with engagement(time on page)

~1Bn mPulse pageview beacons - early March 2019

Performance metrics correlate with engagement(bounce rate)

~1Bn mPulse pageview beacons - early March 2019

Goals for maximum engagement

TimerGoal Speed
First Input Delay (FID)200ms
Time to First Byte (TTFB)500ms
First Contentful Paint (FCP)1,000ms
DOM Ready2,500ms
Time To Visually Ready (TTVR)2,500ms
Page Load Time (PLT)3,000ms
Time To Interactive4,000ms

Based on aggregate data - what are yours?

Measuring against your goals

What percentage of user experiences achieve the goal?

perfScore = beacons faster than goal / total beacon count

Enable latest features ๐Ÿ”Ž

TimerRate
TTFB100%
Page Load Time99%
DOM Ready96%
Time to Visually Ready88%
First Contentful Paint47%
Time to Interactive38%
First Input Delay21%

~1Bn mPulse pageview beacons - early March 2019

< psychology >

Human Computer Interaction principles

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: A Distributed Hypermedia Systems for Managing Knowledge in Organizations".
Robert Akscyn, Donald McCracken & Elise Yoder. 1988.

We've known this since 1969!

"Response Time in Man-Computer Conversational Interactions" by Robert B Miller. 1969.

So what?

  • The fundamentals don't change
  • Simple & fast is better than complex and slow
  • Give users something every ~1 second

Conclusions โœ๏ธ

  • Measuring speed is difficult
    • 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 configurations
  • JavaScript is (usually) the bottleneck
    • Analyse FID and TTI
    • Manage event listeners
    • Track third-party scripts

< hacking psychology >

Hacking human perception

There are no guarantees on performance

but you can buy some time

Anticipate Behaviourcheat with mouse events

EventFree Time!
touchStart-
mouseOver-
mouseDown-
click-

Use to anticipate navigations, product viewer actions etc.

but wait, there's more!

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

Keep Users EngagedSkeleton UI

Keep Users EngagedSkeleton UI

*use sparingly

Thank you ๐Ÿ™

@SimonHearne

simonhearne.com/presentations/psych-speed