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
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
Passive phase

Humans tend to overestimate passive waits by 36% .

Richard Larson, MIT



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


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
Click event

Mousedown gives you a
100-150ms head start.

Stay :active, kids!

Animation duration sweet spot is 150-200ms.

Give Users

Uncertain waits feel longer.

David Maister


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?


Occupy Users'

Reticulating splines.

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

You dirty cheaters, you.

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



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.


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!