In one of our dxw Earth meetings, we discussed a variety of things we can do to help address the climate crisis in our day to day work. Websites and how we host, design, and build them is one example.
What’s a website performance budget?
A website performance budget helps manage the environmental impact of a website by providing a set of goals and constraints, like:
- the time taken to load and interact with pages
- the quantity of assets such as images and scripts to download
- rule-based rating against tools that test a website’s performance like Lighthouse and WebPageTest
Benefits of having a performance budget
You can predict how many resources are needed to host a website by defining a performance budget early on. Things like the amount of server space and memory will affect its overall performance. This can help guide everyone involved in the content, design, and development process to decide what goes into the site. Examples of these decisions might be:
- which code frameworks and libraries, and how many, are used to help accelerate or streamline building
- justifying the use of different web fonts across all pages and their time to download
- how many images and animations will be used and how large are they collectively and individually
Where can we have a performance budget?
You can define a performance budget for a website beforehand or retrospectively. Any project where we’re delivering a new website, or supporting an existing one, is a good time for us to do this.
In the same way that it’s helpful to talk openly about financial budgets with our clients, talking about performance budgets helps people understand why this matters for them. We can also talk about any steps they need to take in managing user generated content that might impact on performance.
Using a tool like Performance Budget Calculator (which works best in Chrome), it’s possible to configure your own performance budget and compare that against another site.
Web performance versus environmental impact
Web performance matters for our environmental impact. There are a variety of factors from how a website is hosted and powered to how it’s delivered to users. The ever increasing size of websites and computer processing demands on our devices is also an issue.
This may compel many of us to upgrade and throw away technology regularly. This isn’t sustainable in terms of mining the planet for rare materials to make new devices. It’s not sustainable either for the disposal of old, redundant technology which is complex to recycle so often sent to landfill.
An optimised, lighter, faster loading website consumes less energy for users. This matters particularly on battery-powered devices and for users with pre-payed, limited, or unreliable electricity supply. Less energy consumption means less need to recharge devices and pay for more electricity. And that means lower energy consumption that’s better for the environment.
A smaller sized website with fewer assets and optimised delivery of content can also, bit by bit, help reduce the site’s energy consumption where it’s hosted. If more of our websites need less storage and memory resources overall, then there could be cost savings to us as well as performance savings for users.
Showing clients how a web performance budget can help them reduce their environmental impact is a plus for everyone involved. And it’s a positive demonstration of a proactive approach to reducing carbon emissions.
- Peformance budget definition
- Performance Budget calculator
- Setting and calculating a web performance budget
- Test a website using rule-based performance rating
- Import-Cost VSCode Extension
The post The environmental benefits of website performance budgets appeared first on dxw.