How New Technologies Make Your Website More Environmentally-Friendly Than Ever

The average webpage sends about 0.36 grams of CO₂ into the atmosphere every time someone loads it. That number looks small until you multiply it by the billions of page views happening across the internet on any given day. Information and communication technologies account for roughly 4% of global greenhouse gas emissions, a figure comparable to the airline industry. The connection between your website and the physical environment is real, and it runs through cables, servers, cooling systems, and the electricity grids powering all of it. What has changed in recent years is that the tools available to reduce that footprint have become more effective, more accessible, and in some cases, required by law. This article walks through the specific technologies and practices that are pulling website emissions down and explains how they work at a technical level.

Smaller Files, Less Energy Burned

Every kilobyte your site sends to a visitor’s browser requires energy to transmit, process, and render. Images tend to be the largest files on most web pages, so any reduction in image file size has an outsized effect on the total energy cost of a page load.

WebP, a compression format developed by Google, produces image files that are 25% to 34% smaller than equivalent JPEGs with no visible loss in quality, according to developers.google.com/speed/webp/docs/webp_study. A site running 50 images per page that switches from JPEG to WebP can cut its image-related data transfer by roughly a third. That savings compounds across every visitor and every page load.

Lazy loading adds another layer of efficiency. Instead of downloading every image and video the moment a visitor opens a page, lazy loading delays the request until the content scrolls into view. A visitor who reads the top half of an article and leaves never triggers downloads for the bottom half. The browser does less work, the server handles fewer requests, and the network carries less data.

Stripping unused CSS and JavaScript has a similar effect. Many sites load entire libraries when they use a fraction of the code within them. Build tools like PurgeCSS remove the unused portions before deployment. The result is a lighter page that loads faster and requires less energy at every step between the server and the screen.

Where Your Site Actually Lives Matters

A webpage averaging 0.36 grams of CO₂ per view, according to websitecarbon.com, adds up fast at scale. Trimming file sizes with WebP compression or enabling dark mode on OLED screens addresses part of that output, but the server running your site carries its own energy cost. Google reports a 2024 fleet average PUE of 1.09, well below the industry average of 1.56, which shows how much facility design affects consumption. Choosing environmentally friendly web hosting, pairing it with lazy loading, and stripping unused scripts compounds the reduction at every layer of the stack.

The EU’s Energy Efficiency Directive now requires data centres above 500 kW of installed IT power demand to report on energy consumption and renewable energy use, per energy.ec.europa.eu. That kind of regulatory pressure pushes providers toward measurable improvements rather than vague green claims.

What Dark Mode Actually Does to Power Consumption

Dark mode has become a standard feature on most operating systems and browsers. The environmental argument for it is straightforward, but it depends on the type of screen.

On OLED displays, each pixel produces its own light. A black pixel is an off pixel. Researchers at Purdue University found that dark mode can reduce display power consumption by up to 60% on OLED screens, as reported by purdue.edu/newsroom. Since mobile devices increasingly use OLED panels, and since mobile traffic accounts for a large share of web usage globally, offering a dark mode option on your site has a measurable effect on the energy your visitors’ devices consume.

On LCD screens, the backlight stays on regardless of what colors are displayed, so the savings are minimal. The distinction matters because it affects how you frame dark mode in your own sustainability efforts. It works, but it works best for a specific subset of devices.

Implementing dark mode through CSS media queries is straightforward from a development perspective. The prefers-color-scheme media feature detects the user’s system setting and applies a dark stylesheet automatically. No additional JavaScript is needed for the basic version.

Caching and Content Delivery Networks

When a returning visitor loads your site, their browser can pull assets from a local cache instead of requesting them from the server again. Proper cache headers mean that static files like logos, fonts, and stylesheets are downloaded once and reused across multiple visits. The server does less work, and the network carries less data on each subsequent visit.

Content delivery networks distribute copies of your site’s files across servers in multiple geographic locations. A visitor in Berlin gets served from a nearby node rather than making a round trip to a server in North America. Shorter physical distance between server and user means fewer network hops, less energy consumed in transit, and faster load times. The performance benefit and the environmental benefit are connected here because both improve when data travels shorter distances.

Sustainable Fonts and Fewer Third-Party Requests

Custom fonts are often loaded from external servers. Each font weight and style requires a separate file download. A site using 4 weights of a single font family across regular and italic variants loads 8 font files. Subsetting fonts to include only the characters your site actually uses reduces those file sizes. Hosting the font files on your own server, instead of calling an external service, eliminates a DNS lookup and a separate connection.

Third-party scripts for analytics, advertising, chat widgets, and social media embeds each add their own HTTP requests, JavaScript execution, and data transfer. Auditing which of these scripts your site genuinely needs and removing the rest produces measurable reductions in page weight. A site that drops 3 unused tracking scripts might eliminate hundreds of kilobytes of JavaScript and several external server connections per page load.

Measuring What You Have Right Now

Tools like the Website Carbon Calculator at websitecarbon.com let you enter a URL and receive an estimate of the CO₂ produced per page view. The number gives you a starting point. Running the test before and after implementing changes like WebP conversion, lazy loading, or font subsetting shows you the actual reduction in concrete terms.

Google’s Lighthouse tool, built into Chrome’s developer tools, scores your site on performance metrics that correlate directly with energy use. A higher performance score generally means fewer bytes transferred, less rendering work for the browser, and lower energy consumption on the user’s device.

These measurements are not abstract. They correspond to real electricity drawn from real grids. The technologies described in this article are worth implementing because they reduce that draw at every point in the chain, from the server rack to the screen in someone’s hand.