Single-Page Application (SPA) Performance Budget
Performance budget strategies for SPAs built with React, Vue, or Angular. Covers initial load budgets, route-level code splitting, hydration costs, and ongoing monitoring approaches.
Detailed Explanation
SPA Performance Budgets
Single-Page Applications (SPAs) present unique performance challenges. The initial load carries the framework, router, state management, and often a large amount of application code — all before the user sees anything meaningful.
SPA Budget Template
| Category | Budget | Notes |
|---|---|---|
| Total Initial | 600 KB | First route only |
| JavaScript | 350 KB | Framework + app + vendor |
| CSS | 60 KB | Critical + component styles |
| Images | 100 KB | Above-fold images only |
| Fonts | 60 KB | Preloaded critical fonts |
| Requests | 25 | Initial page load requests |
| FCP | 1800 ms | Shell renders quickly |
| LCP | 2500 ms | Primary content visible |
JavaScript Budget Breakdown for SPAs
| Chunk | Budget |
|---|---|
| Framework runtime | 40 KB |
| Router | 5 KB |
| State management | 10 KB |
| Vendor libraries | 80 KB |
| Shared components | 50 KB |
| Current route code | 60 KB |
| Third-party scripts | 50 KB |
| Polyfills | 15 KB |
| Analytics | 20 KB |
Route-Level Budgets
SPAs should track budgets per route, not just globally:
/home — 80 KB route-specific JS
/product/:id — 120 KB route-specific JS
/checkout — 150 KB route-specific JS (payment libs)
/dashboard — 200 KB route-specific JS (charts, tables)
Hydration Cost
Server-Side Rendered (SSR) SPAs have hydration costs — the framework must re-execute on the client to make the page interactive. This blocks the main thread:
- React hydration: ~50-200ms for typical pages
- Selective hydration (React 18+): Prioritizes interactive components
- Islands architecture (Astro, Fresh): Hydrates only interactive parts
Monitoring Strategy
- Track initial load budget in the Performance Budget Tracker
- Export as JSON for use with bundlewatch or size-limit in CI
- Monitor route-level chunks with webpack-bundle-analyzer
- Use Lighthouse CI with per-route performance assertions
Use Case
SPA performance budgets are critical because SPAs tend to grow rapidly. Each new feature adds a component, a library, and state management logic. Without a budget, it is common for an SPA to grow from 300 KB to 2 MB over a year of development. The budget tracker makes the cost of each addition visible.