Sustainable web design means building a website while limiting its energy consumption and greenhouse gas emissions at every stage, from the hosting provider to the way images are compressed and code is written. This approach doesn’t require sacrificing a good-looking design, and most of the measures that reduce a site’s environmental footprint also make it faster, better ranked on Google, and more pleasant to use on a phone. Here’s where to start, with practical steps you can apply this week.
What is sustainable web design?
Sustainable web design applies the same logic to a website that eco-design applies to a physical product: you consider the entire lifecycle, from the server hosting the files to the visitor’s device displaying the page, and you look for ways to consume less at each step.
In practice, this covers five areas. Hosting comes first, because the server consumes electricity around the clock to serve your pages. File weight comes next, because every kilobyte transferred uses energy across the network and forces the visitor’s phone or computer to work harder. Design and layout, because the number of typefaces, image resolution and amount of animation directly affect the volume of data that needs to travel from server to screen. Code, because a site built with unused libraries loads hundreds of kilobytes of JavaScript that nobody runs. And content, because a page with a thirty-second auto-playing background video can weigh as much as fifty text pages.
The good news is that these five areas overlap almost perfectly with web performance best practices, search engine optimization and accessibility requirements. A lighter site loads faster, Google ranks it higher, and visitors on a slow connection or an older phone can access it without frustration. Google’s Core Web Vitals, the performance metrics it uses to influence search rankings, reward exactly the same qualities that sustainable design produces: small page sizes, fast rendering, minimal layout shifts. So a site that scores well environmentally also scores well commercially, because faster pages convert more visitors into customers and rank higher in search results. Sustainable design isn’t a sacrifice, it’s an investment that pays off in several directions at once.
What is the environmental impact of a website?
The digital sector as a whole accounts for roughly 3.5 to 4% of global greenhouse gas emissions, a figure comparable to civil aviation, according to estimates from the Shift Project. Your individual website is obviously a tiny fraction of that total, but the logic of sustainable design rests on the aggregate effect: when 1.9 billion websites exist on the web, every gram of CO2 saved per page view adds up.
Website Carbon Calculator, a free tool that estimates a web page’s footprint, places the global average around 0.36 grams of CO2 per page view. For a showcase site receiving 10,000 visits per month, that represents roughly 43 kilograms of CO2 per year, the equivalent of driving 300 kilometres. An e-commerce site with heavier product pages and higher traffic can easily exceed one tonne per year.
Three areas concentrate the bulk of this consumption. The data center hosting your site uses electricity to power and cool the servers. The network carrying data between the server and the visitor’s browser uses energy at every relay. And the visitor’s device (phone, computer, tablet) uses electricity to render the page, execute JavaScript and run animations. When you make your site lighter, you reduce consumption at all three levels simultaneously.
What makes the topic pressing is that the natural trend goes in the wrong direction: the average weight of a web page has more than quadrupled over the past ten years, according to HTTP Archive, driven primarily by unoptimized images, third-party JavaScript (advertising, analytics, chat widgets, social media embeds) and embedded videos. Without conscious intervention, every redesign tends to produce a heavier site than the one before.
How to choose a greener hosting provider?
Choosing a hosting provider is the first lever, and probably the simplest one, because it requires no changes to your website: you switch providers, and all the energy consumed by your server shifts from one source to another.
The most important criterion is the energy source powering the data center. A host running on renewable energy (hydro, solar, wind) reduces your site’s carbon footprint substantially compared to one running on coal or gas. In Switzerland, Infomaniak is the most straightforward choice: the company is based in Geneva, its data centers run on renewable energy, and it compensates 200% of its remaining carbon emissions. In France, o2switch operates its own data center in Clermont-Ferrand with low-consumption equipment. Other European hosts with verifiable commitments include Scaleway (Paris) and PlanetHoster (servers in France and Canada).
Check two things before choosing: ISO 14001 (environmental management) and ISO 50001 (energy management) certifications, which confirm a commitment audited by an independent third party, and the geographic location of the data center relative to your audience, because a server closer to your visitors means shorter distances for data to travel across the network and therefore less energy consumed per request. A site hosted in Zurich serving visitors in Switzerland and France will perform better than one hosted in Virginia, both in latency and in energy efficiency, because the data crosses fewer network hops along the way.
The cost of sustainable hosting isn’t higher than conventional hosting. Infomaniak’s plans start around CHF 7 per month for shared hosting, and o2switch offers a flat rate around EUR 6 per month. You don’t pay more for a responsible host, you simply pay a host that has made different infrastructure choices.
How to reduce image and font weight?
Images account for 40 to 60% of a typical web page’s total weight on average, making them the single biggest target if you want to reduce your site’s footprint without changing the design or the content.
The image format makes a considerable difference. AVIF, supported by all modern browsers since 2023, produces files 30 to 50% lighter than JPEG at the same visual quality. WebP, slightly less efficient but compatible with more legacy browsers, offers a 25 to 35% reduction compared to JPEG. If your site still uses PNG for photographs (which happens more often than you’d think), the difference compared to AVIF can reach 80%. A thorough website audit will quickly reveal which images weigh the most.
Sizing is the other lever. An image displayed at 400 pixels wide on a phone doesn’t need to be sent at 2,000 pixels: serving sizes adapted to each screen (known as responsive images using the srcset attribute in HTML) cuts the data transferred with zero visual impact. And lazy loading prevents images below the fold from downloading until the visitor scrolls down to them.
Fonts often fly under the radar, but they add up. Each complete font file weighs between 50 and 250 kilobytes, and a site using four different fonts (one for headings, one for body text, one for pull quotes, one for buttons) easily loads 500 kilobytes of fonts before displaying a single word. Two measures cut this weight significantly: limiting your typefaces to two at most (one for headings, one for body text), and applying subsetting, a technique that strips out the characters your site doesn’t use (Cyrillic, Greek, Arabic glyphs and variant forms) while keeping only the Latin alphabet, numbers and accented characters you actually need. Subsetting alone can cut a font file to a quarter of its original size.
Should you remove animations and videos?
Not by default, and this question deserves a candid answer because some eco-design guides give the impression that any visual element beyond plain text is wasteful. That’s not accurate, and a visually barren site isn’t virtuous if nobody wants to look at it. The whole point of a website is to communicate something to someone, and if stripping every visual element makes the site less effective at that job, you’ve traded environmental savings for a worse business outcome, which helps nobody in the long run.
The right question isn’t “should I remove this animation?” but “does this animation help the visitor understand something, find their way around the page, or interact with an element?” A transition animation that guides attention from one block to another has a function. A carousel cycling through six testimonials that nobody clicks serves none. A thirty-second product demo video that the visitor starts voluntarily has real value. A background video that auto-plays for decoration burns megabytes of bandwidth without delivering information.
In practice, three principles keep a site lively without unnecessary bloat. First: never auto-play a video or a heavy animation, let the visitor decide when to start it. Second: prefer CSS animations (which use the device’s GPU and consume very little energy) over complex JavaScript animations that execute code on every frame. Third: respect the prefers-reduced-motion user preference, an operating system setting that allows people sensitive to motion (and anyone wanting to save battery) to disable animations, and that your site should listen for and respond to by cutting non-essential visual effects automatically.
How to reduce code weight?
JavaScript has become the primary source of bloat on the modern web. The browser must download the code, parse it, compile it and execute it, and each of these steps consumes energy on the visitor’s device, especially on phones where the processor is less powerful and battery life is limited.
The first reflex is to examine what your site actually loads. The “Network” tab in your browser’s developer tools (Chrome, Firefox, Safari) lists every file downloaded when a page opens, sorted by size. You’ll often find third-party scripts weighing hundreds of kilobytes: live chat widgets that nobody uses, ad tracking pixels accumulated across campaigns, font libraries loaded from Google Fonts when you could host them locally, social sharing plugins loading on every page when a simple link would do.
Every third-party script you remove also cuts the number of HTTP requests, meaning fewer connections the browser needs to establish with remote servers to render the page. Fewer requests means less energy consumed on the network. And there’s a compounding effect that goes beyond file size: each external script can trigger additional requests of its own (loading its own dependencies, sending tracking data, fetching remote assets), so removing one script can sometimes eliminate five or six network connections that you didn’t even know were happening.
For the code you control (your own site), three techniques cut weight significantly. Code splitting breaks JavaScript into smaller chunks and loads only what the current page needs, instead of sending the entire site’s code to every visitor. Tree shaking identifies functions imported but never called from libraries and eliminates them from the final bundle. And minification compresses files by removing whitespace, comments and unnecessarily long variable names, shaving off an additional 20 to 40%.
If your showcase site is built with a heavy JavaScript framework (React, Angular, Vue) but doesn’t need any complex interactivity, the leanest redesign sometimes means switching to static HTML generated at build time with no client-side JavaScript at all, producing pages that often weigh less than 50 kilobytes and load in under a second.
How to measure your website’s footprint?
You can’t improve what you don’t measure, and fortunately several free tools let you assess a website’s environmental footprint in seconds.
Website Carbon Calculator (websitecarbon.com) is the best known. You enter your site’s URL, and the tool estimates the grams of CO2 emitted per page view based on the page weight, number of requests and hosting type. It uses version 4 of the Sustainable Web Design model for its calculation. A good score sits below 0.20 grams per page view, and the global average is around 0.36 grams.
EcoIndex (ecoindex.fr), developed by the GreenIT.fr collective, goes further by assigning a grade from A to G (like the energy label on a refrigerator) based on three indicators: page weight, number of DOM elements (the HTML structure), and number of HTTP requests. Its approach complements Website Carbon because it accounts for code complexity, not just the volume of data transferred.
Lighthouse, Google’s tool built into Chrome (accessible through developer tools), doesn’t measure CO2 directly, but its performance score is a reliable proxy for energy consumption: a site scoring 95 or above out of 100 on performance structurally consumes less than one scoring 40, because the metrics it measures (load time, resource size, JavaScript blocking time) directly correlate with the energy spent rendering the page.
In France, the RGESN (Référentiel Général d’Écoconception de Services Numériques), published in version 2 in May 2024 by DINUM and ADEME, provides a structured framework of 79 criteria across nine categories: strategy, specifications, architecture, UX/UI, content, frontend, backend, hosting and algorithms. The framework is voluntary for now, but the 2021 REEN law already mandates eco-design obligations for public digital services, and the RGESN underpins public procurement requirements and several private labels. For a small or mid-sized business, it’s an excellent self-assessment tool even without pursuing formal certification. You can download the full checklist as a spreadsheet from the DINUM website and work through the criteria relevant to your site at your own pace, treating it as a prioritized improvement roadmap rather than an all-or-nothing compliance exercise.
Where to start this week?
If you could only take five actions to reduce your site’s footprint in the short term, these offer the best ratio between effort and impact, in order of priority.
The first step is to test your site with Website Carbon Calculator and EcoIndex to establish your baseline, because without a diagnosis you don’t know where to focus. The second is to convert your images to AVIF (or WebP if you need to support very old browsers) and enable lazy loading on every image that isn’t visible immediately when the page opens. The third is to inventory the third-party scripts loaded on your site (analytics, chat, social widgets, ad pixels) and remove the ones you’re no longer actively using. The fourth is to check whether your hosting provider uses renewable energy, or to start considering a migration to a more responsible provider like Infomaniak or o2switch. And the fifth is to limit your typefaces to two families at most, applying subsetting to load only the characters your site actually needs.
These five actions, applied to a typical showcase site, can reduce page weight by 40 to 60% and cut the estimated carbon footprint in half, with no visible change to the design for your visitors. It’s a starting point, and if you want to go further with a full technical audit or a performance-focused redesign, each additional step amplifies the gains.
Sustainable web design isn’t a constraint imposed by guilt: it’s a set of practices that make your site faster, better ranked, cheaper to host and more pleasant to use, while also reducing its environmental footprint. The best time to start was yesterday, the second best time is now.
