Has your team set a page-weight budget? Here is how to!

A page-weight budget is very useful for you and your team when you are trying to keep a website sustainable or environmentally friendly or when you are going to make it. When dealing with a common goal in a team it might be helpful to set some clear guidelines to how you will achieve the goal, especially because people tend to understand and interpret information differently.

In this article, we will talk about what a page-weight budget is, and why it will help you and your team achieve better results when making your website environmentally friendly.

What is a page-weight budget?

You might never have heard this term before since sustainable web design and environmentally friendly websites is still relatively new thing. A page-weight budget is when you and your team are coming together on a maximum page-weight in either kilobyte (KB) or megabyte (MB) that each of your web pages is allowed to be.

Let's pretend you have agreed with your team that each page on your website is allowed to maximum be 180KB. Now that you know this you all have a clear goal of optimizing the content to become a maximum of 180KB or less. You can now look at a certain page and together agree if parts of the content have to be removed or replaced to comply with the agreement.

Why set a page-weight budget?

When you and your team are working towards a common goal it might be a good idea to have clear guidelines written down to keep everyone on the same page. Without a maximum page-weight budget you won't know how heavy your pages are allowed to be and the result of that might be that some of your team members work harder and others work less. Smudged lines in the common goal is a bad idea since your team members might start working against each other instead of with each other.

To give you an example of how a project could go wrong, then let's pretend that you and your team just got the order to make your website environmentally friendly. As you work you notice one of your colleagues talk bad about another because that person yet again has added a picture to the web page when they clearly shouldn't. At this specific time, the webpage you are working on has a weight of 248KB. The colleague complaining thinks that this specific page should be a maximum of 50KB and the other thinks the maximum is 300KB.

As you can see from the example above, without clear guidelines your team members won't know how to work towards a common goal and instead, they start working against each other. That is why setting a page-weight budget is a great idea for your team or you as an individual.

How do you set a realistic page-weight budget?

Setting a page-weight budget is important for you and your team but it has to be realistic. You can easily swing out a number, but if you haven't taken into consideration the type of content you are going to have on your website then it won't be realistic and you might end up with bad results or a broken user experience for your visitors.

1: Analyze and plan your content.

The first step towards creating a realistic page-weight budget is to analyze and plan the content you are going to have on your website. You can ask yourself how many images or videos you need on each page or even better make a sketch/demo in Adobe XD. By knowing what content you want to show your visitors you can plan a realistic budget.

2: Talk to your team.

The last step is to talk with your team and listen to their ideas. Talk about other ways to display the content and how you together can lower the environmental impact of a webpage. Your colleagues might have different ideas and some might be better than the ones you came up with.

3: Write down the final page-weight budget.

Once you have talked to your team and come together on a nice layout of your website, then you can list down the final page-weight budget. Go over each page and count the number of images, videos, animations, etc. Take the average file size of a relatively optimized image and use it for each image on the page, do the same for videos.

Once you have a total of how much weight a certain page might have, then try to set the goal lower to make room for improvements such as image optimization and such. On modern websites using less to no images and a minimalistic design, it is not uncommon to have a page-weight budget between 60KB-150KB.

Wrapping up

In this article, you have been introduced to page-weight budgets and how they are going to help you and your team, work towards a common goal instead of against each other. We have also given you some tips that we hope will make it easier for you to create the final page-weight budget.

At last, we would like to invite you to share your experience with page-weight budgets below. You are also welcome to share your tips and advice when it comes to working towards a common goal in a team or when making websites sustainable. Please share this article with your family, friends, and colleagues. Only together can we make the internet more sustainable and environmentally friendly.

Author

Michael Andersen

I am a self-taught and highly passionate web developer currently living in Sweden, where I use my skills to make the internet a better place through ethical and sustainable web design.