Performance Budgets: Setting and Enforcing Web Performance Goals | DevPrep

Performance Budgets: Setting and Enforcing Web Performance Goals | DevPrep

A performance budget is a set of limits on metrics that affect user experience. Without budgets, performance degrades with every feature addition.

What to Budget

Quantity-Based Budgets

Timing-Based Budgets

Enforcing in CI

Webpack Bundle Analysis

Common Budget Violations

Violation	Common Cause	Fix
JS too large	Importing entire lodash	import { debounce } from "lodash-es"
CSS too large	Unused styles	PurgeCSS / Tailwind purge
Images too large	Unoptimized images	WebP/AVIF, responsive images
Too many requests	No code splitting strategy	Dynamic imports, lazy loading

Monitoring in Production

Real User Monitoring (RUM) with web-vitals library
Synthetic monitoring with Lighthouse CI
Set up alerts when metrics exceed thresholds
Track metrics over time in dashboards

// bundlesize config (package.json)
{
  "bundlesize": [
    { "path": "dist/js/*.js", "maxSize": "200 kB" },
    { "path": "dist/css/*.css", "maxSize": "50 kB" }
  ]
}

// Lighthouse CI
// .lighthouserc.js
module.exports = {
  ci: {
    assert: {
      assertions: {
        "first-contentful-paint": ["error", { maxNumericValue: 1800 }],
        "interactive": ["error", { maxNumericValue: 3500 }],
        "largest-contentful-paint": ["error", { maxNumericValue: 2500 }],
        "cumulative-layout-shift": ["error", { maxNumericValue: 0.1 }],
        "total-byte-weight": ["warning", { maxNumericValue: 1000000 }]
      }
    }
  }
};

// Install
npm install --save-dev webpack-bundle-analyzer

// Add to webpack config
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
plugins: [new BundleAnalyzerPlugin()]

// For Vite
npx vite-bundle-visualizer