Performance & Perceived Speed

Performance is a UX issue, not just an engineering issue. A 1-second delay in page load time reduces conversions by 7% (Akamai). A page that takes over 3 seconds to load loses 53% of mobile visitors (Google). Speed is the most important UX feature you'll never see in a design mockup.

Core Web Vitals

Google's Core Web Vitals are the three metrics that matter most for user experience. They affect search rankings and directly correlate with user satisfaction and conversion.

Measuring Core Web Vitals

// Measure Core Web Vitals with the web-vitals library
import { onLCP, onINP, onCLS } from 'web-vitals';

onLCP(metric => sendToAnalytics('LCP', metric.value));
onINP(metric => sendToAnalytics('INP', metric.value));
onCLS(metric => sendToAnalytics('CLS', metric.value));

LCP: Largest Contentful Paint

The time it takes for the largest visible content element (image, heading, text block) to render.

Common causes of poor LCP:

<!-- Preload the LCP image -->
<link rel="preload" as="image" href="/hero-image.webp">

<!-- Preload critical font -->
<link rel="preload" as="font" type="font/woff2"
  href="/fonts/inter-var.woff2" crossorigin>

INP: Interaction to Next Paint

Measures the delay between a user interaction (click, tap, key press) and the next visual update. Replaced FID (First Input Delay) in 2024.

Common causes of poor INP:

CLS: Cumulative Layout Shift

Measures how much page content unexpectedly shifts during the page lifecycle.

Common causes of CLS:

<!-- Always specify image dimensions to prevent CLS -->
<img src="photo.webp" width="800" height="600" alt="Description"
  style="max-width: 100%; height: auto;">

/* Reserve space with aspect-ratio */
.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
  background: #f0f0f0;
}

Response Time Psychology

How users perceive different wait times:

The Doherty Threshold

When system response is under 400ms, users and computers establish a conversational rhythm. Productivity increases dramatically. Above 400ms, users lose their flow state. Target < 400ms for all common interactions.

Perceived Performance Techniques

You can't always make things actually faster. But you can make them feel faster.

1. Optimistic UI

Show the result immediately, sync with the server in the background.

User clicks "Like":
┌────────────────────────┐
│ ♡ 42 likes             │  User clicks heart
└────────────────────────┘
         ↓ (instant)
┌────────────────────────┐
│ ♥ 43 likes             │  Immediately updated (no spinner)
└────────────────────────┘
         ↓ (background)
Server saves. If it fails → revert to ♡ 42 + show error toast.

Use for: Likes, favorites, toggles, adding to lists, marking as read. Don't use for: Payments, deleting data, sending messages.

2. Skeleton Screens

Show the structure of the content while it loads. Better than spinners because they set expectations about the layout.

Loading...                    vs.    Skeleton:
┌────────────────────────┐          ┌────────────────────────┐
│                        │          │ ░░░░░░░░░░░░░░░░░░░░   │
│                        │          │                        │
│       ⟳ Loading...     │          │ ░░░░░░░░░░░░░░░░░░░░░  │
│                        │          │ ░░░░░░░░░░░░░░░░░░░░░  │
│                        │          │ ░░░░░░░░░░░░           │
│                        │          │                        │
│                        │          │ ░░░░░░░░               │
└────────────────────────┘          └────────────────────────┘
"I have no idea what's coming"      "I can see what's about to appear"

Rules for skeletons:

• Match the actual content shape (text lines, image placeholders, card outlines)
• Use a shimmer/wave animation (not pulsing; it's distracting)
• Don't show skeletons for content that loads in < 300ms (unnecessary visual noise)
• Replace skeleton with content seamlessly (no flash)

3. Progressive Loading

Load and display content in priority order:

1. First: Text content (fastest, most important)
2. Second: Above-fold images
3. Third: Below-fold images (lazy loaded)
4. Fourth: Interactive features, animations
5. Last: Analytics, non-essential third-party scripts

4. Preloading and Prefetching

Anticipate what the user will do next and load it before they click.

<!-- Preload: high priority, needed for current page -->
<link rel="preload" href="/critical.css" as="style">
<link rel="preload" href="/hero.webp" as="image">

<!-- Prefetch: lower priority, needed for likely next page -->
<link rel="prefetch" href="/dashboard">

<!-- Preconnect: establish connection to third-party origin -->
<link rel="preconnect" href="https://api.example.com">

<!-- DNS Prefetch: resolve DNS for third-party origin -->
<link rel="dns-prefetch" href="https://analytics.example.com">

Smart prefetching:

• Prefetch the most likely next page (e.g., after login → prefetch dashboard)
• Prefetch on hover for navigation links (200ms delay gives ~300ms head start)
• Don't prefetch everything. It wastes bandwidth on mobile

5. Instant Navigation Feedback

Even if the page takes time to load, acknowledge the click immediately:

6. Progress Indicators

For operations > 3 seconds, show progress:

Image Optimization

Images are typically the heaviest assets on a page and the biggest opportunity for performance gains.

Format Selection

<!-- Use picture element for format fallback -->
<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Description" width="800" height="600"
    loading="lazy" decoding="async">
</picture>

Responsive Images

Serve different sizes based on viewport:

<img
  srcset="photo-400w.webp 400w,
          photo-800w.webp 800w,
          photo-1200w.webp 1200w,
          photo-1600w.webp 1600w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1000px) 50vw,
         33vw"
  src="photo-800w.webp"
  alt="Description"
  width="800" height="600"
  loading="lazy"
  decoding="async"
>

Image Loading Strategy

JavaScript and Bundle Optimization

// Dynamic import — only load chart library when user visits analytics page
const loadChartLibrary = () => import('./charts');

// Route-level code splitting in React
const Dashboard = React.lazy(() => import('./pages/Dashboard'));
const Settings = React.lazy(() => import('./pages/Settings'));

Font Optimization

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;       /* Show fallback immediately */
  unicode-range: U+0000-00FF; /* Only load Latin characters */
}

Performance Budget

Set explicit limits and fail builds that exceed them:

Common Mistakes

Key Takeaways

• Core Web Vitals (LCP < 2.5s, INP < 200ms, CLS < 0.1) are the minimum targets. Measure with real user data, not just lab data.
• Perceived speed matters as much as actual speed. Use skeleton screens, optimistic UI, and progressive loading.
• Respond to every user action within 100ms. If the backend takes longer, show feedback immediately and sync in the background.
• Images are the biggest opportunity: use modern formats (WebP/AVIF), responsive sizes, and lazy loading.
• Set a performance budget and enforce it in CI/CD. Performance degrades unless you actively protect it.
• Preload critical resources (LCP image, key font), prefetch likely next pages.
• Every millisecond matters: 100ms delay = 7% lower conversion. Performance is a business metric, not just a technical one.