Page weight budgets and why you should set them

Managing page weight ensures you deliver low-carbon, more sustainable websites to your visitors. But how can you set and apply these budgets in real-world client projects?

What is a page weight budget?

Simply put, it is a budget of how much a webpage can weigh. This weight is measured in kilobytes or maybe megabytes and relates to the files that must be loaded/transferred to show your webpage in full.

What is the purpose?

With a budget set, it becomes the goal of the person, or team, to deliver that webpage to the agreed budget or less. With the goal clearly set from the start of a project, it means everyone from design through to development can work together to deliver on budget.

What is a good budget to aim for?

Such a figure doesn’t really exist. The most sustainable website is the one that is never created. The next perhaps is the one with the smallest realistic page weight. You can’t serve a webpage without transferring some data. But how much data should you be aiming for?

Page weight budgets in the real-world

Clearly, you could set your budget to a tiny number of kilobytes across all your projects for all your clients. But this is very unlikely to work without ruffling some feathers or stifling creativity. Remember that balance can be key to success.

Setting a budget for client projects

It’s really important that when working in a team you collaborate and communicate clearly to achieve the best results. It is no different with page weight budgets for webpages. Everyone needs to be ‘on the same page’ – including the client. It’s important to bring them along the journey, to understand their needs and their users’ needs; to share your knowledge so that they understand why having a budget is important.

There are a few ways to help create page weight budgets in a client-friendly way:

  1. Use a benchmark from their current website or competitor. Use this figure as a starting point to create a reduced page weight budget.
  2. Use analytic data to find the most common devices being used. This determines how the website is being viewed, if more so on mobile devices, then aiming for an even lower page weight will help to improve performance across those devices and mobile networks.
  3. Use analytic data or estimate the slowest internet connection speed being used. Like point 2, this helps determine how slow a connection website visitors are on, setting a page weight budget accordingly will help improve the experience for these users, as well as all others on faster speeds.

These three items are important. They mean you’re always working with your client to create something better; something lower in weight and carbon footprint. It always helps to explain what a reduced page weight will mean for their users.

Consider a budget range

It may help with client buy-in, as well as project management, to create a page weight budget range rather than a singular figure. For example, the page weight budget for the homepage of a new website could be between 150-300KB. On average, homepages tend to be a little heavier, so allowing for some wiggle room can help to ease any struggles along the way.

Budgeting for known feature requirements

If you know from the start of a project that the website requires a certain feature or third-party app/service, then you should consider this within your page weight budget. For example, the requirement for analytics tracking to be included on every page, or a third-party email subscription service that needs to be integrated into the footer. Ideally, these items should be known from the very beginning during a functional specification, before UX and design begin. This isn’t always possible, but it is always best to try and get these known factors in place to start your budget.

Measuring page weights

It can be very tricky to determine the weight of a webpage during the design and even build stages. Your local development environment is likely not a suitable testing ground for accurate page weights. However, keeping an eye on the weight of a page during development is a handy reminder of your progress and can help to keep you on track.

Before going live with a website, I highly suggest (and I’m sure you all do) testing on a staging server. The staging server should ideally be in the same location/using the same hosting service as the live site will. This will help to give a more accurate picture of the page weight and loading speeds once live.

Tools to help measure

Of course, you can use in-browser developer tools to measure page weight, but I believe it is also a good idea to use a secondary method such as GTMetrix to evaluate the page weight. This way you could measure from the location of the highest number of users the website is likely to get (if you know this metric).

Optimising

Whilst building to client deadlines and monetary budgets, it can be hard to keep up with your own high-level standards. I sometimes use this testing time on staging to optimise code, page assets such as images, and test caching to help squeeze those extra KBs from the page weight. I think it is a really important part of the process and one that can help you to successfully meet your page weight budgets.

Concluding

Managing page weights with a budget can help to improve both your own website as well as websites for your clients. By keeping a close eye on the page weight you can:

Ok, that last one isn’t a direct result, but it could be if you’re delivering a well-designed, blazingly fast, and low-carbon website for your clients. So, why not give page weight budgeting a try?
 


 
I’d love to know if you’re using page weight budgeting in your workflow and if you have any more tips and tricks for working with clients to deliver on them. Let me know on Twitter via @sustainabledevs.

Find this resource useful?

I want everyone to be able to benefit from articles like this.

That's why I need your help in spreading awareness. Please consider telling your fellow developers about the sustainable.dev by sharing a Tweet.

Tweet about the sustainable.dev