Performance Budget Tracker

The Performance Budget Tracker is a free browser-based tool that helps developers and performance engineers define, monitor, and visualize web performance budgets. A performance budget is a set of predefined limits on page resources and timing metrics that a team agrees not to exceed, ensuring the site stays fast for all users.

This tool lets you set budgets for nine key metrics: total page size, JavaScript size, CSS size, image size, font size, number of HTTP requests, Time to First Byte (TTFB), First Contentful Paint (FCP), and Largest Contentful Paint (LCP). You can add individual resource entries — specifying name, type, and size — to see exactly how your page stacks up against the budget.

The visual comparison view shows budget allocation versus actual usage through interactive bar charts and pie charts. Color-coded indicators make it instantly clear which categories are within budget (green), approaching the limit (yellow), or over budget (red). Five built-in presets — Mobile-First, Desktop, Fast 3G, E-commerce, and Blog — let you start with industry-standard budgets and customize from there.

All processing happens entirely in your browser. Your performance data never leaves your machine — there are no server round-trips, no logging, and no analytics on your input. You can safely use this tool with proprietary performance data. Export your budget plan as JSON for integration with CI/CD pipelines, or import an existing budget to continue tracking.

Whether you are building a new site and need to set initial budgets, auditing an existing page against performance targets, or preparing a performance report for stakeholders, this tracker gives you the visibility you need without installing any software or creating an account.

1. Choose a budget preset (Mobile-First, Desktop, Fast 3G, E-commerce, or Blog) or manually set budget limits for each metric.
2. Adjust any budget limit by editing the numeric fields in the Budget Limits section.
3. Add resource entries by filling in Name, Type (JavaScript, CSS, Image, Font, HTML, Other), and Size (KB), then click Add or press Enter.
4. Review the Budget vs Actual chart — toggle between bar chart and pie chart views using the chart icons.
5. Check the Budget Status table for a detailed breakdown of each category showing budget, actual, remaining, and over/under status.
6. Export your budget plan by clicking Export JSON to download, or Copy JSON to clipboard (keyboard shortcut: Ctrl+Shift+C).
7. Import an existing budget by clicking Import JSON and selecting a previously exported file.
8. Click Clear to reset all resource entries and start fresh.