The website performance budgets are fundamental for a more sustainable internet

The choices made by designers and digital developers directly influence the energy consumed by billions of devices all over the world. Web sites are often inflated today. The average size of the web page is more than doubled in the last ten years, bringing to more slow load times and an increase in energy consumption. Since each kilobyte consumes electricity on servers, networks and user devices, both the designers that their customers must be aligned to create a significant difference.

Setting and sticking to a performance budget is a practical, measurable and impact way to reduce that burden and create a better internet for everyone. Not only does it directly reduce the digital carbon imprint, but also improves user experience, site performance and conversion metrics.

What is a performance budget?

A performance budget is a set of constraints or limits placed on some aspects of the performance of a website. It is essentially a guiding principle that informs how it can be “heavy” a page and is often measured in terms of page loading time, weight/file dimensions of the total page, 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 the choices attentive to the resources that align both the needs of users and environmental sustainability.

Because customers must play a key role

A typical brief client for a digital project is always oriented towards the description of the requirements. The brief includes information on content, functionality or visual aspect that are considered necessary. Everything in the brief will therefore create a negative environmental impact to produce, archive, transmit and maintain.

It is very rare that briefs and customers specifications include restrictive requirements such as performance budgets. When customers begin to add budgets for performance, it creates a natural compromise conversation that evaluates the relevance and importance of any content or functionality.

Integration of performance budgets in your project

Performance budgets should not be a rethinking or something that is treated at the time of development. They must be integrated at each phase of the project by the first planning, prototyping, design and, of course, development and distribution. This is the reason why the customer’s brief must also be part.

Discuss the performance and sustainability objectives in the first meetings of the interested parties. Add budget constraints to the design brief and include in acceptance criteria. During the design and approval of components or page layouts, be aware of the resources involved.

Setting a budget for performance in three simple steps

Setting an effective performance budget means aligning your goals with the needs of your users and your sustainability ambitions.

Step 1: Define metrics – Decid which performance indicators are most relevant for your project. Focus on some key metrics rather than trying to trace everything. The quality of the metrics is certainly more important than quantity.

Step 2: Establish the basic lines – Analyze your existing pages to get an idea of ​​current performance. Tools such as lighthouse or pagespeed intuitions can provide useful comparisons. Make sure to record the basic results in order to refer them later and track them over time.

Step 3: Sets realistic objectives – Now set your performance budget. Make sure your goals are realistic for the content and complexity of your site, but quite ambitious to guide better sustainable results.

Monitoring and application of performance budgets

The setting of the performance budget is only half of the battle and you have to trace it and make it respect constantly to see real results. Remember to test the basic data and the performance budget. Depending on the metrics you define, you may be able to use automated tools to mark the violations of the budget during development. Some tools will allow you to set notices when the pages exceed the performance budget, letting the problems solve well before reaching production.

The three most common pitfalls to avoid

• Lack of involvement of the interested parties: Each stakeholder involved in the development process should be included and aware of the performance budget. The individual parties concerned can therefore better understand why some content or functionality may be different from what they would like to ideally want.

• Too much focus on aesthetics: Elegant animations, large background images or excessive characters may seem impressive, but they can blow up the budget very quickly. Invariably, the most common area to be saved in a performance budget is related to the use of images and in particular to the images of large heroes.

• Ignoring third -party scripts: Analysis, chat widgets, advertising platforms and tracking scripts can inflate the size of your page. Therefore, always make sure to plan for them, audit with third -party scripts included and minimizing them where possible.

Performance budgets are more than a simple technical constraint; They should be used as a design ethics. Reflect a commitment in creating efficiency and respectful of the environment Low carbon websites. By designing and building a website with defined limits, it is possible to contribute to a more sustainable Internet.

(Image source: Usplash)