@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?

There are plenty of technical measures

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?

  • Page Load Time
  • DOM [ready|interactive|complete]
  • First [contentful|meaningful] Paint
  • Time to Interactive
  • Custom Timers

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 Interactive (TTI)When 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 a minute feel?

How long does a minute feel?

Does a minute feel longer to some people?

Our perception of time is subjective...

...but our measures are objective

What about web performance?

Perception is 15%-35% slower than objective measures
(more waiting room than romantic evening)

Find the metric closest to user perception*

*this depends entirely on your app!

We cannot control expectation

satisfaction = perception - expectation

The Psychology of Waiting Lines by David Maister

We can optimise for subjective time...

  • Progressive loading
  • Skeleton UI
  • Optimistic UI
  • Progress Indicators

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

Measuring Engagement 😑

What do you do when you feel engaged?

  • Hang around
  • Click on things
  • Complete an action

POLL 3

How do you measure engagement?

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

Performance metrics correlate with engagement(session length)

~1Bn mPulse pageview beacons - early March 2019

HCI Principles

  • Give feedback within 100ms
  • Update every 1,000ms
  • Complete actions within 3,000ms

* on all devices

Goals for maximum engagement

TimerGoal Speed
First Input Delay (FID)100ms
First Contentful Paint (FCP)1,000ms
Time To Visually Ready (TTVR)3,000ms
Time To Interactive3,500ms

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

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
    • Track longTasks, FID and TTI
    • Manage event listeners
    • Track third-party scripts

< 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.

Keep Users EngagedSkeleton UI

Keep Users EngagedSkeleton UI

*use sparingly

Assume success

Fill the gaps

Thank you 🙏

@SimonHearne

simonhearne.com/presentations/psych-speed