Last updated: September 2026.
Sustainable web design builds a site that does its job with less data, less processing and less wasted electricity, so every visit leaves a smaller carbon trace. It is a discipline applied through the build, not a look, a limitation or a certification.
In this guide
- What is sustainable web design?
- What sustainable web design is not
- Why this matters for your business
- How a web page turns into carbon
- The Weight-Bearing Eight: what actually moves the number
- What we found measuring 278 sustainable business websites
- Where accessibility fits in this discipline
- How to measure your own site today
- What changes in a sustainable web design project
- What it costs
- Who does this work
- Glossary
- Frequently asked questions
What is sustainable web design?
A website is a physical thing before it is a creative one. Every page a visitor opens moves a measured quantity of data through a data center, across a network and onto a screen, and each of those three steps draws electricity from a real power grid. Sustainable web design is the set of engineering choices that shrink that quantity on purpose: smaller images, leaner code, fewer scripts running in the background, and a host that draws its power from renewable sources instead of the mixed grid average.
None of that lives in the visual layer. Two sites can look nearly identical and still differ by a factor of ten in the data each one sends, because the gap sits in decisions nobody outside the build ever sees: whether an image was resized before upload or left at camera resolution, whether a font file loads two weights or eight, whether a tag manager fires forty scripts or four. The label varies (some call it green web design, some low-carbon web design) but the underlying list of decisions stays the same regardless of which name a person prefers.
Because the work is structural, sustainable web design applies wherever a site already exists: a nonprofit’s WordPress blog, a B Corp’s Shopify store, an agency’s own custom build. The question is never whether a platform allows sustainable choices. It is whether anyone on the project made them.
What sustainable web design is not
It is not a text-only site with the images stripped out. Some of the lightest, lowest-carbon homepages on record are also the most visually confident, because every photograph and every animation on them earned its place instead of loading by default. Weight drops when a team chooses assets on purpose, not when it removes the ones that make a brand recognizable.
It is not a limit on what a designer can build. Compressing an image, subsetting a font to the characters a brand actually uses and removing a script nobody reads the output of change none of the things a visitor sees on the screen. They change what happens underneath it, the way a bridge can carry the same traffic on a lighter deck once the engineering underneath it improves.
It is not a certification. No accrediting body issues a stamp for an individual website the way one issues B Corp status to a company. What exists instead are open, published methods (the Sustainable Web Design Model, the Green Web Foundation’s hosting registry) and free tools that apply them. A badge in a footer reports a calculator’s output on the day someone ran it. That is evidence, not a credential.
Why this matters for your business
The case for sustainable web design rarely needs to start with the planet. The same short list of fixes that lowers a page’s carbon output also touches five things a business already tracks on its own.
Speed. Every byte a browser has to download adds time before a visitor sees anything useful. Google’s own page experience documentation confirms that Core Web Vitals, the metrics measuring loading speed, responsiveness and visual stability, feed into its ranking systems alongside relevance and everything else Google evaluates. A heavy page is not only slower to load. It is a page working against its own ranking before a visitor even arrives.
Accessibility. A site built with fewer intrusive scripts and cleaner markup tends to work better with a screen reader for the same reason it loads faster: there is less standing in the way. Sustainable web design and accessibility share a foundation, not a coincidence.
Findability. Search visibility rewards the same qualities: a page that loads quickly, renders cleanly and answers the query without forcing a visitor to wait for a handful of trackers to finish first. A slow page does not only frustrate the visitor who already clicked through. It changes how many visitors ever get the chance to click, because a result that renders slowly carries that delay into how a search engine treats it. Findability is what happens once the visitor and the search engine agree the page did its job efficiently.
Hosting and maintenance cost. Bandwidth, storage and image processing are metered resources for most hosts, and the industry median keeps climbing: the HTTP Archive’s 2025 Web Almanac measured the median desktop homepage at 2.86 MB, up from 2.7 MB the year before. A homepage carrying twice a competitor’s data is not a stylistic choice with no downstream cost. It is a recurring line item that compounds with every visit, every month, for the life of the site.
Trust with conscious buyers. A buyer already committed to sourcing responsibly notices when a brand’s own website does not practice what its mission states. The gap between a company’s stated values and the weight of its homepage is exactly the kind of inconsistency a values-driven customer is trained to look for. That customer already reads ingredient labels and supply chain claims with some skepticism, and a bloated, tracker-heavy website invites the same scrutiny it applies everywhere else.
Put together, this is why we describe ourselves as a sustainable web design agency rather than a web design agency with an environmental add-on. The fixes are not a service layered on top of a normal build. They are the same short list of technical decisions that also protects a site’s speed, its rankings and its conversion rate.
How does a web page turn into carbon?
Every public carbon calculator starts from the same number: page weight, the total data a browser transfers to load a page, including its HTML, images, fonts, scripts and video. That data has to move through three places before a visitor sees anything: a data center serving the files, a network carrying them, and the visitor’s own device rendering the result. Each of the three draws electricity, and the source of that electricity, not only the quantity of data, decides how much carbon the visit produces.
To turn that data figure into a CO2 number, nearly every calculator on the market runs a shared, published formula: the Sustainable Web Design Model, an open-source, multi-year collaboration between Wholegrain Digital, Mightybytes, Footsprint, EcoPing and the Green Web Foundation, distributed as code through a library called CO2.js. Nobody is measuring your site with a private metric. It is one published method anyone can read the source of.
That method has changed versions, and the version behind a result changes the answer. The legacy model, version 3, applied 0.81 kWh per gigabyte transferred, multiplied by 442 grams of CO2 per kWh on the global grid average or roughly 50 grams per kWh on verified renewable power. Version 4 splits that same energy across three segments instead of one lump sum (data center, network and device), totals 0.30 kWh per gigabyte instead of 0.81, and pairs it with a global grid average of 494 grams of CO2 per kWh.
Run one URL through two calculators built on different versions and you get two different, equally honest numbers. Which version a specific calculator runs today is worth asking the tool directly, since maintainers update it independently of each other.
To make this concrete: run our own sample’s median homepage, 1.26 MB, through the current Sustainable Web Design Model’s 0.30 kWh per gigabyte and its 494 gram global grid average, and the visit lands at roughly 0.19 grams of CO2, the same median our own measurement of 278 sites actually found. Double the page weight and the number does not double neatly, because part of the model’s cost stays fixed regardless of size, but it moves in the same direction every time: less data in, less carbon out.
This is also where “measured” stops being the right word. No calculator plugs into your server and reads a power meter mid-visit. Every result is an estimate built from data transferred and an assumed electricity mix, refined only when a host is individually verified as renewable. The model’s own documentation says it is built to lean toward overestimating rather than under, which is the direction you want a public claim to be wrong in, if it has to be wrong at all.
The Weight-Bearing Eight: what actually moves the number
Not every wall in a building carries the same load, and not every byte on a page carries the same carbon. Most sustainable web design guides list fixes in whatever order the author thought of them. We rank these eight by how much of the model’s own energy total each one actually touches, so a team with limited hours spends them on the load-bearing items first.
Cut what you send before you change where it runs. A byte costs energy on the network and on the visitor’s device no matter who hosts it. The electricity source only changes the smaller cost that happens on the server.
1. Images and formats
The HTTP Archive’s 2025 Web Almanac puts the median mobile homepage at 911 KB of images alone, out of 2.56 MB transferred in total, more than any other resource type on the page. Check whether images are sized for the space they actually fill on screen rather than left at upload resolution, and whether the site serves a modern format like WebP or AVIF instead of PNG or an unoptimized JPEG. Good looks like a hero image under 200 KB at the width it actually displays, with older formats reserved for the rare browser that cannot decode the newer one.
2. Video
Video is the one asset type that can undo every other fix on this list by itself. A single autoplaying background clip routinely outweighs every image on a page combined, and it keeps drawing data for as long as it loops. Check whether any video autoplays on load instead of waiting for a visitor to press play. Good looks like a static poster frame with a visible play control, and a compressed file that only loads once someone actually asks for it.
3. Third-party scripts and tag managers
A tag manager is rarely one script. It is a container that loads other people’s scripts, some of which load more scripts, most of which nobody on the current team has checked the output of in months. These do not just add download weight; they run computation on the visitor’s device on every page load, which the current Sustainable Web Design Model counts as the single most energy-intensive segment of the three. Check what actually fires on a page load, not what a settings panel claims is installed. Good looks like a short, named list of scripts, each one tied to a person who can explain what it does and why it earns its place.
4. JavaScript frameworks
Separate from third-party scripts is the code a site ships to run itself. The same Almanac data puts JavaScript at roughly 630 to 700 KB on a median homepage, ahead of fonts and behind only images, and unlike an image, that code has to be parsed and run by the visitor’s device before anything happens. Check how much of a page’s interactivity actually needs a full framework rather than a few lines of native code. Good looks like a framework sized to the complexity a site actually has, not the one a previous project happened to use.
5. Fonts
Custom fonts sit in the same Almanac data at over 100 KB on a typical homepage, and unlike an image, a font can block a page from rendering any text at all while it loads, which costs a visit twice: once in weight, once in paint time. Check how many font families and weights a site actually loads against how many a visitor can tell apart. Good looks like one or two self-hosted families, subset to the characters a brand actually uses.
6. Caching and CDNs
Caching does not shrink what a first-time visitor downloads, but it removes the download almost entirely for everyone who returns, which is why the Sustainable Web Design Model has a specific input for the share of repeat visits. A content delivery network shortens the physical distance data has to travel by serving it from a location closer to the visitor, which reduces the network segment of the total. Check whether static assets carry cache headers the browser actually honors on a second visit. Good looks like a returning visitor’s browser reusing most of the page from its own cache instead of re-requesting it.
7. Hosting on renewable electricity
Necessary, and smaller than its reputation. In the current model’s own published breakdown, the data center segment, the one a green host actually changes, is a minority share of the total energy per gigabyte; the network and the visitor’s device account for more of it, and neither moves when you switch hosts. Check a provider’s claim against our review of verified green web hosting providers rather than taking a badge at face value. Good looks like a host that appears in the Green Web Foundation’s public registry under its own name, not a reseller’s.
8. Page architecture and content people actually read
The least technical lever on this list, and the one most sustainable web design audits skip entirely. A site with fewer, better pages, each one answering the question a visitor came with, moves less total data across a year than a sprawling site padded with thin pages nobody finishes reading. Check how many pages a typical session actually loads, and how many of the pages on a site earn a visit at all. Good looks like traffic concentrated on a handful of pages built to convert, with the rest pruned, merged or rewritten.
None of this requires a full rebuild to start. Our list of sustainable brand website fixes you can make today turns the same priorities into steps a marketing team can take in an afternoon, without a developer.
| Lever | What to check | What good looks like |
|---|---|---|
| Images and formats | Whether images are sized for their display width and saved in a modern format. | A hero image under 200 KB, served as WebP or AVIF at the size it actually displays. |
| Video | Whether any video autoplays on load instead of waiting for a click. | A static poster frame with a play control, loading the file only on request. |
| Third-party scripts | What actually fires on a page load, not what a settings panel lists as installed. | A short, named list of scripts, each one owned by someone who can explain it. |
| JavaScript frameworks | How much of the page’s interactivity truly needs a full framework to run. | A framework sized to the complexity the page actually has, not to habit. |
| Fonts | How many font families and weights load against how many a visitor can distinguish. | One or two self-hosted families, subset to the characters the brand uses. |
| Caching and CDNs | Whether static assets carry cache headers the browser actually honors on return visits. | A returning visitor’s browser reusing most of the page instead of re-downloading it. |
| Renewable hosting | Whether the host’s renewable claim appears under its own name in a public registry. | A listing in the Green Web Foundation’s dataset, not a reseller’s badge alone. |
| Page architecture | How many pages a typical session loads, and how many pages earn a visit at all. | Traffic concentrated on a handful of pages built to convert, with the rest pruned. |
What we found measuring 278 sustainable business websites
Claims about an entire category cost nothing to publish and rarely get checked. Between July 28 and August 16, 2026, we measured the homepages of 278 sustainable and mission-driven businesses, mostly in Colorado with additional samples from Oregon, Texas and California, for our Sustainable Business Websites Report. The pattern that emerged is a category that talks about sustainability more consistently than it practices sustainable web design.
Only 33% of the sites, 93 of 278, run on hosting verified as green against a public registry. The rest either run on an unverified claim or on a host with no stated renewable commitment at all, which means most of the businesses in the sample have not checked the one lever on this list that takes a single email to confirm.
The median homepage in the sample weighs 1.26 MB, and 30% of the sites, 81 of 271 measured, exceed 2 MB, more than double the median. Weight is not evenly distributed across the category. A minority of sites drag the average up while carrying most of the download cost themselves.
Just under half, 49%, of the sites we measured earned an A or A+ carbon grade. The other half is where the sustainable web design fixes on this page actually go.
The gap is not only technical. 37% of the homepages we measured, 104 of 278, have no meta description at all, a one-line fix that costs nothing and affects how the page appears in search results before a visitor ever loads it. A sustainability claim on the homepage and a blank meta description on the same page are two statements about how much attention the site received, and they disagree with each other.
If you want to see where your own homepage lands against that same sample, send us your website and get a plan and a quote within 24 hours.
Where accessibility fits in this discipline
Accessibility and sustainable web design get treated as separate checklists, filed under different owners, audited with different tools. They sit closer to the same discipline than either label admits. A page built with clean semantic markup, a real heading structure and text that does not depend on a script to appear, is both easier for a screen reader to parse and lighter for a browser to render. The same decision serves two audiences at once.
The Web Content Accessibility Guidelines, now at version 2.2 and published by the W3C’s Web Accessibility Initiative, are the standard most legal and procurement requirements point to. They cover far more than color contrast: alternative text for meaningful images, a logical reading order, forms a keyboard can complete without a mouse, and captions on video.
None of those requirements add meaningful weight to a page. Most of them (a real heading structure instead of styled text, an image with alt text instead of a stack of decorative divs) remove complexity rather than add it. A form that validates in the browser instead of reloading the page to show an error message is both more accessible and lighter, the same pattern repeating through nearly every item on this list.
Where sustainable web design and accessibility genuinely pull apart is decorative motion and embedded media, which can serve a design goal while working against both a screen reader and a carbon number at the same time. Reviewing both together, not in separate passes, catches that conflict before launch instead of after a complaint.
How to measure your own site today
A handful of honest, public tools cover the measurement side of sustainable web design, and they do not all answer the same question.
Our own Website Carbon Checker scans a URL and returns a letter grade, the grams of CO2 for that single page load, where that result lands against other tested sites, and a projection at your actual monthly traffic. Like most calculators, it reads the page as delivered rather than rendering it fully, so assets a script pulls in after the page reports itself loaded are not part of the count.
The Website Carbon Calculator, built by Wholegrain Digital, returns a similar grade and a set of everyday equivalents, phone charges and kilometers driven among them, for the same page.
The Green Web Foundation’s Green Web Check answers a narrower and, for a lot of decisions, more useful question: is the domain’s hosting provider actually listed in their verified renewable dataset. It returns no page weight and no CO2 number, only a yes, a no, or a record to review.
Ecograder, from Mightybytes, blends a carbon estimate with Google Lighthouse performance data and basic accessibility checks into one composite score, useful when a single number needs to represent more than carbon alone.
Every one of these is a lab test: a simulated visit from a single location, on a clean connection, at one moment in time. Real visitors load your site from uneven connections, older phones and networks nowhere near a lab. Chrome’s own field data, the Chrome User Experience Report, is built from real visits, and it is what Google actually consults to judge Core Web Vitals for ranking, not a lab score. A page can pass a lab test and still load slowly for a meaningful share of real visitors on the far end of that gap.
Our own measurement of 278 sustainable business sites checked both and found that 84% of the sites with enough real traffic to measure loaded fast enough for actual visitors, a separate question from the lab-based carbon grade sitting next to it.
Run your homepage through at least two of these, not one. A large gap between two results usually means one of them is not counting a heavy script, not that either tool is broken. Treat the two results as a range rather than a single verdict, and act on the lower of the two grades.
What changes in a sustainable web design project?
Four parts of a normal web project change shape when sustainable web design is a stated requirement instead of an afterthought, and none of them are the parts a client usually notices first.
The brief. A traditional brief lists pages, features and brand requirements. A sustainable brief adds a number: a weight budget for the homepage and for the template every other page inherits, agreed before a single design file opens.
The timeline. The hours do not disappear; they move. Less time goes into defaults nobody questioned, more goes into testing what actually shipped, and into a round of measurement before launch that a conventional project often skips entirely. For comparable scope, a sustainable web design project and a conventional one land in a similar estimate range and a similar number of weeks.
The weight budget. This is the one addition a traditional build rarely has: a limit, stated in kilobytes, defended at every design review the same way a print budget gets defended at every proof. A homepage mockup that blows through the budget gets revised before launch, not flagged afterward in an audit nobody asked for.
The handover. A conventional handover covers logins, backups and how to edit a page. A sustainable handover adds one more habit: a recheck built into the maintenance schedule, because page weight creeps back up on its own as plugins, tracking pixels and marketing embeds get added over time and nobody removes the old ones.
For the complete comparison, line by line, across images, fonts, scripts, hosting and more, see what actually changes between sustainable and traditional web design.
What it costs
There is no separate line item on a real invoice for “sustainable.” Sustainable web design gets applied throughout a normal build rather than bolted on at the end, so it does not add a fee category of its own. What actually drives the price is the same as any professional website project: how many templates and page types the site needs, how much of the content and image library has to be migrated or shot fresh, whether the build runs on custom code or a page builder, and how much testing keeps performance from drifting back up after launch.
The same logic carries past launch. A maintenance plan that includes a periodic weight recheck costs less over three years than one that lets a fast site slow back down until someone finally notices and pays for a rebuild instead of an adjustment.
We are not going to publish a price range here that would hold up the same way across every project, because it would not. A team that delivers sustainable web design every day should walk you through which of those factors apply to your site specifically, with real numbers, before you sign anything. If you want a written scope, timeline and price for your own project, start a project quote.
Who does this work?
Vetting a claim like this takes more than reading a homepage. Ask for the page weight of a live site the agency actually built, not a rendering. Ask whether their hosting claim is checkable in a public registry. Ask how they test for accessibility, who owns the code and the domain once the invoice is paid, and for a reference who will actually pick up the phone. Those checks are the same ones behind the WEIGH test we publish and hold ourselves to in the sustainable web design agencies we would shortlist, a list of ten studios that explains how to check each claim before hiring anyone, us included.
Planet Media is one of the studios on that list. We design and build these kinds of sites for sustainability-focused and mission-driven brands, with the weight budget and the carbon check built into the process rather than added as a favor at the end.
A short glossary for this topic
| Term | What it means for your site |
|---|---|
| Page weight | The total data a browser downloads to display a page, including HTML, images, fonts, scripts and video. It is the single number every carbon calculator starts from, and the one a team can reduce without touching hosting at all. |
| Transfer size | The compressed size of a file as it actually travels over the network, smaller than the size a browser uses once it decompresses and runs that file. A calculator measuring page weight is almost always measuring transfer size. |
| LCP (Largest Contentful Paint) | The time it takes the largest visible element on a page, usually a hero image or a headline, to finish rendering. Google’s own guidance calls 2.5 seconds or under a good result. |
| INP (Interaction to Next Paint) | The time between a visitor clicking, tapping or typing and the page visibly responding. Google’s guidance calls 200 milliseconds or under a good result, and INP replaced an older metric called First Input Delay in 2024. |
| Green hosting | Hosting powered by renewable electricity, generated on site or matched through certificates and power purchase agreements, and listed under the provider’s own name in a public registry. A claim without a registry listing is a marketing statement, not a verified one. |
| CDN (content delivery network) | A network of servers in multiple locations that serves a site’s static files from whichever location sits physically closest to a visitor. A shorter physical distance means less energy spent moving the same data. |
| Weight budget | A kilobyte limit a team agrees to before design starts, and defends at every review afterward. Without one, page weight only ever moves in one direction. |
| Carbon per visit | The estimated grams of CO2 produced by one page load, calculated from page weight and an assumed or verified electricity source. Multiply it by monthly visits and a single number becomes a yearly footprint, and it is the figure most grade badges are summarizing even when the badge itself only shows a letter. |
Frequently asked questions
Is sustainable web design the same as green web design?
Yes. The terms get used interchangeably, along with “low-carbon web design.” All three describe the same list of engineering decisions: less data transferred, more efficient code and hosting powered by renewable electricity.
Does switching to sustainable web design hurt SEO?
The opposite is far more likely. Smaller images, fewer blocking scripts and faster load times are the same changes Google already rewards through Core Web Vitals and its broader page experience signals.
Does a WordPress or Shopify site count as sustainable, or only custom-coded sites?
In sustainable web design, the platform is not the deciding factor. A lean, well-maintained WordPress or Shopify site can score better than a custom-coded site nobody has cleaned up in three years, because what matters is the theme, the plugin count, the image sizes and the host behind it.
How much does a sustainable rebuild cost compared to a standard website?
For the same scope, the estimate range and the timeline are close to the same, because the hours move to different tasks rather than adding new ones. What changes the price is the scope of the project, not the sustainability requirement. A project quote gives you a written number for your own site.
Do I need a developer to make my current site lighter?
Not for the first pass. Resizing images, removing an unused plugin or trimming a font file to fewer weights are changes most site owners can make inside their existing platform. A developer earns their time on the third-party scripts and framework-level changes further up this guide.
What is a realistic weight budget for a homepage?
There is no single official figure, but our own measurement of 278 sustainable business homepages put the category median at 1.26 MB. A new homepage meaningfully under that median is a reasonable target, tightened further for a template that gets reused across hundreds of pages.
Does dark mode actually reduce a website’s energy use?
Only on the share of screens using OLED or AMOLED displays, where a black pixel draws less power than a white one. It has no effect on data transferred or on hosting energy, and no effect at all on most laptop and desktop monitors, so treat it as a minor device-side detail rather than a page-weight fix.
How often should a website’s footprint be rechecked?
At minimum once a quarter, and always after a redesign or a new tracking script or embed. Page weight tends to creep back up on its own as plugins, pixels and marketing embeds accumulate and nobody goes back to remove the old ones.
Can an AI chat widget or AI-generated content affect a site’s carbon footprint?
Any feature that loads a script on every page is subject to the same third-party math as a tag manager: it adds download weight and it runs computation on every visit. The feature itself is not the problem; an unaudited one running on pages where nobody uses it is.
Can I display a carbon grade badge on my own site?
Yes, as long as it names the tool and the model version that produced it. Treat a self-reported grade the way you would treat any other self-reported number: accurate on the day you ran it, and worth rerunning rather than trusting indefinitely.
Kurt Whitt
Planet Media
Founder and CEO of Planet Media, a sustainability focused marketing agency. 25+ years helping purpose driven brands grow through strategy, storytelling and design.
More about the team