The benefits of using a website performance budget

"We've made the Internet in our image...obese". Jason Grigsby in 2011.

Performance budgets are an essential but sometimes under-appreciated part of product success and team health. The purpose of a performance budget is to make sure we focus on performance throughout a project. The reason we go through the trouble in the first place though is because we want to build a site that feels fast for our visitors. One of these goals (prioritizing performance) is an internal one impacting the people who are creating the site. The other goal (building a site that feels fast) is an external one impacting people who visit our site.

Why should we care?

The web keeps getting bigger. According to HTTP Archive, in over 10 years, the medium size (in KB) of a mobile website has increase almost 400%. Let's look at this increase on mobile with more detail (median values):

• 60% more requests (from 42 to 67)
• 400% more css (from 14.8 to 73.7KB)
• 45% more HTML (from 19.9 to 28.8KB)
• 306% more images (from 206.9 to 840.8KB)
• 340% more javascript (from 110.2 to 484.2KB)
• 253475% more video from (1.6 to 4057.2KB). Video really took off, even surpassing desktop.

As seen above, websites have become increasingly complex, with more resources, larger file sizes, and more dynamic functionality. As a result, site speed and performance have become increasingly important factors in user experience and in search engine optimization. To address these challenges, organizations have turned to website performance budgets as a way to guide the development and optimization of their websites. By setting specific performance targets and monitoring the website's performance against those targets, organizations can ensure that their sites are fast, responsive, and provide a positive user experience. As websites continue to grow in complexity, the importance of website performance budgets is only likely to increase, as they provide a way to ensure that site performance remains a top priority.

What's a performance budget?

A website performance budget is a set of guidelines and performance targets for a website, designed to ensure that the website performs well in terms of speed and responsiveness. These targets typically include metrics such as page load time, the size of the page, the number of requests made by the page, and the time it takes for the page to become interactive. The budget acts as a roadmap for optimizing the website's performance, guiding the development and design process to ensure that the website meets or exceeds the set targets.

The purpose of a website performance budget is to prioritize performance in the development process and ensure that the website delivers a fast and responsive user experience. This can lead to a range of benefits, including improved user experience, better search engine ranking, increased conversions, better resource management, and future-proofing. By setting a website performance budget, businesses and organizations can ensure that their website is optimized for performance, delivering a better user experience and delivering results.

Types of performance budgets

Page-Based Performance Budget

This type of budget sets specific performance targets for individual pages of a website. These targets may include metrics such as page load time, the size of the page, the number of requests made by the page, and the time it takes for the page to become interactive.

Resource-Based Performance Budget

This type of budget sets specific performance targets for resources such as images, videos, and fonts. These targets may include metrics such as file size, the number of requests made, and the time it takes for the resource to load.

User-Based Performance Budget

This type of budget sets specific performance targets based on the user's network conditions and device. For example, it may set targets for load time for users on slow or unreliable networks, or for users with low-end devices.

Real-World Performance Budget

This type of budget sets performance targets based on real-world usage data, such as data from Google Analytics or other analytics tools. This can help to ensure that the website is optimized for the types of usage patterns seen in the real world, rather than based on theoretical performance targets.

Custom Performance Budget

This type of budget allows organizations to set custom performance targets based on their specific needs and requirements. This can be useful for organizations with unique performance requirements or for those looking to prioritize performance in specific areas.

Ultimately, the type of performance budget that an organization uses will depend on their specific needs and requirements. Organizations may choose to use a combination of different types of performance budgets to ensure that their website is optimized for performance in all areas.

In which development phase should we consider a performance budget?

Here the answer is simple, everywhere possible:

• Local development: This is the number one place where it all starts. Tools such as Lighthouse or Webpack bundle analyzer can be really handy or easy validation on code change.
• CI/CD: In the overall development process, this is the prime place performance budgets can be more beneficial. Built into the development pipelines, companies can make tests on specific devices that can be more representative of their users. Tools such WebPageTest, Lighthouse or Speedcurve can make such integration easier to accomplish.
• Production: This is where performance budgets shouldn't be overlooked and where conversions are followed. All tools mentioned above can be used in a production environment. For more tools, please refer to Top performance tools.

Main benefits long term

Improved User Experince

The primary benefit of using a website performance budget is that it helps to improve user experience. A fast website provides a better user experience, which in turn can help increase engagement, reduce bounce rates, and increase conversions. A website performance budget helps to ensure that the website loads quickly and is responsive to user interactions, providing a smooth and enjoyable user experience.

Better SEO

Search engines like Google use website performance as a ranking factor. A fast and responsive website is more likely to rank higher in search results, making it easier for users to find your website. Additionally, a slow website can lead to a high bounce rate, which can negatively impact your website's search engine ranking. By setting a website performance budget, you can ensure that your website meets the performance standards set by search engines, improving your website's visibility and ranking.

Increased Conversions

A fast and responsive website can also increase conversions. A study by Akamai found that a 1-second delay in website load time can lead to a 7% reduction in conversions. Additionally, slow websites can frustrate users and lead to a high bounce rate, further reducing conversions. By using a website performance budget, you can ensure that your website loads quickly and provides a positive user experience, increasing the chances of conversions.

Better Resource Management

A website performance budget also helps to better manage resources. By setting specific performance targets, you can prioritize and allocate resources more effectively, ensuring that your website meets the desired performance targets. This can help to reduce the cost of website development and maintenance, as well as improve the overall efficiency of the website.

Future-Proofing

Finally, using a website performance budget can help to future-proof your website. As technology continues to advance, website performance requirements will continue to evolve. By setting a website performance budget, you can ensure that your website meets the latest performance standards and is well-equipped to handle the demands of the future.

In conclusion, website performance budgets offer several key benefits for organizations looking to improve their website's speed and user experience. By setting performance targets and monitoring website performance against those targets, organizations can ensure that their websites are fast, responsive, and provide a positive user experience for users. Additionally, using a performance budget can help organizations to prioritize performance optimization and to make data-driven decisions about performance-related improvements. This leads to a more efficient use of resources, as performance optimization efforts are focused on areas where they will have the greatest impact. Overall, implementing a website performance budget can help organizations to create better performing websites, improve user experience, and drive business results.