Page Weight Budgets

Page weight budgets are one of the simpler principles you will find, but also one of the more effective ones. It is a budget describing the maximum file size of a web page, and it means that for each individual page, you will set a budget to steer you and your team in the same direction. When everyone knows the finish line it is easier to work together toward the same goal.

Imagine for a moment that you and your friends decided to run a marathon together. Each one of you knows how long a marathon is, and therefore you know that you need to train to be able to reach the finish line. It is tough and requires blisters, tears, and sweat, but it is doable. If no one had decided how long a marathon is, it would have looked very different. First of all, it wouldn’t have been an accomplishment since no one would know what you have done. Second of all, you and your friends would have stopped at different lengths, but all would have claimed to have finished the marathon. But when comparing you wouldn’t have run the same distance. You might have run 8 kilometers, and another friend might have finished after 5 kilometers.

Knowing the distance when running a marathon is important, and it is the same in web design. A team cannot work together if they don’t share the same goal, and this is where page weight budgets can help you.

How can page weight budgets make websites more sustainable?

Page weight budgets are important when working with sustainable web design. They will help you as a professional, your team, your clients, and our planet. Underneath here you will find some of the benefits you will see after implementing page weight budgets.

• Drastically reduced page weight.
• Better user experience.
• Well-thought code and accessibility.
• Reduced environmental impact.
• Better teamwork.

What is a realistic page weight budget?

When you are setting a page weight budget you can use whatever number you prefer. Some companies work their way using their current page weight and then lower it to reduce the weight in stages. Others pick a hard number right away and do what they can to stay within it.

Picking the right amount can be hard, and there is no real ingredient that tells you exactly how much a page should be. But a good example to work from is Alex Russell’s 0,5 megabytes. It will give you a budget without pushing it too hard.

Learn more about page weight budgets

If you want to learn more about page weight budgets, then you can find a whole lesson about it in my book Sustainable Web Design In 20 Lessons. Lesson 5 is specifically about page weight budgets, their benefits, how to create them, and how others such as Wholegrain Digital have implemented them in practice.