Performance Budget Calculator

A performance budget is a limit you set on the size of your web pages. Without a budget, websites inevitably suffer from "feature creep," becoming bloated and slow over time. This ruins your Web Performance and Core Web Vitals.

Interactive Budget Calculator

Enter your target total page weight (in kilobytes) to generate a recommended budget breakdown. A good starting target for a fast mobile experience is 1000 KB (1 MB).

How the Budget is Calculated

The calculator uses standard industry ratios for resource allocation:

• Images (60%): Images are visually important but relatively cheap for the browser to process. Most of your budget should go here.
• JavaScript (20%): JS is the most "expensive" byte on the web because it must be executed. Keeping this budget strict is crucial for interactivity.
• Fonts (10%): 1-2 optimized, subsetted web fonts usually fit within this budget.
• HTML (5%): The structure of your page. Should rarely exceed 50KB.
• CSS (5%): If using modern utility frameworks or critical CSS, 50-100KB is plenty.

Enforcing the Budget

A budget is useless if it isn't enforced. You should integrate performance budgeting directly into your CI/CD pipeline.

// lighthouserc.json
{
  "ci": {
    "assert": {
      "budgetsFile": "budget.json"
    }
  }
}

// budget.json
[
  {
    "resourceSizes": [
      { "resourceType": "script", "budget": 200 },
      { "resourceType": "image", "budget": 600 }
    ]
  }
]

// webpack.config.js
module.exports = {
  // ...
  performance: {
    hints: "warning", // or "error"
    maxEntrypointSize: 250000, // 250kb
    maxAssetSize: 250000
  }
};