The choices made by digital designers and developers directly affect the energy consumed by billions of devices worldwide. Websites today are often bloated. The average web page size has more than doubled in the past decade, leading to slower load times and increased energy use. Since every kilobyte consumes electricity on servers, networks, and user devices, both designers and their clients need to be aligned to create a meaningful difference.
Setting and sticking to a performance budget is one practical, measurable, and impactful way to reduce that burden and create a better internet for everyone. Not only does it directly lower the digital carbon footprint, but it also improves user experience, site performance, and conversion metrics too.
What is a performance budget?
A performance budget is a set of constraints or limits placed on certain aspects of a website’s performance. It’s essentially a guiding principle which informs how “heavy” a page can be and is often measured in terms of the page load time, total page weight/file size, the number of HTTP requests, or a variety of other technical factors.
A performance budget forces teams to make design and development decisions in defined boundaries, encouraging resource conscious choices which align with both user needs and environmental sustainability.
Why clients need to play a key role
A typical client brief for a digital project is always geared towards describing the requirements. The brief includes information on content, functionality or visual appearance which is regarded as being needed. Everything in the brief will therefore create a negative environmental impact to produce, store, transmit and maintain.
It is very rare for client briefs and specifications to include restrictive requirements like performance budgets. When clients begin to add performance budgets, it creates a natural trade-off conversation assessing the relevance and importance of each piece of content or functionality.
Integrating performance budgets into your project
Performance budgets should not be an afterthought or something which is dealt with at the time of development. They need to be built into every stage of the project from the early planning, prototyping, design and, of course, development and deployment. This is why they need to form part of the client brief, too.
Discuss performance and sustainability goals in early stakeholder meetings. Add budget constraints to the design brief and include them in acceptance criteria. When designing and approving components or page layouts, be mindful of the assets involved.
Setting a performance budget in three easy steps
Setting an effective performance budget means aligning your goals with your users’ needs and your sustainability ambitions.
Step 1: Define the metrics – Decide which performance indicators are most relevant to your project. Focus on a few key metrics rather than trying to track everything. The quality of the metrics are most certainly more important than the quantity.
Step 2: Establish baselines – Analyse your existing pages to get an idea of current performance. Tools like Lighthouse, or PageSpeed Insights can provide useful benchmarks. Make sure you record the baseline results so you can refer to them later and track them over time.
Step 3: Set realistic goals – Now set your performance budget. Make sure your goals are realistic for the content and complexity of your site but ambitious enough to drive better sustainable outcomes.
Tracking and enforcing performance budgets
Setting the performance budget is only half the battle and you must track and enforce it consistently to see real results. Remember to test against your baseline data as well as your performance budget. Depending on the metrics you define, you might be able to use automated tools to flag budget violations during development. Some tools will allow you to set alerts when pages exceed the performance budget, letting issues be fixed well before they reach production.
The three most common pitfalls to avoid
- Lack of stakeholder involvement: Every stakeholder involved in the development process should be included in and aware of the performance budget. Individual stakeholders can then better understand why some content or functionality might be different from what they would ideally like.
- Over-focusing on aesthetics: Stylish animations, large background images, or excessive fonts may look impressive, but they can blow your budget very quickly. Invariably, the most common area to save in a performance budget is related to image use and especially large hero images.
- Ignoring third-party scripts: Analytics, chat widgets, ad platforms, and tracking scripts can balloon your page size. Therefore, always ensure you plan for them, audit with the third-party scripts included, and minimise them where possible.
Performance budgets are more than just a technical constraint; they should be used as a design ethic. They reflect a commitment to creating efficient, environmentally responsible low carbon websites. By designing and building a website in defined limits you can contribute to a more sustainable internet.
(Image source: Unsplash)
