What is a Performance Budget and how to set a Performance Budget for your site?
The performance of your website is critical for user experience and improving conversion rates. Users are less likely to bounce from a webpage if it loads quickly and interacts smoothly. But, there’s no simple way to explain how fast is fast enough. Every website has its own unique goals, user demographics, and budgets.
Setting a performance budget can clear things up for you and help you achieve the maximum performance for your budget.
In this article, you’ll learn how to set up a performance budget to achieve your business goals efficiently.
What is Performance Budget?
To get your site to perform optimally, you need to find the right balance between design, functionality, user experience, and business objectives. When you’re building a new website or revamping it, it’s easier to take all these factors into account.
Over time, the site traffic will pick up and you’ll add more features & functionalities to the site. Soon enough, you’ll find that your website performance isn’t as good as it originally was. This is where performance budgeting can help.
According to Google Developers Blog, a performance budget is a set of limits imposed on metrics that affect site performance. This could be the total size of a page, the time it takes to load on a mobile network, or even the number of HTTP requests that are sent. Defining a budget helps get the web performance conversation started. It serves as a point of reference for making decisions about design, technology, and adding features.
Simply put, in a performance budget, you set a “budget” on your page and do not allow the page to exceed that. It usually makes things easier when you break the budget down into the number of requests or size of the page.
Some performance budget metrics include:
- Total number of HTTP requests
- Total page size
- First Contentful Paint (FCP)
- Long Contentful Paint (LCP)
- Page load time on mobile networks
You can set a performance budget for the entire website, or on a page-by-page basis, or a combination of both. A combination of both is recommended. Using the aforementioned metrics, you can set well-defined, measurable goals for your site to ensure that it continues to perform well.
Advantages of Setting a Performance Budget
Setting a performance budget is the first step you can take to improve your website performance. It’ll serve as a reference point for everyone in your team while adding extra features to your website.
For example, if you have set a limit on the number & size of images and fonts, the designers will know what they can and cannot use. It can save a lot of time. Similarly, limiting the number of third party scripts and libraries will enable developers to better approach their goals.
Having a performance budget also provides you with benchmarks to improve the tracking of your website’s performance. If your website’s performance gradually drops over time, then you can go back to the performance budget and analyze where things went wrong.
Performance Budget Metrics
If you can’t measure something, then you can’t track it or improve it, let alone measure its impact on website performance. In this section, we’ll understand the various measurable metrics that you can use to set a website performance budget.
Time-based Metrics
Time-based Metrics tell you how fast various aspects of the page load. Two common events used to measure page load speed are DOMContentLoaded and load events.
But, they don’t give you a full picture of what the user experiences. This is because the server can deliver a minimal page to the user while deferring the actual content load until many seconds later.
To make it right, the W3C Web Performance Group ratified APIs to measure user-performance metrics based on real user monitoring. These are some of the most important timing metrics that you can use to set your performance budget:
1. First Contentful Paint (FCP)
FCP measures the time taken by a page to load any content that’s rendered on the browser. It captures the beginning or start of a page load.
2. Largest Contentful Paint (LCP)
LCP measures the time a page takes to render its largest text or image element on the browser. LCP gives a better measure of perceived loading experience than FCP and First Meaningful Paint (FMP). According to Google, LCP is the preferred choice to measure user-centric performance.
3. First Input Delay
FID is a measure of the time a page takes to respond to any user interactions. For example, when a user clicks a link or taps a button on the page, the browser should have all the relevant scripts loaded to respond to the user’s initial interactions.
4. Cumulative Layout Shift
CLS is a measure of a page’s visual stability. It measures all the unexpected layout shifts that happen on a page while it is loading.
For example, when you load a page and a text block or button suddenly shifts after the page has loaded fully would affect CLS.
5. Time to Interactive (TTI)
TTI is the total time a page takes to render all its elements, load its scripts, and then be able to respond to user inputs.
6. Total Blocking Time (TBT)
TBT is defined as the time between FCP and TTI. It measures the time for which the page load process blocked the user from interacting with the page.
You can measure all these time-based metrics using online speed testing sites like Google PageSpeed Insights, Lighthouse, WebPageTest, etc.
Quantity-based Metrics
Quantity-based metrics are the easiest to understand, measure, and set. They can help both designers and developers to collaborate better.
The most commonly used quantity-based metrics to set a performance budget include:
- Maximum page weight (includes a lot of metrics mentioned below)
- Size of images
- Number and size of web fonts
- Size of scripts
- Number of scripts
- Size of HTML and CSS
- Size of videos
- Number of external resources
- Number of HTTP requests
- Total number of third-party scripts
You should remember that the metrics mentioned above don’t decide the actual user experience in real-time. However, they’re a good place to start while setting your performance budget. But, make sure that you combine quantity-metrics with other user-centered metrics to gain a better understanding of your website performance.
Rule-based Metrics
Performance scores calculated by speed testing tools like Lighthouse and WebPageTest can serve as metrics for setting your website’s performance budget. These tools are quite stable and reliable since they follow general best-practices to measure site performance.
If you’re using Lighthouse, you’ll receive hints for optimizing your site performance and even setting a performance budget.
You should use a combination of quantity-based, timings-based, and rule-based performance metrics for best results.
How to set a Performance Budget?
1. Initial Research
The performance of a website depends on a lot of factors. It’s difficult to quickly fix a budget. Start with doing a little bit of competitor research.
If you’re not sure how to find your competitors or similar sites, here are a few techniques:
- Search on Google with the “related:keyword” advanced search operator
- Find similar sites in Alexa
- Use SimilarWeb
If your homepage has a hero slider and four more sections with images and texts, then search for similar pages across the web and measure their performance. While measuring the performance of these sites, focus on key metrics such as page weight, page load time, LCP, FID, TBT, and the number of HTTP requests.
If you’re revamping your website without changing its content, then you can use your current website’s metrics as a starting point.
To clearly understand how your website stacks up against the competition, create a chart with all the performance metric values.
Studies have shown that humans only notice the difference between performance value changes when the difference is at least 18%. So, we can say that for your users to notice a difference in performance, your website has to load at least 20% faster than before.
2. Establish a Benchmark Performance
The values you get from WebPageTest or Chrome Developer Tools or PageSpeed Insights will serve as an excellent reference point for you to base your performance budget on.
You can set benchmark performance metrics like under 3 seconds of page load time, less than 5 seconds TTI, and more.
3. Set the Performance Budget
Set the initial performance budget for your site based on the benchmark values you’ve set. The first performance budget will be an estimate and an upper bound limit, but you should aim to set it as accurately as possible. Here, you must prioritize your website for user experience.
Since the content may vary across different pages on your site, set a performance budget for every page type. If you’re running a relatively small website (less than 15 pages), then you can set a performance budget for every page also as it won’t be time-consuming.
4. Make use of your Performance Budget
A performance budget is a reference that will guide you and your team towards building a high-performance website. If any decision you make affects the site performance, then you should consult the performance budget to ensure that it’s within the limits set.
For example, imagine that you’re in charge of the site development and the marketing head asks you to add a bloated analytics script to your website. In such a situation, you can use the performance budget to explain why it’s not possible to add it without affecting the site’s performance.
But, a performance budget isn’t gospel. Sometimes you have to be pragmatic and adjust accordingly while implementing certain features on your site. However, a performance budget will frequently help you avoid these situations.
Final Words
A performance budget helps you focus on your site’s performance without affecting user experience or site functionality. It’ll serve as a guide for you to decide which features to add to the site and which ones to drop.
If your business is primarily an online one, site performance matters more than anything else to achieve your business goals. Setting a performance budget enables all the stakeholders to work together as a team towards ensuring optimum website performance.
Got any questions? Let us know in the comments below! You can also write to us for detailed queries.
