Web Performance Budgets: A Practical Guide

Performance budgets are limits you set on metrics like page weight, load time, and JavaScript size. Without them, every new feature, plugin, and library slowly degrades your site speed until users start leaving.

What to Budget

I track three categories:

• Total page weight: Under 1.5MB for content pages, under 2.5MB for media-heavy pages
• JavaScript bundle size: Under 200KB gzipped for the initial load
• Core Web Vitals: LCP under 2.5s, FID under 100ms, CLS under 0.1

Enforcing Budgets in CI

Budgets only work if they are enforced. I add size checks to the build pipeline:

// In vite.config.ts or a custom script
const MAX_BUNDLE_SIZE = 200 * 1024; // 200KB

// After build, check output sizes
const stats = fs.statSync("dist/assets/main.js");
if (stats.size > MAX_BUNDLE_SIZE) {
    console.error(`Bundle exceeds budget: ${stats.size} > ${MAX_BUNDLE_SIZE}`);
    process.exit(1);
}

The Conversation It Forces

The real value of a performance budget is the conversation it creates. When a new feature would push you over budget, you have to decide: is this feature worth the performance cost? Can we optimize something else to make room? Should we lazy-load it?

Without a budget, the answer is always “just add it.” With a budget, every addition has a measurable cost, and trade-offs become explicit rather than invisible.