Performance Optimization

Systematic approach to identifying and fixing performance bottlenecks.

Key Principles

• Measure first — Never optimize without data; establish baseline metrics

• Identify bottleneck type — Network, CPU, memory, I/O, or rendering

• One change at a time — Apply targeted fix, re-measure, compare against baseline

• Quick wins first — Check compression, caching, indexes, N+1 queries before deep optimization

Core Web Vitals Targets

Metric Good Poor

LCP (Largest Contentful Paint) < 2.5s

4.0s

INP (Interaction to Next Paint) < 200ms

500ms

CLS (Cumulative Layout Shift) < 0.1

0.25

Quick Start Checklist

• Measure baseline (Lighthouse, RUM data, or APM)

• Identify bottleneck type: network, CPU, memory, I/O, or rendering

• Check quick wins: compression, caching headers, indexes, N+1 queries

• Read relevant reference for deep optimization

• Apply fix, re-measure, validate improvement

• Set performance budgets and enforce in CI

References

Reference Description

frontend-perf.md Bundle analysis, rendering, Core Web Vitals

backend-perf.md Query optimization, caching, async patterns

load-testing.md k6, Artillery patterns, CI integration

profiling-guide.md Chrome DevTools, Node profiling, flame graphs