# Designing for Perceived Performance: Faster Than Light

> Learn how design can make your application feel faster than it really is, using cognitive psychology techniques and visual tricks.

*Tags: ux, concept, ui-design, product-design, development*

---


> [!info] Quick Definition
> **Perceived Performance** is the time a user feels it takes for a system to respond, regardless of the actual speed (milliseconds) of the connection or processor. In product design, **perception is reality.**


## Why does Perceived Performance matter?

We can have the best-optimized application in the world, but if the user stares at a blank screen for 2 seconds, they will think the app is slow.

On the contrary, an app that takes the same 2 seconds but shows a [Skeleton Screen](/concepts/skeleton-vs-optimistic-ui/), a loading bar with a smooth animation, or interesting context messages will be perceived as much faster and more pleasant.

## The 4 Levels of Temporal Perception (Response Limits)

There are biological limits to how the human brain perceives time in an interface:

- **0.1 seconds (100ms):** The reaction feels **instant**. The user feels that they caused the change. (Ideal use: button presses, cursor movements).
- **1.0 second (1000ms):** The user experiences a small delay, but their mental flow is not interrupted. A loading bar isn't needed, but a subtle state change (hover, focus) is necessary.
- **10 seconds (10s):** This is the limit of attention. After 10 seconds, the user will want to do something else. You **MUST** show a progress bar or constant feedback to prevent them from leaving.

## Design Strategies to "Speed Up" Time

### 1. Immediate Response (Thermal Feedback)
Show a visual change instantly upon clicking, even if the actual action takes time.
- **Example:** The button physically sinks (haptic or visual) before the page starts loading.

### 2. Occupy the User's Time
Time passes faster when we are entertained or receiving information.
- **Example:** Slack or Notion show inspiring quotes or usage tips during the initial load. The user reads, and the time seems to decrease.

### 3. Progressive Loading (Lazy Loading)
Don't load everything at once. Show the critical parts of the interface first (main text and images) and leave the secondary ones for last.
- **Use:** In long articles, show the readable text first; heavy images can load while the user starts reading.

### 4. Optimistic Updates (Optimistic UI)
[[Optimistic Updates and Rollback UX]]
Update the application state before receiving the OK from the server. This is the ultimate perceived performance technique.

### 5. Deceptive Loading Bars (Speed Psychology)
Loading bars that advance irregularly (starting fast and slowing down at the end) are perceived as a faster process than a bar that advances at a constant speed.

## Benefits for Product and Business

- **Lower Abandonment Rate:** Users are impatient. If the sense of speed is good, they stay.
- **Higher Sense of Quality:** A fast product is perceived as a professional, reliable, and well-built product.
- **Infrastructure Savings:** Sometimes it's cheaper to improve the perceived performance design than to invest millions in hyper-fast servers.

## Mentor's Tips

- **Don't Assume the Spinner's "Error":** If you can use a Skeleton instead of a spinning wheel, do so. The spinner is a visual reminder that the system is making you wait.
- **Prioritize the Visible (Above the Fold):** Make sure what the user sees first is what loads first.
- **Measure "Time to Content":** Don't just look at total load time. Look at how long it takes for the user to read their first message or notification. That is the data that truly matters.

## Useful Resources and Tools

- **Luke Wroblewski:** [Designing for Perceived Performance](https://www.lukew.com/ff/entry.asp?1926)
- **NNGroup:** [The Psychology of Waiting Lines and UX](https://www.nngroup.com/articles/psychology-of-waiting-lines-ux/)
- **Harry Roberts:** [Performance Design](https://csswizardry.com/2020/05/performance-design-ui-is-the-performance/)
- **Articles:** [Everything you need to know about Perceived Performance](https://uxdesign.cc/perceived-performance-design-tricks-9a3e8e3e8e3)
---
[[skeleton-vs-optimistic-ui]]
[[interaction-latency-budgets]]
[[optimistic-updates-rollback]]
[[cognitive-load-management]]


---

Source: https://www.fernandoux.com/en/wiki/concepts/perceived-performance-design/