Sustainable web design: what the W3C guidelines mean for your website

Sustainable web design is the practice of building websites that use less data and energy to load, which also makes them faster and easier to use. The idea has moved from a niche interest to a real framework: the W3C's Sustainable Web Interest Group published an updated draft of its Web Sustainability Guidelines on September 24, 2026, with 71 guidelines for designers, developers, hosts and business owners. For most small business sites, sustainable design comes down to a few habits: lighter images, fewer fonts, less JavaScript, purposeful animation, and greener hosting. None of it requires giving up a good-looking site.

Here is what the trend is, why it is growing, and how to apply it without turning your site into a plain text page.

What the trend is

Every page view moves data from a server, across networks, to a phone or laptop, and all three use electricity. Sustainable web design tries to cut that work down. It shares a lot with performance and accessibility work, and the W3C guidelines say as much: they cover the "planet, people, and prosperity" impacts of digital products, not just carbon.

The guidelines are split into four groups:

One important caveat: the document is a W3C Group Note Draft. In its own words, "Group Note Drafts are not endorsed by W3C," and the draft "may be updated, replaced, or obsoleted by other documents at any time." Treat it as a well-researched checklist, not a legal requirement.

Why it is happening now

Pages keep getting heavier

The HTTP Archive's 2025 Web Almanac chapter on page weight found that "the median home page in 2025 was 2.86 MB on desktop and 2.56 MB on mobile." The median mobile home page grew 202.8% over ten years, from 845 KB in July 2015. Images made up the most bytes on both mobile and desktop, followed by JavaScript and fonts. That is the same order we would tackle them in.

There is now a shared framework

Before the W3C guidelines, sustainable design was a loose set of blog posts and opinions. Now there is a structured list with clear categories that teams can work through, the same way they use WCAG for accessibility.

The business case lines up

A lighter site is a faster site. Faster sites are easier to use on a phone with a weak signal, and speed feeds into the Core Web Vitals that Google measures. You rarely have to choose between sustainability and results.

How emissions are estimated (and why to be careful with numbers)

Most website carbon calculators use the Sustainable Web Design Model, an open-source method built by Wholegrain Digital, Mightybytes, the Green Web Foundation and others. Version 4 uses data transfer as its key input and splits energy use across data centers (22%), networks (24%) and user devices (54%).

The model's authors are upfront about its limits. They say "it is likely that the total estimation results produced by this model will overestimate actual emissions," and that it is less useful for finding which specific parts of a system to fix. Our take: use a calculator to compare your site before and after changes, not to print a precise carbon number on your home page.

What sustainable design looks like in practice

Sustainable does not mean ugly. Some patterns, described in words:

• The confident type-led home page. Big, well-set headlines in a system font or one web font, with a single strong image instead of a slider of five.
• The click-to-play video. A light poster image with a play button instead of a background video that autoplays for every visitor.
• The tidy blog. Articles with real page numbers or a "load more" button instead of infinite scroll, which the guidelines flag as an engagement trap.
• The honest illustration. Small SVG drawings in place of large stock photos that add little.
• The quiet motion. One or two purposeful animations that respect the visitor's reduced motion setting, instead of effects on every section.

The biggest wins, in order

1. Images

The guidelines say media should be included only when it adds value, then optimized and lazy-loaded, using modern formats like AVIF and WebP. Resize photos to the size they display at, compress them, and use lazy loading for images below the fold.

2. Fonts

The guidelines recommend system fonts where possible, fewer web font downloads, and subsetting fonts to only the characters you need. One family in two weights is plenty for most brands. If you are choosing fonts for a new brand, our post on getting a new brand onto your website covers how to keep it simple.

3. JavaScript and third-party scripts

Chat widgets, heatmaps, social embeds and extra tracking tags all add weight. Audit them once a year and remove what nobody uses. Each third-party script you cut helps speed and privacy too. Our guide to improving website speed shows how to find the heavy ones.

4. Hosting

The guidelines suggest choosing providers that disclose environmental metrics like renewable energy use. The Green Web Foundation keeps a directory of verified green hosts and a check tool to see if a site runs on one. Our guide to choosing web hosting covers the other factors to weigh.

5. Budgets

The business strategy section recommends setting performance, environmental and human budgets. A simple version: pick a maximum page weight for your home page and key landing pages, and check it before launching new sections.

How to apply it on your platform

WordPress

WordPress 6.5 added AVIF support, and the announcement says AVIF images "can be up to 50% smaller than JPEGs while maintaining the same image quality," as long as your host's image library supports it. Beyond images, the big WordPress issue is plugin bloat. Every plugin can add scripts and styles to every page. Remove what you do not use, and pick a lean theme over one that loads every feature everywhere.

Webflow

Webflow has a built-in image conversion tool that compresses JPEG and PNG assets to WebP or AVIF from the Assets panel. Note its warnings: the original files are replaced, so back them up first, and AVIF and WebP are not supported for Open Graph images. Keep Interactions purposeful, since each one adds code.

Shopify

Shopify has served storefront images in modern formats for years. Its 2022 changelog says that "Shopify will detect which image formats are supported by the client browser and automatically optimize" them, with AVIF alongside WebP. On Shopify, the bigger risk is apps. Each one can add scripts to every page, so remove apps you no longer use and check that their code is gone too. More in Shopify for growing brands.

Custom sites

Static or mostly static sites on Next.js, Astro or plain HTML can be very light, because pages are built ahead of time and served from a CDN. The risk is shipping a large JavaScript bundle for a site that is mostly text. Measure the page weight of your templates and keep client-side code to the parts that need it.

When not to push it too far

• When it hurts accessibility. Removing contrast, shrinking text or stripping out captions to save bytes is the wrong trade. Accessibility comes first. See our guide to website accessibility and WCAG.
• When it hurts the sale. An online store needs good product photos. Optimize them, but do not cut them. The same goes for a portfolio or a restaurant menu.
• When it is greenwashing. Do not claim your site is "carbon neutral" based on a calculator score. The model's own authors say it overestimates. Talk about the specific changes you made instead.
• When it does not fit the brand. A luxury brand might need rich imagery and motion. Aim for "as light as it can be while still doing its job," not "as light as possible."

The bottom line

Sustainable web design is mostly good web design done with care: send less, load faster, and respect what the visitor asked for. Start with images and scripts, check your hosting, set a page weight budget, and measure again after each change. Your visitors on slow phones will notice before anyone else does.

Want a lighter, faster site that still looks great? Talk to us about a performance and sustainability review.