• Start Performance Budgeting
  • Addy Osmani
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: Sam
  • Proofread by: Augustwuli, Calpa

If you’re building a website experience and want to keep it fast,Performance budgetIt may beIt is very important. In order to be successful, you need to accept performance budgets and learn to use them in your life. Network and CPU constraints on mobile devices ask questions such as “What’s really important to my users? “Such a conundrum.

When we talk to Fortune 500 companies that are committed to improving performance, performance metrics usually come back quickly once it comes back to feature development. A performance budget helps the team prioritize features, optimizes and facilitates discussions about what’s really important to users.

“Having a preset ‘budget’ at the appropriate early stages of a project can be a clear and tangible way to determine what should be included in the project.” – Mark Perkins,

What is a performance budget?

The performance budget is a page limit that a team cannot be allowed to exceed. It can be the maximum JavaScript package size, the total number of images, a specific load time (for example, less than 5s interaction time on 3G/4G networks), or a threshold for any number of other metrics.

Of course performance budgeting is more than just a threshold. They are more like financial budgets and require conscious use. Think of them as currencies to spend and trade on user experience. In a mobile device environment where the cost of JavaScript is still high, budgets are one of the few tools that can guide us to success.

Performance budget indicators

Metrics for performance budgeting include milestone time, quantity-based metrics, and rules-based metrics.

Milestone time: the time based on the user experience of loading a page (for example, interaction time, first content drawing time). You will often need to pair several milestone times to accurately describe the entire process of page loading. Some teams maintain custom metrics, such as Twitter’s “first Tweet time.”

Quantity-based metrics: Based on raw values (e.g. volume of JavaScript (KB/MB), number of HTTP requests). These are all focused on the browser experience.

Rule-based metrics: Score with a tool like Lighthouse or WebPageTest. This is usually done using a single number or series to rate your site.

If a PR degrades performance, teams with performance budgets will often have CI alerts or build errors. Lighthouse CI now supports lowering the Lighthouse score whenever a category, such as performance, drops below a specific value:

A practical example of performance budgeting based on rules. With Lighthouse CI, we can set a performance score for our budget. If their performance score falls below a certain value, PR will fail.

Examples of budgets

  • Our product pages must publish less than 170KB of JavaScript code on mobile
  • Our search page cannot contain more than 2MB of desktop images
  • Our home page must be loaded and interactive within 5s on a slow 3G/Moto G4 (Network)
  • Our blog must score 80+ on the Performance Review of Lighthouse

Here is a quantitative indicator – The JS size of The Guardian’s desktop website at SpeedCurve. It is highlighted in yellow within the budget and in red over the budget.

We can also visualize milestone metrics. Here is the first interaction (when the first CPU is idle) — marking the point in time when the browser’s main thread was blocked by any single task for no more than 50 milliseconds, so it could quickly respond to user input.

Budgets can vary based on a number of factors, including target device levels. Comparing Guardian’s mobile and desktop experiences, we can see a big overall volume difference:

This may indicate that budgets between different equipment levels are worth considering. For example, mobile devices with less than 170KB (min/gzip) of JS code and desktop devices with less than 1.5MB of JS code can give users a faster CPU and network connection.

Quantify the impact of new features

“When you have approved a module with three images in rotation and a full-screen high-resolution background image, it may not be easy to keep the page size under 500kB” — Tim Kadlec

Often, non-engineering stakeholders are not aware of the performance impact of their decisions on functionality and design. It’s not their fault. We need to make it easier for product managers, designers and stakeholders to understand the user experience implications of their choices.

Stakeholders may need help understanding that a different JavaScript rotation or too many images can seriously impact a site’s performance. Performance budgeting strategically helps us change our mindset to consider the value of everything we add.

It would have been better if we had made performance part of our project goals from the start. This can be a shift in the performance budget mentality from just being a consideration in development to being a key factor throughout the project lifecycle.

Make trade-offs for the user experience

As with any financial budget, your performance budget may be low at times. This requires you to make some cuts or trade-offs to ensure a consistently fast user experience. What features are really important to your users? Which one inspires or retains them the most? It’s a tough conversation to have, and it’s not always clear.

You can end this conversation by dropping one feature and opening up another. “Jettisoning” might mean removing it from the critical path — the feature can still be loaded later when the user needs it on demand.

In this case, call to ask about the page performance budget on a page-by-page basis and use it as a source of facts to help you stay close to your goal.

Implementation of the budget

The business implements performance budgeting through an internal process approach that implements a performance culture.

Organized performance budgets make sure that budgets are relevant to everyone, not just defined in a team way. Performance budgets cannot be the sole concern of the engineering team.

“A network performance budget should be an equation about how many of the right factors work together to help companies make the right decisions and produce the recommendations necessary to move their products forward. It’s much more effective than having a potentially conflicting conversation about fixing your site’s performance thresholds.” – Tobias Baldauf

When a budget is set and the entire organization knows what the budget parameters are early on, performance is no longer just an engineering issue, but a critical part of building the entire software package for the site.

It provides design and engineering guidance when considering performance, and checks against every decision that may affect performance.

Monitoring services such as SpeedCurve also allow you to benchmark against competing websites, making it easy to visualize their performance on your budget. This can be helpful when you tell your stakeholders why it’s important to “control your budget.”

Tools to help execute performance budgets

There are many tools for implementing performance budgeting.

Bundlesize is particularly useful in CI for capturing JavaScript regression sizes:

Tinder.com uses the package size to set the JavaScript package budget to be checked each time a PR submission is made. Their React app has a 170KB main package budget and a 20KB CSS budget. The way the code is split allows them to stay within budget. Sites like Trivago, Zendesk and OpenTable use the same approach.

Other teams use performance budgets with built-in Webpack support. You can configure Performance. Hints to alert or build failures when budget is exceeded. Webpack supports maximum resource size (maxAssetSize) or JavaScript package entry file size (maxEntrypointSize) configurations.

SpeedCurve supports budget configuration for a variety of metrics, resource sizes, and Lighthouse review categories.

The example tracks the performance score of blog. Google on Lighthouse with a budget of 80/100. The red line is over budget.

Zillow uses SpeedCurve to set a budget for the number of items in a mobile search (such as image size) and milestone time metrics. Other performance monitoring services, such as Calibre, also support setting budgets and backtracking alerts.

If you decide to target what the budget is in the planning stage, https://performancebudget.io is a preset the budget of different network speed visual AIDS.

Of course, as mentioned earlier, Lighthouse CI is a great choice for teams looking to budget their PR for performance on a rules-based basis.

The end of the thinking

Performance budgeting introduces a culture of accountability that enables stakeholders to weigh user-centric metrics for each site change. Talk to your team to see if you can incorporate a performance budget into your project. If it’s worth going fast, it’s worth staying fast. ❤ ️

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column. Com/XITU /gold-miner# products), design, artificial intelligence and other fields. If you want to see more high-quality translations, please continue to pay attention to the Gold Digging Translation plan, the official weibo, zhihu column.