Sustainable web design means building websites that use less energy and fewer resources every time someone visits them. Every page view moves data across networks, runs code on a device and relies on servers in a data centre, all of which use electricity. Smaller, simpler pages on greener hosting use less of it.

The good news is that a low carbon website is usually a faster, cheaper and easier to use website too. Below we explain where a site’s footprint comes from, what the official guidance says, and the practical steps we take to make sites lighter, from images and fonts to hosting and design choices.

Where a website’s carbon footprint comes from

A website’s energy use is spread across three places:

• Data centres. The servers that store and deliver your site, plus the cooling they need.
• Networks. The cables, mobile masts and routers that carry data from the server to the visitor.
• Devices. The phone or laptop that downloads, processes and displays the page.

Most methods for estimating a site’s footprint, such as the Sustainable Web Design model used by many carbon calculators, use the amount of data transferred as the main input. Estimates vary a lot depending on the model and assumptions, so treat any single carbon figure as a rough guide rather than a precise measurement. What every model agrees on is the direction of travel: send less data, run less code and use cleaner energy, and the footprint goes down.

Pages have grown steadily for years. The HTTP Archive’s 2025 Web Almanac found the median home page weighed roughly 2.6MB on mobile and 2.9MB on desktop, with images and JavaScript making up most of that. That is where the biggest savings usually are.

The W3C has published guidelines for this

The Web Sustainability Guidelines (WSG) are produced by the W3C’s Sustainable Web Interest Group. The W3C is the body behind web standards such as HTML and the accessibility guidelines most sites follow. At the time of writing the WSG are a Group Note Draft, which means they are published guidance that is still being developed, not a formal web standard. They are still the most thorough reference available.

The guidelines are organised into four areas:

• User experience design, such as content, navigation and avoiding unnecessary features.
• Web development, such as code efficiency, images, fonts and caching.
• Hosting, infrastructure and systems, such as renewable energy and data storage.
• Business strategy and product management, such as setting goals and measuring impact.

You do not need to read all of it to make progress. The steps below cover the changes that make the biggest difference for a typical small business site.

Related reading: Sustainability Marketing for Small Businesses: A UK Guide

Cut page weight first

Page weight is the total amount of data a page downloads. It is the simplest thing to measure and usually the quickest to improve. Start by running your key pages through a free tool such as PageSpeed Insights or your browser’s developer tools to see what is being loaded.

• Remove what nobody uses. Old sliders, unused plugins, chat widgets nobody opens and tracking scripts from tools you stopped paying for all add weight.
• Load only what each page needs. A contact form script does not need to load on every blog post.
• Use caching. Caching lets returning visitors and repeat page views reuse files instead of downloading them again.
• Watch third party scripts. Embeds and tags from other companies are often the heaviest and least controllable part of a page.
• Set a budget. Agree a maximum page weight for key templates and check new features against it.

Images are usually the biggest win

Images are the largest share of most pages, so they are where we start on almost every site we build.

• Use modern formats. WebP and AVIF files are typically much smaller than JPEG or PNG at similar quality.
• Size images for their space. Do not upload a 5,000 pixel wide camera photo to fill a 600 pixel space. Serve different sizes to different screens.
• Compress properly. Most images can be compressed noticeably before anyone can see the difference.
• Lazy load below the fold. Images further down the page should only load as the visitor scrolls towards them.
• Ask if the image is needed. Decorative stock photos that add nothing to the message are pure weight.
• Use SVG for logos and icons. These are tiny files that stay sharp at any size.

Fonts deserve a second look

Custom fonts look great but each style and weight is a separate file. A site loading four families in several weights can easily download more font data than it needs. We keep to one or two families, load only the weights actually used, use the compressed WOFF2 format and host fonts on the same server as the site where we can. System fonts, the ones already on the visitor’s device, weigh nothing at all and can work well for body text.

Video is the heaviest content of all

Video is by far the heaviest type of content. Background videos that autoplay on every visit are one of the least efficient things a site can do, especially on mobile data.

• Avoid autoplaying video unless it genuinely earns its place.
• Use a lightweight preview image that only loads the video player when someone clicks play.
• Keep clips short, compress them and serve a smaller version to phones.
• Offer captions and a text summary, which helps accessibility and means some visitors do not need to play it at all.

Choose greener hosting

Where your site is hosted affects how clean the electricity behind it is. When comparing hosts, look for:

• Evidence of renewable energy. Look for published details of how the data centre is powered, rather than a leaf logo. The Green Web Foundation keeps a directory of hosts that have shared evidence of their green energy claims, and its Green Web Check tool shows whether a site appears to be on one of them.
• Location. Hosting close to your audience means data travels less far. For UK businesses that usually means UK or nearby European data centres.
• Efficient set up. Good caching, up to date server software and a content delivery network (a set of servers that store copies of your site nearer to visitors) all reduce the work done per visit.
• Tidy data. Delete old staging sites, unused backups and media you no longer use.

Our website hosting page explains how we host and look after client sites.

Design choices that waste energy and attention

Sustainability is not only about code. Design decisions shape how much people have to load, click and scroll to get what they came for.

• Dark patterns. Tricks such as fake countdown timers, pre-ticked boxes, confusing cookie banners and endless pop-ups waste visitors’ time and push them into journeys they did not want. The WSG explicitly recommends avoiding deceptive design, and some of these tactics can also break UK consumer law.
• Infinite scroll and autoplay. Both load content the visitor may never look at.
• Heavy animation. Large scroll effects and animated backgrounds use processing power on every device. Keep motion small and respect the reduced motion setting on visitors’ devices.
• Confusing navigation. If people need ten page views to find one answer, that is ten times the data. Clear structure and good search mean fewer wasted journeys.
• Content bloat. Old, duplicate or outdated pages still get crawled and stored. Review and prune regularly.

Dark mode is sometimes suggested as a green fix. It can reduce power use on some screens, mainly OLED displays, but the effect depends on the device, so treat it as a nice option for visitors rather than a major saving.

How to implement sustainable web design step by step

1. Measure where you are. Record page weight and speed scores for your home page and most visited pages.
2. Remove what is not needed. Unused plugins, scripts, features and pages.
3. Fix images and video. Convert, resize, compress and lazy load.
4. Trim fonts. Fewer families and weights, self hosted in WOFF2.
5. Review hosting. Check energy sources, location and caching.
6. Remove dark patterns. Make cookie choices, pop-ups and checkout honest and simple.
7. Set a page weight budget. Use it to judge every new feature.
8. Measure again and repeat. Check quarterly or after any major change.

A lot of this overlaps with good accessibility and good SEO. Faster pages tend to keep visitors on the site, and Google’s Core Web Vitals reward pages that load and respond quickly.

Frequently asked questions

What is a low carbon website?

It is a site designed and hosted to use as little energy as is reasonably possible, mainly by keeping pages light, code efficient and hosting powered by renewable energy.

Can I measure my website’s carbon footprint?

Several free calculators estimate emissions per page view from data transfer and hosting. They use different models, so results vary. They are most useful for comparing your own pages before and after changes.

Is sustainable web design more expensive?

Not usually. Most of the work, such as optimising images, cutting plugins and simplifying pages, is good practice anyway, and lighter sites can be cheaper to host and maintain.

Does a sustainable website look plain?

No. It means being deliberate. Strong typography, good colour and a few well chosen images can look far better than a page packed with heavy effects.

Build a lighter, faster website with us

If you want a website that loads quickly, works well for every visitor and uses fewer resources, our web team can help, whether that is a new build or a clean up of your current site. Take a look at our website design service or get in touch to talk it through.