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.

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.

flowchart TD M[Measure field + lab] --> A[Analyze bottlenecks] A --> P[Prioritize by user impact] P --> O[Optimize] O --> V[Validate in CI + RUM] V --> M

Core knowledge: FRONTEND.md — 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.

Canonical source

Edit https://github.com/autowww/blueprints/blob/main/disciplines/engineering/frontend/performance/README.md first; regenerate with docs/build-handbook.py.