Why every website we build gets a page-weight budget

Every page on your website has a weight: the total of everything a browser has to download before the page is ready. Images, fonts, scripts, video, tracking tags and the code that holds it all together. Most of the time nobody looks at that number, and so it quietly grows.

We set a page-weight budget for every site we build. It’s one of the simplest things we do, and one of the most useful.

What a page-weight budget is

A page-weight budget is an agreed limit on how heavy a page is allowed to be. It works the same way as a household budget: you decide up front what you can afford, and then every new thing has to fit, or something else has to go.

The budget usually covers a few things:

• The total download size of a typical page
• The size of the largest image above the fold
• The number and size of web fonts
• How much JavaScript loads, and from how many outside services

We agree the numbers with each client at the start of a project, based on what the site needs to do. A photography portfolio and a council-funded community directory will have different budgets, and that’s fine. What matters is that there is one.

Why it matters

Faster for the people you serve

Lighter pages load faster, especially on older phones, regional connections and prepaid data plans. Those are often exactly the people community organisations, schools and small businesses most want to reach. A heavy page doesn’t just feel slow; for some visitors it simply doesn’t finish loading.

Less energy, every visit

Every byte transferred uses a little electricity, in data centres, networks and the visitor’s own device. One page view is tiny. Thousands of page views, every month, for years, add up. Trimming weight is one of the most direct ways a website can tread more lightly, and it’s something you control.

Easier to look after

Heavy sites are usually heavy because things have piled up: a slider here, a chat widget there, three analytics tools that all do the same thing. Each one is another thing to update, another privacy question and another way for the site to break. A budget keeps that pile from forming.

How we set one

We start with the content, not the technology. What does someone need to see on this page to do what they came for? That gives us the essentials. Then we add only what earns its place.

A few habits do most of the work:

• Images are resized for the space they appear in and saved in modern formats, with lazy loading for anything below the first screen
• We use one or two font families, in only the weights we actually need, or system fonts where they suit the brand
• Video is loaded only when someone presses play, not on page load
• Third-party scripts have to justify themselves; if a tool is used by a few visitors, it shouldn’t slow the page for everyone else

None of this is about making a site look plain. Good design works within limits all the time. A budget is just one more limit, and a helpful one.

How to keep to it after launch

The hard part isn’t launching a light site. It’s keeping it light a year later, after new staff have uploaded photos straight from their phones and someone has added a popup.

That’s why the budget lives on after launch. We check page weight as part of ongoing care, and we set the site up so editors have less chance of going over by accident: images are resized automatically on upload, and the page builder offers sensible blocks rather than a blank canvas. When someone wants to add a new tool or embed, the budget gives everyone a shared question to ask: what are we taking out to make room?

You can check your own pages too. Most browsers have developer tools with a network panel that shows how much a page downloads. Load your home page, look at the total, then sort by size. The biggest items are usually a photo or two that could be a fraction of the size, or a script you’d forgotten was there.

Our rule of thumb

If a page can’t explain why it’s heavy, it’s too heavy. Every large file should be doing a job a visitor would notice if it were gone.

Where to start

If your site feels slow, or you’re planning a new one, start by measuring your home page and your busiest page. Write the numbers down. Then decide what you’d like them to be, and work back from there. You may be surprised how much can go without anyone missing it.

You can read more about how we work on our approach page, and about keeping a site light after launch in our website care service. Or tell us what you’re working on and we’ll take a look at your pages with you.