Performance and Feedback
Users experience performance emotionally before they measure it technically. Great UI is both objectively fast and subjectively responsive.
The Two Layers of Speed
| Layer | Goal |
|---|---|
| Actual performance | Good Core Web Vitals, efficient assets, lightweight rendering |
| Perceived performance | Immediate feedback, stable layouts, useful loading states |
UI Feedback Rules
Respond fast
- acknowledge clicks immediately
- show pressed, loading, or pending state quickly
- never leave users wondering whether the action worked
Preserve continuity
- avoid full-page spinners when a local loading state is enough
- keep existing data visible during refresh when possible
- use optimistic updates carefully when failure recovery is clear
Loading Patterns
| Pattern | Best Use |
|---|---|
| Skeletons | Content-heavy pages where structure is known |
| Inline spinner | Small, local async action |
| Progress indicator | Longer uploads, imports, or multi-step processes |
| Stale-while-refresh | Dashboards and list views |
UI Feedback Example
<button class="save-button" aria-live="polite">
<span class="label">Save changes</span>
<span class="spinner" hidden></span>
</button>
button.disabled = true;
label.textContent = 'Saving…';
spinner.hidden = false;
A tiny immediate response prevents double clicks and reassures the user that work is in progress.
Layout Stability
Cumulative layout shift destroys confidence.
Prevent it by:
- reserving space for images and async content
- avoiding banners that suddenly push the screen down
- keeping button labels stable between states
- sizing skeletons to match real content
Web Performance Priorities
| Area | Strong Practice |
|---|---|
| Images | Compress, resize, lazy-load where appropriate |
| Fonts | Limit families and weights, use sensible loading strategy |
| JS | Ship less, defer non-critical work |
| CSS | Keep the critical path lean |
| Data fetching | Cache intelligently and avoid unnecessary refetching |
Performance and Conversion
Performance affects trust and completion.
| Slow Experience | Likely Outcome |
|---|---|
| Laggy form inputs | Users doubt reliability |
| Slow product pages | Higher bounce and lower engagement |
| Jumpy checkout | Lower completion and more errors |
| Delayed feedback after click | Double submits and frustration |
Error and Retry Design
A strong interface plans for failure.
- explain failures in plain language
- keep user work intact
- show whether retry is safe
- offer fallback paths when possible
- log and monitor errors after launch
Common Mistakes
- global spinners that wipe out context
- loading states with no indication of expected wait
- animations that slow perceived speed instead of improving clarity
- heavy dashboards with no prioritization of above-the-fold value