Sustainable Web Design 2026:
How to Build a Climate-Friendly Website

The internet has a carbon problem

While you read this article, your device, the server delivering the page and the network infrastructure in between all draw electricity. Most of that electricity still comes from fossil fuels.

Estimates of the internet's share of global emissions vary with what they count (data centers, networks, end devices). The total keeps rising as users, devices and data traffic grow.

Each step that makes your website lighter pays off twice: you cut CO2 and improve the user experience at the same time. Pages load faster, mobile visitors use less data and your Core Web Vitals get better. Sustainability and performance pull in the same direction.

What is sustainable web design?

Sustainable web design (or green web design) means planning, designing, and operating websites so they consume as little energy as possible. It covers four layers:

The aim is efficiency. A sustainable website does not have to look bare-bones; it uses resources with more care. That saves money, helps your rankings and gives visitors a better experience.

The EU's CSRD (Corporate Sustainability Reporting Directive) obliges large companies to report on their environmental footprint. Under the Omnibus I amendments (Directive (EU) 2026/470), it covers companies with more than 1,000 employees and more than EUR 450 million in net turnover. Most small and mid-sized businesses fall outside that scope, but large clients that do report may still ask their suppliers for footprint data.

Green hosting: the biggest lever

Your hosting provider has the largest effect on your website's carbon footprint. Moving to a data center that runs on renewable energy cuts server-side emissions more than any other single step. Compared with that, the other measures are fine-tuning.

The major cloud providers buy renewable energy at scale and publish yearly sustainability reports, so check the current figures for your provider. Platforms such as Vercel and Netlify build on these big clouds, while Cloudflare runs its own global network. A modern hosting platform already solves part of the problem.

Image optimization: the quickest win

Images account for more bytes than any other resource type. The HTTP Archive Web Almanac 2025 counts 911 KB of images on the median mobile home page, out of about 2.6 MB in total. You get the fastest and largest savings here, often without any visible loss in quality.

Practical steps

• Use responsive images: srcset and sizes serve the right resolution for each screen size, and a phone does not need a 2400px-wide image.
• Lazy-load images below the fold so they only load when the user scrolls to them. Browsers support this natively with loading="lazy".
• Crop images to the size they are displayed at. A 400px card slot does not need a 4000x3000 photo.
• Compress your images. WebP at quality 75-80 looks identical to the eye at a fraction of the file size.
• Question decorative images. If a stock photo adds little, a CSS gradient or a simple illustration may work better.

Smaller images also load sooner, which helps your LCP score: on many pages the largest element is a hero image.

Clean code: less JavaScript, less energy

Each kilobyte of JavaScript the browser has to download, parse and execute costs energy on the server, across the network and on the end device. On an older smartphone, 200 KB of JavaScript runs smoothly, while 2 MB can make the page unusable.

Framework choice and sustainability

Your framework choice sets the baseline. A website built with Astro ships 0 KB of JavaScript by default, unless you add interactive islands. A comparable Next.js project ships the React runtime to every page. For a business website with mostly static content, that is unnecessary base load.

React and Next.js remain the right tool for web applications with heavy interactivity. A company website, a blog or a landing page usually does better with less, and your website speed benefits just as much.

Intentional design: less data, same visual quality

Sustainable design does not have to be boring. You make deliberate choices that save resources without giving up visual quality. Some of the most effective measures cost nothing and look better as well.

Dark mode

On OLED displays (now standard on smartphones and spreading to laptops), dark pixels consume less power than bright ones. On an OLED panel a black pixel is switched off and draws almost no power, so a dark design uses less display energy than a white background, especially at high brightness.

System fonts

Each embedded web font typically costs 20-100 KB. With three weights (Regular, Bold, Italic), that is 60-300 KB before a single word is visible. System fonts like the native system-ui family are already on the device and add zero bytes. If you need a specific typeface, use a variable font: it loads a single file instead of one file per weight.

Animations and motion

CSS animations use less processing power (and therefore less energy) than JavaScript animations. GPU-accelerated properties like transform and opacity are more efficient than layout-based properties like width or top. Also respect prefers-reduced-motion: users who turn animations down spare their eyes and their battery.

Measuring CO2 with free tools

Before you optimize, you need a baseline. Several free tools estimate your website's carbon footprint.

The business case: why sustainability pays off

Sustainable web design is also sound economics. Measures that reduce data volume and server load bring direct financial benefits:

Less data and better caching also cut bandwidth and hosting costs. Google counts Core Web Vitals among its page experience signals, though it treats page experience as one signal among many.

CSRD and reporting obligations

Under Omnibus I, the CSRD applies only to companies with more than 1,000 employees and more than EUR 450 million in net turnover. For them, electricity used by their own servers falls under Scope 2 and purchased hosting and digital services under Scope 3. If you supply such a company, it may ask you for data on your digital footprint, and a measured, optimized website gives you an answer.

Sustainability can also help your marketing. A website that is measurably lighter and runs on green hosting gives you a concrete claim: show your CO2 result in the footer and mention your green hosting on the about page.

How do I make my website sustainable? The checklist

Frequently asked questions

Further reading