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.

Guide · Updated · Source

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.

Frontend performance workflow

How teams move from framing performance as user experience to governed measurement, optimization, and traceable outcomes.

  1. StartFrame performance as latency, stability, and loading behavior that shapes trust.
  2. Core steps (see walkthrough below)Measure Core Web Vitals, diagnose bottlenecks, and apply targeted optimizations.
  3. OutcomeShip reviewable improvements with budgets and evidence kept outside this blueprint.

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.