Progressive Enhancement and Performance Budgets

Progressive Enhancement and Performance Budgets

Progressive enhancement is a development philosophy that starts with a minimal, functional HTML experience and layers on CSS and JavaScript for enhanced capabilities. When combined with performance budgets, it creates a powerful framework for building fast, accessible, and resilient websites.

The Enhancement Layers

Layer	Purpose	Budget Impact
HTML	Content, structure, forms	15-30 KB (minimal)
CSS	Visual design, layout	20-60 KB (adds value)
JavaScript	Interactivity, dynamic features	50-400 KB (highest cost)

How Progressive Enhancement Respects Budgets

Traditional development loads everything upfront:

Initial load: HTML (30 KB) + CSS (60 KB) + JS (300 KB) = 390 KB
→ Nothing visible until all resources loaded

Progressive enhancement prioritizes content:

Phase 1: HTML + Critical CSS (35 KB) → Content visible immediately
Phase 2: Main CSS loads (+ 25 KB) → Full styling applied
Phase 3: JS loads on demand (+ 50-200 KB) → Interactivity added

Practical Techniques

1. Server-rendered HTML first

Ensure the page works without JavaScript. Forms submit to server endpoints. Links navigate to real URLs. Content is in the HTML, not injected by JS.

2. CSS as enhancement

<!-- Critical CSS inline for immediate rendering -->
<style>body { font: 16px/1.5 system-ui; max-width: 65ch; margin: 2rem auto; }</style>

<!-- Full CSS loaded asynchronously -->
<link rel="stylesheet" href="/styles.css" media="print" onload="this.media='all'">

3. JavaScript as progressive enhancement

<!-- Form works without JS -->
<form action="/search" method="GET">
  <input name="q" type="search">
  <button type="submit">Search</button>
</form>

<!-- JS enhances with autocomplete, debouncing, instant results -->
<script type="module" src="/search-enhance.js"></script>

Budget Tiers

Define budget tiers for each enhancement level:

Tier	Budget	Experience
Core (no JS)	50 KB	Content readable, forms work, links navigate
Enhanced (light JS)	150 KB	Smooth animations, form validation, lazy images
Full (all JS)	400 KB	Client-side routing, offline support, rich interactions

Users on 2G connections get the Core experience (fast, functional). Users on 4G get Enhanced. Users on WiFi get Full.

Testing Each Tier

Test your site with JavaScript disabled to verify:

• All content is visible
• Navigation works
• Forms submit correctly
• Images have proper alt text
• No blank white pages

If the site is unusable without JavaScript, progressive enhancement has not been implemented.

Framework Support

Framework	PE Support	Notes
Astro	Excellent	Islands architecture, zero JS by default
11ty	Excellent	Static output, add JS explicitly
Next.js (SSR/SSG)	Good	Server-rendered, hydration adds JS
Remix	Good	Progressive enhancement built-in
Create React App	Poor	Client-only, requires JS for everything