Performance budget is the upper limit set for performance indicators in web development, and is used to control key dimensions such as page loading time and resource size. It helps the team avoid performance exceeding the standard by setting specific values such as the loading time of the first screen does not exceed 3 seconds and the JS file does not exceed 170KB. Common budget dimensions include loading time (FCP, TTI), resource size, number of requests, Lighthouse scores, and image optimization. The development team needs a performance budget to prevent problems such as slow loading and interaction lag caused by feature overlays. The formulation steps include analyzing the status quo, determining indicators, setting thresholds, establishing monitoring and making regular adjustments. Implementation methods include incorporating budgets into code review processes, integrating Lighthouse into CI/CD, providing optimized component libraries, and monitoring using tools such as Webpack Bundle Analyzer and DevTools performance panels. Performance budgets require continuous maintenance rather than one-time setup.

When doing web development, performance budget is actually quite real. It does not let you calculate how much it costs to load a page, but sets an "upper limit" for the performance of the website, such as the first-screen loading time, JS file size, and the number of key resource requests. The team develops according to this budget to avoid serious performance overspending later.

What is a performance budget

Performance budgeting is to draw a line for the performance of a web page and control "overhead" like spending money. For example, the specified page is loaded within 3 seconds on the mobile terminal, or the total volume of JS does not exceed 170KB. These numbers are not casually set, but are usually set according to the target user group, historical data and industry standards.

• Common budget dimensions :
  • Page loading time (FCP, TTI)
  • Total resource size (especially JS/CSS)
  • Number of requests
  • Lighthouse score
  • Number and format of pictures

Why development teams need performance budgets

Without a budget, it is like driving without a brake, and it is easy to "overspread". Especially in the middle and late stages of the project, more and more functions are added, the pictures are getting bigger and bigger, and the scripts are becoming more and more complicated, which will slow down the entire website by accident.

• Frequently asked questions include:
  • The first screen loads for more than 5 seconds, and the user churn rate increases
  • The JS file is too large and the interaction is stuck
  • The picture is not optimized, the bandwidth pressure is high
  • Too many third-party plug-ins affect core functions

With the performance budget, you can constantly check whether it is "exceeded" during the development process and find problems in advance, rather than remediate them after they are launched.

How to develop a performance budget that suits your team

When making a budget, you cannot copy other people's standards. It must be determined in combination with your own product positioning, user equipment distribution and network environment. For example, for projects targeting users in developing countries, the loading time cannot be set too tight, otherwise it will be easy to "fail to meet the standards".

• Make steps and suggestions:
  1. Analyze the performance of current site or competitors
  2. Identify key performance indicators (such as FCP, CLS)
  3. Set reasonable thresholds (see the Web Vitals Guide)
  4. Join the monitoring mechanism (Lighthouse CI, WebPageTest)
  5. Regular review and adjustment

For example: If your product is mainly aimed at mobile users, it is best to control the total size of JS to within 170KB, which can ensure that most devices will not be stuck.

How to implement performance budgets in development process

It is not enough to have a budget alone, and it must be turned into an executable process. for example:

• Automatically detect resource size changes during PR review
• Package Lighthouse into CI/CD process, build fails if it exceeds the budget
• Provide designers with performance-friendly component libraries (such as compressed image templates)

In addition, front-end engineers can use tools such as:

• Lighthouse CI
• Webpack Bundle Analyzer (View the JS package structure)
• Performance tab in DevTools (real-time monitoring of loading process)

Basically that's it. Performance budgeting is not a one-time task, but a process of continuous maintenance. Not complicated but easy to ignore, especially when the progress is pressed up.

The above is the detailed content of Performance Budgeting for Web Development Teams. For more information, please follow other related articles on the PHP Chinese website!