Click a link, and nothing appears to happen. No fumes, no noise, no meter ticking over. That is the whole problem with thinking about this clearly.
Every page load draws power in three places at once: a server somewhere, the network between it and the reader, and the device in their hand. Energy efficiency in web design is the practice of not spending more of that than the page needs. It happens to produce faster sites, which is why the argument works even for people who do not care about the environmental side.
The importance of energy efficiency in web design
Where the power actually goes
Splitting it out matters, because the three parts respond to different decisions.
- The device does the work of parsing, rendering and executing whatever you send. Heavy JavaScript is expensive here, particularly on older phones where the processing cost is felt as heat and battery drain.
- The network carries every byte. This scales directly with page weight, which makes it the part most within a designer’s control.
- Hosting runs continuously regardless of traffic. A provider running on renewable energy changes the emissions profile of this portion, though accounting practices vary between providers and claims deserve scrutiny.
- Design and development decisions govern the first two. Hosting choice governs the third. Conflating them produces overstated claims in both directions.
Design decisions that shape energy use
The largest savings are usually made before any code exists.
Decide what a page must do, then include only what serves that. A page with one clear purpose is lighter than a page hedging across four, and it usually performs better commercially too.
Images are almost always the biggest single component of page weight. Size them for their actual display dimensions, serve modern formats, and load below-the-fold images only when they are needed. A hero image scaled down in the browser from something four times too large is pure waste.
Autoplay video is the heaviest common default. Remove it unless the video is the reason people came.
Fonts deserve a budget. Two families at most, subset to the characters you use, with a readable fallback so text is visible while a custom face loads.
Development techniques that keep it lean
- Ship less JavaScript. Most sites carry frameworks and libraries doing work that markup and a small amount of script could handle. Audit dependencies periodically, because they accumulate quietly.
- Prefer semantic HTML. It costs nothing to download, works without script, and gives assistive technology what it needs by default.
- Cache properly. A returning visitor should not re-download assets that have not changed. Sensible cache headers are among the cheapest efficiency wins available.
- Audit third-party scripts hard. Analytics, chat widgets, tag managers and embeds each open connections and execute code. Most sites carry tags for tools nobody has used in a year.
The W3C Web Sustainability Guidelines set out relevant practices across product, design, development and hosting decisions.
Accessibility is an efficiency tool
This surprises people, but the overlap is close to total.
Semantic structure reduces script dependence. Clear navigation reduces the number of pages someone loads to find what they need. Reduced motion lowers processing. Text alternatives mean content is usable when media fails to load.
Work towards WCAG 2.1 Level AA and test with real users. Efficient and accessible are usually the same page, arrived at from two directions.
Measure it, then say what you measured
Record page weight, request count and Core Web Vitals for your most-visited pages under stated conditions: device, connection, first or repeat visit. Without that baseline, you cannot demonstrate an improvement, only assert one.
Carbon estimation tools give a directional figure derived from page weight and hosting assumptions. Two tools can disagree about the same page. Use one consistently, state which, and treat the trend as more meaningful than the absolute number.
Then be careful how you describe it. Reducing unnecessary data transfer and processing supports a faster experience while lowering estimated digital carbon, but those figures remain modelled rather than directly measured, and environmental claims need to be accurate and substantiated.
A website sustainability audit gives you a documented baseline and a repeatable method.
The business case, stated honestly
Lighter sites tend to load faster. Faster sites tend to hold attention better and cost less to serve. Those are reasonable expectations, not guarantees, and the size of the effect depends on your audience and starting point.
What is more reliably true is that the work is cheap relative to its return. Correcting images, removing dead scripts and fixing caching are small jobs with no design compromise attached. Most sites can make a measurable improvement in days rather than months.