Perceived Performance

The only kind that really matters.

Since there's no recording of this talk, press 'S' for speaker notes!

Hi, I'm Eli.

I make weird stuff on the internet

Today I'll be shrieking about

  • Why focusing on perceived performance is smart
  • How humans perceive time
  • Techniques to manage passive waiting time
  • Predictive design

Why Perceived
Performance Matters

Web Performance
is a matter of time.

Time is a funny thing.

Objective time
vs.
Subjective time

We optimize for objective time
but that isn't very efficient.

Just Noticeable Difference.

Time differences of 20% or less are imperceptible.

Steve Seow, Microsoft

Shoot for 30% speedup.

We don't live inside of a web performance blog post.

Focus on the subjective.
Better 💥 for 🤑.

How Humans
Sense Time

Active phase
vs.
Passive phase

Humans tend to overestimate passive waits by 36% .

Richard Larson, MIT

🚗💨
vs.
🚐🚗🚐

🤔
vs.
🕐🌮🕑🌮🕒

Let's do something about it

  • Make passive phase less painful
  • Make active phase a greater proportion
    of the total time

Un-Suck Waiting Time

What we can do

  • Respond to users immediately
  • Give users a sense of certainty
  • Occupy users' attention
  • Render minimum viable layout

Immediate
Response

Takes ~1 second for
flow to be disrupted.

Jakob Nielsen,
Neilsen Norman Group

Let's pack as much loading into that 1 second as possible.

Mousedown event
vs.
Click event

Mousedown gives you a
100-150ms head start.

Stay :active, kids!

Animation duration sweet spot is 150-200ms.

Give Users
Certainty

Uncertain waits feel longer.

David Maister

Progress ba.....rs!

Animation makes a difference.

Chris Harrison, Carnegie Mellon

Bars with accelerating
bands feel 12% faster.

Chris Harrison, Carnegie Mellon

Don't overdo it

  • < 1s? Don't bother.
  • ~ 1-3s? Stick to the basics.
  • ~ 3-10s? Time to get fancy.

But what about spinners?

Meh.

Occupy Users'
Attention

Reticulating splines.

If this feels like cheating,
that's because it is.

You dirty cheaters, you.

Minimum
Viable Layout

Rather than hasten passive phase, increase active phase's share.

Identify what your users
interact with first.

Render that first.

Lazyload everything else.

Not as simple as "above the fold".

Predictive
Design

🏃🏃🏃🏃🏃

We can do something similar.

Users aren't snowflakes.

Behavior follows patterns.

If we can predict what users will do, why not preload their next action before they take it?

Doesn't have to be crazy complicated.

Predictive design is a very powerful tool.

Use it wisely.

Mitigate risk with data.

TLDR;

At the end of the day, what matters is how it feels.

Think about how you
want to use your resources.

Rely on data to
make sound decisions.

Focus on the user.

Thanks y'all!

http://assets.eli.wtf/talks/perceived-perf-talk

http://eli.wtf/fun