Web Performance Optimization
Systematic approach to diagnosing and fixing web performance issues across loading, rendering, and runtime.
Business Impact: 1 second delay = 7% conversion loss. 0.1s improvement = 8% increase in conversions.
When to Use
- Lighthouse score below 90 or page speed regression
- Slow LCP (>2.5s), high CLS (>0.1), poor INP (>200ms), high TBT
- Large JavaScript bundles, render-blocking resources
- Layout shifts, jank, slow Time to Interactive (TTI)
- Setting up performance monitoring or budgets
- Implementing View Transitions, Speculation Rules, Server Components, Islands Architecture
Quick Reference
| Metric |
Target |
Tool |
| LCP |
< 2.5s |
Lighthouse, CrUX |
| CLS |
< 0.1 |
Lighthouse, Layout Shift Debugger |
| INP |
< 200ms |
Chrome DevTools Performance |
| TBT |
< 200ms |
Lighthouse |
| TTFB |
< 800ms |
WebPageTest, curl -w |
| FCP |
< 1.8s |
Lighthouse |
Which Reference Do I Need?
digraph perf_decision {
rankdir=TB;
node [shape=box];
problem [label="What's the problem?" shape=diamond];
qw [label="quick-wins.md\n1hr/1day/1week optimizations"];
cwv [label="core-web-vitals.md\nMetric-specific debugging"];
opt [label="optimization-techniques.md\nJS/CSS/image/caching/backend"];
mod [label="modern-patterns-2025.md\nView Transitions, Speculation Rules, RSC"];
fw [label="framework-specific.md\nNext.js, React, Vue, Astro, Svelte"];
mon [label="monitoring.md\nLighthouse CI, RUM, APM"];
problem -> qw [label="need fast ROI"];
problem -> cwv [label="Core Web Vitals failing"];
problem -> opt [label="bundle/backend/caching"];
problem -> mod [label="cutting-edge patterns"];
problem -> fw [label="framework-specific"];
problem -> mon [label="no visibility"];
}
Performance Budget
| Resource |
Budget |
Rationale |
| Total page weight |
< 1.5 MB |
3G loads in ~4s |
| JavaScript (compressed) |
< 300 KB |
Parsing + execution time |
| CSS (compressed) |
< 100 KB |
Render blocking |
| Images (above-fold) |
< 500 KB |
LCP impact |
| Fonts |
< 100 KB |
FOIT/FOUT prevention |
| Third-party |
< 200 KB |
Uncontrolled latency |
Core Web Vitals at a Glance
| Metric |
Target |
Lighthouse Weight |
Key Optimization |
| LCP (Largest Contentful Paint) |
<2.5s |
25% |
Optimize images, preload critical resources |
| INP (Interaction to Next Paint) |
<200ms |
30% |
Reduce JavaScript, break up long tasks |
| CLS (Cumulative Layout Shift) |
<0.1 |
25% |
Reserve space, optimize fonts |
| TBT (Total Blocking Time) |
<200ms |
30% |
Code splitting, defer non-critical JS |
| FCP (First Contentful Paint) |
<1.8s |
10% |
Eliminate render-blocking resources |
-> See core-web-vitals.md for debugging workflows per metric
Quick Wins (by time investment)
| Time |
Optimization |
Impact |
| 1hr |
loading="lazy" on below-fold images |
40-60% weight reduction |
|
gzip/brotli compression |
70-80% transfer reduction |
|
rel="preconnect" for critical origins |
100-500ms savings |
|
width/height on images |
Prevents CLS |
| 1day |
Route-based code splitting |
30-50% bundle reduction |
|
LCP image: fetchpriority="high" + WebP/AVIF |
200-400ms LCP improvement |
|
Basic service worker |
Instant repeat visits |
| 1wk |
Full HTTP + service worker caching |
Reduced server load |
|
Tree shaking + dead code elimination |
40-60% bundle reduction |
|
Lighthouse CI + RUM monitoring |
Catch regressions |
-> See quick-wins.md for implementation details
Runtime Performance Checklist
- Batch DOM reads/writes to avoid layout thrashing
- Debounce scroll/resize handlers (100ms+)
- Use
requestAnimationFrame for animations (not setInterval)
- Virtualize long lists (1000+ items):
content-visibility: auto or react-window/@tanstack/virtual
- Avoid synchronous third-party scripts
-> See optimization-techniques.md for backend, image, JS, CSS, and caching techniques
Modern Patterns (2025)
| Pattern |
Key Benefit |
Complexity |
| View Transitions |
Smooth page transitions, zero JS cost |
Low |
| Speculation Rules |
0ms navigation via prerendering |
Low |
| Server Components |
Zero-bundle server-only components |
Medium |
| Priority Hints |
fetchpriority="high" for LCP |
Low |
| content-visibility |
7x faster rendering for long pages |
Low |
| Islands Architecture |
90-99% less JS shipped |
High |
-> See modern-patterns-2025.md for implementation details
Red Flags
Stop and reconsider if:
- Optimizing without baseline measurement
- Focusing only on Lighthouse score (ignoring field/RUM data)
- Ignoring mobile performance (53% abandon after 3s)
- Loading all resources eagerly (no lazy loading)
- No caching strategy implemented
- Third-party scripts loaded synchronously
- Missing performance monitoring/budgets
- Layout thrashing in scroll/resize handlers
- Long tasks (>50ms) blocking main thread
Real-World Impact
- Pinterest: 40% faster perceived wait = 15% more sign-ups + 15% more SEO traffic
- Zalando: 0.1s improvement = 0.7% revenue increase
- AutoAnything: 50% faster load = 12-13% sales increase
- Core Web Vitals are Google ranking factors (June 2021+)
Common Mistakes
| Mistake |
Fix |
| Optimizing before measuring |
Always profile first with Lighthouse/DevTools |
| Lazy-loading above-the-fold images |
Only lazy-load below-fold; eager-load LCP image |
| Bundling unused CSS/JS |
Use coverage tab in DevTools, then code-split |
Missing width/height on images |
Causes CLS — always set dimensions or use aspect-ratio |
| Blocking render with synchronous JS |
Use defer or async on non-critical scripts |
| Ignoring server response time (TTFB) |
Frontend optimization can't fix a slow backend |
References
- Quick Wins - Time-boxed optimizations with ROI ratings
- Core Web Vitals - LCP, INP, CLS debugging workflows
- Optimization Techniques - Backend, image, JS, CSS, caching
- Modern Patterns 2025 - View Transitions, Speculation Rules, RSC, Islands
- Framework Patterns - Next.js, React, Vue, Vite, Astro, SvelteKit
- Monitoring - Lighthouse CI, RUM, APM, performance budgets
1---2name: web-performance-optimization3description: Use when improving Lighthouse scores, reducing page load times, debugging performance bottlenecks, optimizing Core Web Vitals for SEO, or implementing modern browser performance APIs like View Transitions and Speculation Rules4---56# Web Performance Optimization78Systematic approach to diagnosing and fixing web performance issues across loading, rendering, and runtime.910**Business Impact:** 1 second delay = 7% conversion loss. 0.1s improvement = 8% increase in conversions.1112## When to Use1314- Lighthouse score below 90 or page speed regression15- Slow LCP (>2.5s), high CLS (>0.1), poor INP (>200ms), high TBT16- Large JavaScript bundles, render-blocking resources17- Layout shifts, jank, slow Time to Interactive (TTI)18- Setting up performance monitoring or budgets19- Implementing View Transitions, Speculation Rules, Server Components, Islands Architecture2021## Quick Reference2223| Metric | Target | Tool |24|--------|--------|------|25| LCP | < 2.5s | Lighthouse, CrUX |26| CLS | < 0.1 | Lighthouse, Layout Shift Debugger |27| INP | < 200ms | Chrome DevTools Performance |28| TBT | < 200ms | Lighthouse |29| TTFB | < 800ms | WebPageTest, `curl -w` |30| FCP | < 1.8s | Lighthouse |3132## Which Reference Do I Need?3334```dot35digraph perf_decision {36 rankdir=TB;37 node [shape=box];38 problem [label="What's the problem?" shape=diamond];39 qw [label="quick-wins.md\n1hr/1day/1week optimizations"];40 cwv [label="core-web-vitals.md\nMetric-specific debugging"];41 opt [label="optimization-techniques.md\nJS/CSS/image/caching/backend"];42 mod [label="modern-patterns-2025.md\nView Transitions, Speculation Rules, RSC"];43 fw [label="framework-specific.md\nNext.js, React, Vue, Astro, Svelte"];44 mon [label="monitoring.md\nLighthouse CI, RUM, APM"];4546 problem -> qw [label="need fast ROI"];47 problem -> cwv [label="Core Web Vitals failing"];48 problem -> opt [label="bundle/backend/caching"];49 problem -> mod [label="cutting-edge patterns"];50 problem -> fw [label="framework-specific"];51 problem -> mon [label="no visibility"];52}53```5455## Performance Budget5657| Resource | Budget | Rationale |58|----------|--------|-----------|59| Total page weight | < 1.5 MB | 3G loads in ~4s |60| JavaScript (compressed) | < 300 KB | Parsing + execution time |61| CSS (compressed) | < 100 KB | Render blocking |62| Images (above-fold) | < 500 KB | LCP impact |63| Fonts | < 100 KB | FOIT/FOUT prevention |64| Third-party | < 200 KB | Uncontrolled latency |6566## Core Web Vitals at a Glance6768| Metric | Target | Lighthouse Weight | Key Optimization |69|--------|--------|-------------------|------------------|70| **LCP** (Largest Contentful Paint) | <2.5s | 25% | Optimize images, preload critical resources |71| **INP** (Interaction to Next Paint) | <200ms | 30% | Reduce JavaScript, break up long tasks |72| **CLS** (Cumulative Layout Shift) | <0.1 | 25% | Reserve space, optimize fonts |73| **TBT** (Total Blocking Time) | <200ms | 30% | Code splitting, defer non-critical JS |74| **FCP** (First Contentful Paint) | <1.8s | 10% | Eliminate render-blocking resources |7576**-> See [core-web-vitals.md](./references/core-web-vitals.md) for debugging workflows per metric**7778## Quick Wins (by time investment)7980| Time | Optimization | Impact |81|------|-------------|--------|82| **1hr** | `loading="lazy"` on below-fold images | 40-60% weight reduction |83| | gzip/brotli compression | 70-80% transfer reduction |84| | `rel="preconnect"` for critical origins | 100-500ms savings |85| | `width`/`height` on images | Prevents CLS |86| **1day** | Route-based code splitting | 30-50% bundle reduction |87| | LCP image: `fetchpriority="high"` + WebP/AVIF | 200-400ms LCP improvement |88| | Basic service worker | Instant repeat visits |89| **1wk** | Full HTTP + service worker caching | Reduced server load |90| | Tree shaking + dead code elimination | 40-60% bundle reduction |91| | Lighthouse CI + RUM monitoring | Catch regressions |9293**-> See [quick-wins.md](./references/quick-wins.md) for implementation details**9495## Runtime Performance Checklist9697- Batch DOM reads/writes to avoid layout thrashing98- Debounce scroll/resize handlers (100ms+)99- Use `requestAnimationFrame` for animations (not `setInterval`)100- Virtualize long lists (1000+ items): `content-visibility: auto` or `react-window`/`@tanstack/virtual`101- Avoid synchronous third-party scripts102103**-> See [optimization-techniques.md](./references/optimization-techniques.md) for backend, image, JS, CSS, and caching techniques**104105## Modern Patterns (2025)106107| Pattern | Key Benefit | Complexity |108|---------|------------|------------|109| **View Transitions** | Smooth page transitions, zero JS cost | Low |110| **Speculation Rules** | 0ms navigation via prerendering | Low |111| **Server Components** | Zero-bundle server-only components | Medium |112| **Priority Hints** | `fetchpriority="high"` for LCP | Low |113| **content-visibility** | 7x faster rendering for long pages | Low |114| **Islands Architecture** | 90-99% less JS shipped | High |115116**-> See [modern-patterns-2025.md](./references/modern-patterns-2025.md) for implementation details**117118## Red Flags119120Stop and reconsider if:121- Optimizing without baseline measurement122- Focusing only on Lighthouse score (ignoring field/RUM data)123- Ignoring mobile performance (53% abandon after 3s)124- Loading all resources eagerly (no lazy loading)125- No caching strategy implemented126- Third-party scripts loaded synchronously127- Missing performance monitoring/budgets128- Layout thrashing in scroll/resize handlers129- Long tasks (>50ms) blocking main thread130131## Real-World Impact132133- Pinterest: 40% faster perceived wait = 15% more sign-ups + 15% more SEO traffic134- Zalando: 0.1s improvement = 0.7% revenue increase135- AutoAnything: 50% faster load = 12-13% sales increase136- Core Web Vitals are Google ranking factors (June 2021+)137138## Common Mistakes139140| Mistake | Fix |141|---------|-----|142| Optimizing before measuring | Always profile first with Lighthouse/DevTools |143| Lazy-loading above-the-fold images | Only lazy-load below-fold; eager-load LCP image |144| Bundling unused CSS/JS | Use coverage tab in DevTools, then code-split |145| Missing `width`/`height` on images | Causes CLS — always set dimensions or use `aspect-ratio` |146| Blocking render with synchronous JS | Use `defer` or `async` on non-critical scripts |147| Ignoring server response time (TTFB) | Frontend optimization can't fix a slow backend |148149## References150151- **[Quick Wins](./references/quick-wins.md)** - Time-boxed optimizations with ROI ratings152- **[Core Web Vitals](./references/core-web-vitals.md)** - LCP, INP, CLS debugging workflows153- **[Optimization Techniques](./references/optimization-techniques.md)** - Backend, image, JS, CSS, caching154- **[Modern Patterns 2025](./references/modern-patterns-2025.md)** - View Transitions, Speculation Rules, RSC, Islands155- **[Framework Patterns](./references/framework-specific.md)** - Next.js, React, Vue, Vite, Astro, SvelteKit156- **[Monitoring](./references/monitoring.md)** - Lighthouse CI, RUM, APM, performance budgets
Lu1sDV