How to set and calculate your web performance budget

How to set and calculate your web performance budget

The web is full of third-party tags that can help enhance the functionality of your site, track analytics, or deliver advertising. But while these tags can boost your ability to measure and convert customers, they can sometimes cause issues that impact your website.  While it is important for your website to look good, it is just as important to ensure it loads quickly. Without usability and speed, consumers may end up leaving your website without ever seeing your clever animated navigation or interacting with your new website chat feature.

Surveys have shown that a large number of US consumers will abandon slow loading websites. On average, 39 percent of users say speed is more important than functionality and 32 percent will abandon slow sites starting at 1 to 5 seconds. But, you don’t have to give up using third-party tags all together. Setting a performance budget enables you to employ good design while staying conscious of how it will affect your customers.

What is a web performance budget?

A web performance budget is exactly what it sounds like—a “budget” based on performance that your website pages can’t exceed. Both Tim Kadlec and Brad Frost have written about overdone, increasingly bloated websites and emphasized that performance is an inherent part of the design process. It shouldn’t just be a consideration, but a condition. Even when mocking up websites, you need to think about how much bandwidth you will use for the features you want to introduce. Implementing a web performance budget that delivers a high-quality experience, which looks and feels good, requires time and concessions.

Researching and setting a performance budget

You can decide what this limit will be based on using a number of techniques, including:

  • Setting an MB limit of a page's overall assets (e.g. images, video, styles, scripts, etc.)
  • Minifying and other compression techniques
  • Limiting the number of HTTP requests
  • Loading external resources, such as webfonts or analytics, on your own CDN
  • A combination of any of the above

The BBC used a mixed approach to their budget by setting an overall metric that their pages must be readable within 10 seconds over a GPRS connection.

Only you can decide where your priorities lie and where weightier elements can be sacrificed in order to achieve your goals. Looking at websites that perform similar functions to your own is a good place to start.

Which ones work well? Which ones lag? What features actually help visitors get the information they need and convert? Getting to know the competition and looking at those who have nailed their website funnels will make it easier to strategize your own approach and web performance budget.

Testing and measuring

There are a lot of website speed test tools out there that can be used to see how your site stacks up against the competition. It also helps to explore how your website performs under various conditions. For example, loading sites over cellular connections has become particularly important as more and more e-commerce happens on mobile devices with 32 percent of revenue and 53 percent of traffic generated there. Even if you're used to lightning-fast LTE connections in your home market, 45 percent of connections worldwide happen over 2G networks and a whopping 75 percent over 2G or 3G.

For a more specific breakdown of what on your page is using the most space and how it compares to the median of sites around the web, Browser Calories is a humorous and straightforward browser extension that shows you a breakdown of your assets. You might find that it is necessary to create a performance budget that is tailored for a specific device, browser, or operating system, depending on the type of connection or location.

Once you've set your web performance budget, a tool like Jonathan Fielding's Performance Budget Calculator will help you decide what to cut. It shows its recommended limits for each aspect of your site based on your end requirements. If you need more for any one of them, use the slider to move it where you need and test which places you can cut in order to stay within budget.

Performance budgets are key to optimized web experiences

Whatever tools you choose, a performance budget is essential for helping you to measure your own web performance both historically and against the competition in order to identify where you improvements can be made. Implementing a performance budget and more importantly, finding a tool that helps you enforce that budget will be crucial for ensuring that your customers have faster and safer web experiences. Be sure to note in your analytics when you implement the changes in order to measure the results. Lowering bounce rate, increasing conversions, and using tags to measure effectiveness of conversion paths can all help you identify wins and areas for improvement.

Learn more about how to create and enforce your performance budget with Instart Tag Control view our on-demand webinar here: Why you need a performance budget for third-party tags.