performance-optimization

1# Performance Optimization
2 
3## Overview
4 
5Measure before optimizing. Performance work without measurement is guessing — and guessing leads to premature optimization that adds complexity without improving what matters. Profile first, identify the actual bottleneck, fix it, measure again. Optimize only what measurements prove matters.
6 
7## When to Use
8 
9- Performance requirements exist in the spec (load time budgets, response time SLAs)
10- Users or monitoring report slow behavior
11- Core Web Vitals scores are below thresholds
12- You suspect a change introduced a regression
13- Building features that handle large datasets or high traffic
14 
15**When NOT to use:** Don't optimize before you have evidence of a problem. Premature optimization adds complexity that costs more than the performance it gains.
16 
17## Core Web Vitals Targets
18 
19| Metric | Good | Needs Improvement | Poor |
20|--------|------|-------------------|------|
21| **LCP** (Largest Contentful Paint) | ≤ 2.5s | ≤ 4.0s | > 4.0s |
22| **INP** (Interaction to Next Paint) | ≤ 200ms | ≤ 500ms | > 500ms |
23| **CLS** (Cumulative Layout Shift) | ≤ 0.1 | ≤ 0.25 | > 0.25 |
24 
25## The Optimization Workflow
26 
27```
281. MEASURE  → Establish baseline with real data
292. IDENTIFY → Find the actual bottleneck (not assumed)
303. FIX      → Address the specific bottleneck
314. VERIFY   → Measure again; keep or revert
325. GUARD    → Add monitoring or tests to prevent regression
33```
34 
35### Step 1: Measure
36 
37Two complementary approaches — use both:
38…