Reducing Sustainability Impact, Energy Efficiency, and Carbon Footprint in Web Design

Cutting a website’s environmental impact starts with knowing where its energy goes. The Sustainable Web Design Model, version 4, allocates 22% of the energy in its system to data centers, 24% to networks, and 54% to user devices. Green hosting addresses the first slice; lighter pages and less work on visitors’ devices address the other two. The model’s authors warn that with its broad boundaries “it is likely that the total estimation results produced by this model will overestimate actual emissions”. Read every carbon figure below as an estimate.

Where the energy goes, and what reduces each part

Segment	Share in the model	What reduces it	Decision that controls it
Data centers	22%	Hosting powered by renewable energy, caching, fewer server-generated responses	Hosting provider, caching policy
Networks	24%	Fewer bytes transferred per visit	Page weight budget, image and font choices, caching headers
User devices	54%	Less processing and rendering on the visitor's phone or computer	JavaScript budget, animation, video autoplay

The shares are the model’s allocation of total system energy, based on the International Energy Agency and research by Anders Andrae and Jens Malmodin; they are not a measurement of your site. They still settle one question the old version of this page left open: switching hosts matters, but most of the model’s energy sits in what you send and what the visitor’s device has to do with it.

How heavy and how carbon-intensive a typical page is

The HTTP Archive’s 2024 Web Almanac gives the baseline. Its page weight chapter reports a median mobile page weight of 2,311 KB in October 2024. Excluding video, images are the largest resource type on homepages: the median mobile homepage loaded 900 KB of images and 558 KB of JavaScript. On inner pages the order flips, with 582 KB of JavaScript against 348 KB of images, so a homepage audit alone can point you at the wrong resource.

The Almanac’s sustainability chapter, written by Laurent Devernay Satyagraha, Burak Güneli, Ines Akrap, Alexander Dawson, Mike Gifford, and Tim Frick, applies version 4 of the model to the same crawl. It estimates the median page load at 0.33 g of carbon on mobile and 0.37 g on desktop in 2024. For example, imagine a page with 100,000 mobile views a month at that median: 100,000 × 0.33 g is 33 kg a month, or 396 kg a year. The figure is small per visit and grows with traffic, which is why the heaviest, most visited templates come first.

Cut bytes where they are heaviest

• Images. Serve each image at the size it is displayed, in a modern format, and compress it. The detail is in preparing images for retina and high-resolution displays.
• JavaScript. Remove unused libraries and split code so each page loads only what it uses. On inner pages, this is the larger share of weight.
• Fonts. The Almanac notes that a typical custom font file “can be over 200 KB” and that subsetting to the characters a site needs brings a median English-only file to around 12 KB. Load only the weights the design uses.
• Video. The Almanac’s advice is direct: “Avoid preloading and autoplay to reduce unnecessary data transfer.” Let visitors press play.
• Repeat visits. Cache static files and compress text responses, so returning visitors do not download the same bytes again.

How these savings show up in loading speed and user behavior is covered in how page speed shapes user behavior.

Speed and sustainability overlap, but not completely

Speed work that sends fewer bytes and does less processing also reduces energy. Some speed techniques do the opposite: they make the next page feel instant by fetching it before the visitor asks. Chrome’s documentation on prerendering pages is explicit: “However, prerendering does use additional memory and network bandwidth.” Its advice: “Only prerender when there is a high likelihood of the page being navigated to.” The same applies to aggressive prefetching. Count bytes as well as milliseconds, and keep speculative loading for the links visitors are most likely to follow, based on your analytics.

Check the host, then choose

The Green Web Foundation runs a green web check and a hosting directory of providers verified as using green energy. In the 2024 Almanac, 14% of mobile sites in the HTTP Archive used hosts in that dataset, up from 10% in 2022. Among the top 10,000 sites the figure was 55%, which, the authors note, can easily be attributed to large providers such as Amazon and Google being considered green. Check your current host’s listing before assuming either way, and ask a new provider for its verification.

Design decisions that change device energy

• Autoplay and motion. Continuous animation and autoplaying video keep the device working whether or not the visitor is watching. Start media on request and keep animation purposeful; the Core Web Vitals side of heavy effects is covered in how Core Web Vitals should shape design decisions.
• Infinite scroll. It keeps loading as long as the visitor keeps scrolling. Load the next batch only when the visitor nears the end of the list, or use a “Load more” button so each batch follows a deliberate action.
• Dark mode. The Almanac says dark mode “can be a real benefit for sustainability on OLED screens” and that the savings vary by device. It also notes that dark mode can affect some readers negatively, for example as a trigger for people with astigmatism. Offer it as a choice and respect the visitor’s system setting rather than forcing it.
• Content. Pages that serve no one still have to be hosted, crawled, and maintained. A content audit that removes or merges them can cut energy and maintenance at the same time.

Measure with the right expectations

Website Carbon estimates the emissions of a single page load. It loads the page as a browser would, records the data transfer, applies version 4 of the Sustainable Web Design Model, and checks the Green Web Foundation directory for the host. Its own page adds a limit: “You should note that the type of device is not taken into consideration.” Use the number to compare versions of the same page before and after a change, not to compare your site with someone else’s measured on a different day.

Use the W3C guidelines as the checklist

Guidelines already exist. The Web Sustainability Guidelines (WSG) were first published as version 1.0 by the W3C Sustainable Web Community Group, and the W3C Sustainable Web Interest Group now publishes them as a Group Note Draft, dated October 16, 2026. They are organized by role: user experience design, web development, hosting, infrastructure, and systems, and business strategy and product management. The status line matters when you cite them to a client: “Group Note Drafts are not endorsed by W3C nor its Members.”

For a statement of intent rather than a checklist, the Sustainable Web Manifesto sets out six principles, clean, efficient, open, honest, regenerative, and resilient, and says: “By signing this manifesto you declare your commitment to create a greener web.”

A starting order

1. Measure a baseline for your three most visited templates: page weight by resource type and a Website Carbon estimate.
2. Cut the heaviest resource on each template, images on some, JavaScript on others.
3. Set a page weight budget per template, so new features have to fit inside it.
4. Check your host in the Green Web Foundation directory and plan a move at the next contract renewal if it is not listed.
5. Review speculative loading, prefetch and prerender rules, against your analytics.
6. Work through the WSG section that matches each team member’s role.

Questions teams ask

Does sustainable design rule out rich experiences?

No. It rules out waste: weight and processing that add nothing the visitor uses. A rich experience that loads its media on request and keeps its code lean fits within the guidelines.

Our clients do not ask about sustainability. Should we raise it?

Raise it through the parts they already care about. Lighter pages can load faster and cost less to serve, and the same changes reduce estimated emissions. Some clients also have their own emissions reporting duties, which their compliance team can confirm.

How big is one website’s impact?

Small per visit and cumulative with traffic. At the 2024 median estimate, a million mobile page views comes to about 330 kg of carbon (1,000,000 × 0.33 g). Your own figure depends on your pages and your host, which is why the baseline in step 1 comes first.

Is sustainable web design a passing trend?

The W3C now maintains guidelines for it, and the HTTP Archive tracks it as a chapter of the Web Almanac. Whatever happens to the label, the work behind it, sending fewer bytes and doing less processing, also makes sites faster.

Start with the template that has the most traffic and the most weight, cut its heaviest resource, and measure again; the same order works for the next template.