Designers argue about colour for hours. Whether the blue is right, whether the contrast holds, whether the accent competes with the logo.
Nobody argues about kilobytes. The hero image goes in at whatever the photographer supplied, four font weights get specified because the type system looked better with them, and the total arrives at three megabytes without a single conversation.
Page weight in web design deserves the same attention colour gets, for a straightforward reason: it is a design decision with visible consequences, and it is currently being made by default rather than on purpose.
Page Weight in Web Design: Think in Kilobytes First
Weight is a design decision, not an engineering one
Developers get handed the page weight in web design; they do not create it. By the time a build starts, the images, the fonts, the video and the animation have all been chosen.
An engineer can compress an image. They cannot decide that the page needed one photograph rather than a carousel of six, because that judgement belongs to whoever designed the page.
Which means the useful intervention happens earlier than most teams place it.
Where the kilobytes of data transfer go
- Images, almost always the largest share. A full-width hero at photographer resolution can outweigh everything else on the page combined.
- Fonts, quietly. Each family and each weight is a separate file. Four families at three weights is twelve downloads before a word appears.
- Video, expensively. Autoplay background footage is the heaviest common default on the web and the one that most reliably delays what people came for.
- Animation libraries, unnecessarily. Imported to achieve an effect that CSS transitions would produce, at a fraction of the cost.
Designing with a page weight number in mind
Set a budget before the first mockup. Something you can hold in your head: a homepage under a stated figure, interior pages under a lower one.
A budget agreed at this point is a constraint that shapes what gets designed. Introduced afterwards, it becomes a negotiation, and this particular hero image is always the exception.
Then design against it. If the hero photograph costs half the budget, the rest of the page has to be light, and that trade-off is a legitimate creative decision rather than an imposition.
The substitutions worth knowing
- Expressive typography does much of the work a hero video was doing, at a small fraction of the page weight. This is the single best trade available.
- One strong photograph beats a carousel almost every time, and not only on weight: most visitors never reach the second slide.
- CSS gradients, shapes and transitions replace decorative image assets. A system font stack costs nothing at all and is a legitimate choice rather than a compromise.
None of these makes a page plainer. They make it deliberate.
What it buys, honestly stated
A faster site, most reliably. Pages that arrive quickly on a mid-range phone on a weak connection, which is how a meaningful share of visitors reach you.
Where performance and environmental impact both apply, treat them as the same lever: reducing unnecessary data transfer and processing supports a faster experience while lowering estimated digital carbon, though those environmental figures remain modelled rather than directly measured.
There is an accessibility connection too, though it is worth being precise about it. Lighter pages help people on slow connections, older devices and limited data plans. That is not the same as being accessible, which requires contrast, keyboard operation, semantic structure and testing. Working towards WCAG 2.1 Level AA is separate work that happens to share many of the same habits.
Measuring it
Record total transferred size, request count and Core Web Vitals for your key pages, noting the conditions: which device, which connection, first or repeat visit. Without those conditions, the numbers are not comparable to anything, including your own earlier measurements.
Check during design rather than after launch. A mockup can be estimated from its assets, and finding out at that stage costs a conversation instead of a rebuild.
Our sustainable web design work sets the budget before design starts, which is the only point at which it changes anything.