What is a web performance budget?

Setting a website performance budget motivates us to make faster websites, and to reduce our environmental footprint.

At Pixelfridge, we’re committed to making fast, user-friendly, and sustainable websites. We’ve already shared a website sustainability checklist which contains the tools and techniques for making your website less energy intensive. Check it out for practical suggestions you can include in your design and build process.

Today’s focus is a bit more strategic. We’re going to talk about setting a performance budget for your website.

What is a website performance budget?

Simply put, a performance budget is a set of benchmarks that we measure against throughout a project to ensure it stays quick and efficient.

These benchmarks measure key performance factors like:

• Page size: How big are our pages to download?
• Render speed: How swiftly does our content appear on the screen?
• Resource usage: How taxing are our pages on servers and users’ machines?

By setting a performance budget, you can stay focused on making smart, sustainable choices. Staying within budget might mean choosing lightweight SVGs over heavy images or videos, or writing streamlined code instead of relying on bulky third-party libraries.

In short, having a budget forces us to design and build mindfully, where we may not have done otherwise.

How to set a performance budget

To set a budget, you’ll first need to decide on the metrics you’ll use to benchmark site performance. There are lots of metrics you could choose from, and some may be more suitable than others based on your specific project.

At Pixelfridge, our clients in the charity sector usually want to provide content-driven website experiences that urge the user to donate or get involved. In these cases, we tend to focus on metrics relating to the page render time, and how quickly the user can begin interacting with the content.

Metrics that are commonly set in a performance budget include…

• Total Blocking Time (TBT) : How long it takes for the page to become responsive to user input.
• First Contentful Paint (FCP) : How long it takes the browser to begin rendering the first bits of visible content.
• Cumulative Layout Shift (CLS) : How long it takes the layout to stop ‘shifting around’ during the process of loading the page.
• Page weight : The total downloaded size of the page, in MB.

Thankfully, Google’s PageSpeed Insights tool measures all of these crucial performance metrics, and even rounds them up into a combined performance score, between 1-100.

To keep things simple, it can sometimes be easier to just use this single performance score from Google as a target, rather than breaking it down into the granular metrics. It depends how technical you want to get, the nature of your project, and what your stakeholders will better respond to.

When setting your budget, it’s important to note the device and connection at which the benchmarks are set. At the time of writing this, PageSpeed Insight’s default settings are a Motorola Moto G Power running a weak 4G connection.

Deciding on a budget

The setting of a website performance budget should happen in the discovery phase—the early stage of a project focused on planning, research, and goal setting.

This is the ideal time to align performance with other goals and priorities. Deciding on a budget in these early stages can also influence fundamental design and UX decisions right from the start.

Here’s how to decide on a performance budget, and set your site up for success:

#1 Benchmark your current site

Take stock of the current version’s performance, assuming there is one. We need to make sure that what we’re setting out to build is an improvement over what already exists.

Start by identifying the key pages that will carry over to the new site. Think heavy-hitters like the homepage, donation pages, and campaign landing pages. Then, run these through Google’s PageSpeed Insights or another similar tool.

The metrics provided give us a quantifiable baseline to improve on. For example, if our FCP time is currently 2,000ms, we can aim for 1,500ms in the relaunch. That’s a 25% reduction in the visible render time that users will most definitely notice.

#2 Analyse the competition

By conducting a similar performance audit of our competitor’s key pages, you’ll reveal where you currently stand – and what it will take to be the ‘best in class’ for performance.

Competitor benchmarking is a helpful part of any project’s discovery phase. Beyond design and content inspiration, it can also highlight techniques being used to enhance performance that are particularly relevant to the space.

If you’re unsure as to who your competitors currently are, tools such as SEMRush and Similarweb help identify other sites that share keywords or content focus.

Every industry is different, and being number one isn’t always possible. But competitive benchmarking keeps us sharp, motivated, and inspired by those who are nailing it. It’s also a great way to engage certain stakeholders who might not be bothered about performance directly, but do care about beating the competition.

#3 Align on stakeholder priorities

Performance doesn’t exist in a vacuum. It’s one piece of the puzzle, and to succeed, it must play nice with other project priorities. That’s why we aim to have these kinds of conversations in the discovery phase. We need to put performance on the table alongside other desired outcomes such as brand impact, content ambitions, data capture and so on.

As part of discovery, we’ll often run a goals prioritisation exercise which involves stakeholders ranking desired outcomes like “increase donations,” “boost content engagement,” or “enhance brand impressions.”

This collaborative process makes it crystal clear where performance fits in the hierarchy of goals. Once we know what matters most, we can balance speed, functionality, and impact – setting targets that are appropriate given the situation.

Every website is different

‘Good’ performance is entirely relative to a website’s goals and audience. We need to be realistic about what’s achievable and relevant to our own website.

If your website is delivering vital information and resources (such as a government department or advice for people in crisis) it needs to be lightning-fast on all connections and devices. Think sub-1-second load times, no excuses.

On the other hand, if your site is all about showcasing high-end visuals, and creating a brand impact then we’ll need a more flexible performance budget to match. In these cases it’s likely that the site will contain a lot of high resolution images and videos, and these are inherently resource-intensive. A longer load time is okay though, if it aligns with your website’s purpose. Just accept it early and adjust your budget accordingly.

When to reference your budget

The budget is there to be referenced throughout the project process – from design to launch and beyond. It’s important to remember that many decisions made in the earliest stages can have a big impact on performance. For example, the choice to depend heavily on high-resolution images and videos in the earliest design layouts could immediately take us over budget if we’re not careful.

Although we can’t run page speed tests until after the site has been built, we can still be conscious of the budget when big design and functionality decisions are being discussed. Collaborating with developers in the design process can help us to estimate the resource requirements of what we’re planning

Once we’re in the later stages of web development, it’s easier to test pages using tools like Lighthouse. This is an important part of the QA process, to ensure we’re delivering against our performance targets and staying under budget. If we’re failing to stay on budget, we can consider further optimisation, or make adjustments to our design approach in the interests of performance.

Gone over-budget?

Remember that a performance budget shouldn’t be a rigid set of rules. It’s an ambition. Having the budget documented means we can refer back to it throughout the process. It keeps us in check, and reminds us that every choice matters when it comes to performance.

It may not be viable to stick to the budget every time. Anyone who has worked in this industry will know that both technical factors and organisational politics can often take matters out of our control. It isn’t the end of the world if we exceed the budget – so long as we’re mindful of why it happened.

Just having the budget in place is a superb achievement, because it forces us to have frequent conversations about performance. And that’s the first step.

Next steps

Having a performance budget is a great way to ensure that your website is faster, more user-friendly, and leaves a smaller environmental footprint. Why not try creating one next time you begin a project, and see how it guides your decision making?

If you’re looking for more advice and guidance on how to make your website more sustainable, check out our sustainability checklist. It’s chock-full of ideas that you can implement in your design and build process.

We also love to talk about this kind of thing. If you’ve got questions about website performance and sustainability, get in touch and let’s discuss it over a brew!