Crystallize logo

What Is Performance Budget?

A performance budget is a framework or guideline in web development that sets specific limits on particular metrics that affect website performance to ensure that the website's speed and usability remain optimal. It's a proactive way to control the quality of a website or application by setting predefined standards on size, speed, or other performance-related metrics.

Performance budgets can be set based on various parameters, including:

  1. Resource Sizes. These budgets limit the size of resources used on a page, such as JavaScript, CSS, images, or the overall page weight. For example, a performance budget might stipulate that the total JavaScript for a page should not exceed 500 KB.
  2. Quantity-Based Metrics. These budgets limit the number of specific elements or requests, such as the total number of HTTP requests a page can make or the number of images or scripts used.
  3. Milestone Timings. These budgets are based on key moments in the page load process, like Time to First Paint (TTFP), Time to Interactive (TTI), or First Contentful Paint (FCP).
  4. Rule-Based Metrics. These budgets use scores from performance audit tools like Google's Lighthouse.

In essence, a performance budget is a set of boundaries agreed upon by the development team. Suppose a new feature or element is to be added, and it would cause the website to exceed the pre-established performance budget. In that case, the team must adjust elsewhere to keep the overall performance within the set limits. This could mean optimizing existing assets, removing some less critical resources, or reconsidering the necessity of the new feature.

The exact performance budget for a project will vary based on the specific goals and needs of the site. For example, a more media-heavy site might have a larger budget for images, while a web application might allocate a larger budget for scripts. In all cases, the purpose of the performance budget is to keep the focus on maintaining a fast, responsive site that provides an excellent user experience.

Performance budgets are an increasingly important tool in modern web development, as they help teams balance the often competing interests of functionality and performance.

For a more in-depth look at the Performance Budget, look at suggestions by the Chromium dev team.