Handbook
Frontend performance (blueprint)
Purpose: Deep, project-agnostic guidance for web performance optimization. Covers measurement, analysis, and optimization strategies tied to Core Web Vitals and user experience.
Audience: Teams adopting Frontend / Web Engineering; project-specific performance budgets and reports stay in docs/development/frontend/performance/.
Performance is user experience: latency, stability, and loading behavior shape trust, task completion, and accessibility. These blueprints separate how to think about metrics and optimization from where this repo records concrete budgets and regressions.
Core knowledge: Frontend / web engineering body of knowledge — web performance fundamentals, rendering strategies.
Bridge: Frontend Engineering ↔ SDLC ↔ PDLC bridge — where performance work fits in the lifecycle.
Deep guides
| Guide | Focus |
|---|---|
| Core Web Vitals and metrics | LCP, INP, CLS, related lab metrics, optimization tables, tooling, budgets, framework notes |
| Optimization strategies | Loading, rendering, images, JS, caching layers, CSS/fonts, network, monitoring, anti-patterns |
Topic map (overview)
| Topic | Focus | See |
|---|---|---|
| Core Web Vitals | LCP, INP, CLS — measurement, diagnosis, optimization strategies | Web Vitals |
| Bundle optimization | Code splitting, tree shaking, dynamic imports, dependency audit, compression | Optimization strategies |
| Image and media | Format selection (WebP, AVIF), responsive images, lazy loading, CDN transforms | Optimization strategies |
| Font optimization | font-display strategies, subsetting, preloading, self-hosting vs CDN |
Optimization strategies |
| Caching strategies | Cache-Control, CDN configuration, service worker caching, stale-while-revalidate | Optimization strategies |
| Rendering performance | Main-thread optimization, virtual scrolling, Web Workers, requestIdleCallback |
Optimization strategies |
| Performance budgets | Setting, enforcing, and evolving budgets; Lighthouse CI integration | Web Vitals |
| Real User Monitoring (RUM) | Collecting field data; correlating performance with business metrics | Web Vitals |
Keep project-specific performance budgets in docs/development/ and optimization decisions in docs/adr/, not in this file.