Designing for subtle performance gains

Performance is rarely one big win — it is the sum of many small, compounding ones. This article covers the optimizations that reliably improve how fast a site *feels*: image strategy, critical-path CSS, CDN caching, and browser hints. None of these are glamorous, but together they remove the friction users feel most.

1. Images are usually the heaviest cost

Images dominate page weight. Optimize them first:

• Serve modern formats (**WebP**, **AVIF**) with fallbacks.
• Use `srcset` so devices download an appropriately sized image.
• Lazy-load offscreen images with `loading="lazy"`.
• Reserve space with width/height to avoid layout shift.

html
<img
  src="/hero.avif"
  srcset="/hero-480.avif 480w, /hero-960.avif 960w"
  sizes="(max-width: 600px) 480px, 960px"
  loading="lazy"
  alt="Product hero"
/>

Next.js <Image> handles most of this automatically — use it.

2. Shorten the critical path

The critical path is everything the browser must download and run before the page is usable.

• Inline critical CSS; defer the rest.
• Minimize render-blocking scripts; use `defer` or `async`.
• Reduce third-party scripts (analytics, chat widgets) — they add up.

3. Cache at the edge

A CDN serves content from a location close to the user:

• Set long-lived `Cache-Control` for static assets (hashed filenames).
• Use short-lived or stale-while-revalidate for HTML.
• Purge on deploy so users get new code promptly.

http
Cache-Control: public, max-age=31536000, immutable

4. Use browser hints

Tell the browser what's coming so it can prepare:

• `<link rel="preload">` for critical fonts or hero images.
• `<link rel="prefetch">` for the next likely page.
• `<link rel="dns-prefetch">` for third-party origins.

5. Measure before and after

Never optimize blind. Use Lighthouse and real-user metrics:

• **LCP** — largest contentful paint (loading).
• **CLS** — cumulative layout shift (stability).
• **INP** — interaction to next paint (responsiveness).

A simple local benchmark script helps you catch regressions:

bash
npx lighthouse https://yoursite.com --view

Heuristics for prioritization

1. Fix what the user sees first (above the fold). 2. Remove the heaviest unused asset. 3. Cache what's requested often.

Small wins, applied consistently, beat occasional heroic rewrites. Performance is a habit, not a project.