Introduction to Sustainable Web

Introductory guide designed for decision makers regarding the purchase of web development and design services, whether they are industrial companies, self-employed entrepreneurs, non-profit organizations, or outsourced companies (agencies). The guide is intended both to be an introduction to the concepts of the Sustainable Web and to see what the Sustainable Web is in practice. Prepare a coffee/tea/mate and learn about a topic that will benefit your organization. Estimated reading of 10 minutes.

• Introduction
• Definition
• Analogy
• History and Governance
• Why Sustainable Web?
• Benefits of the Sustainable Web
  • Business Benefits
  • Benefit for sustainability manager
• Calculators and methodologies
  • SWDM Scope and Limits
  • Key Input Data
  • Why use data transfer?
  • How does it work?
  • SWDM Strengths
  • Limitations
  • Data Sources Used
  • Model considerations
• Sustainable Web in practice
  • Web Cache
  • Images
  • Initial load
  • Third-party code removal
  • Use of minimalist design
  • Compression and minification
  • Using Green Hosting
  • Other techniques
• Glossary Terms
• Conclusion
• Notes
• References

• 2112
• 2050
• Currently
• Your Web

The scientific community does not consider climate change to be a human extinction event 1, but they consider it will be catastrophic for many people, with an increase in storms, intense heat and cold waves, floods and droughts 2.

Netherlands is one of the countries with the most history and experience in anti-flood engineering 3. So probably not hippos ;)

An average B2B website emits more than 100kg of CO2 per year. Own estimation using websitecarbon calculator 4

Introduction

A website is a point of contact between your brand and your customers, suppliers, and society in general. Although the first impression of the Internet is that it is “clean”, since it has no visible pollution, the Internet does generate pollution. Such pollution causes a negative impact on the environment, economy and society. How to mitigate this impact, why to mitigate it and what is gained by mitigating it are the main questions that Web Sustainability addresses.

Definition

Sustainable Web is what we do to reduce the impact on the planet’s resources when we create, maintain, and use the web.

Analogy

Sustainable Web is like buying an LED light bulb, it is much more efficient than traditional ones, it can be easily bought (sustainable web agencies), it has a reasonable price and pollutes less.

History and Governance

Just as in 1999 the Web Content Accessibility Guidelines WCAG22 group defined accessibility guidelines for developers, in 2013 a group of sustainability enthusiasts called the Sustainable Web Design CG 5 created the technical guide to best practices in sustainable web.

From 2024 onwards, the Sustainable Web Interest Group, part of the W3C consortium, takes the reins of maintaining that guide 6

Why Sustainable Web?

For two simple reasons:

1. The web is useful
2. The web generates pollution, which is not negligible

The Internet is part of our lives at all social levels, including the production and marketing of goods, use of financial services, medical services, defense, transportation, construction, energy, food, entertainment, and communication, among others.

The Internet is responsible for 4% of total carbon emissions, equivalent to the entire aviation industry 7. The web in particular, one of the largest applications on the internet (other applications include email, instant messaging, FTP, among others) is used day by day by billions of people and its projections are to increase both its volume of use and its reach. It is estimated that an average website produces more than 100KG of CO2 per year! where emissions mainly come from 3 sources 8:

• Hardware production, which contributes 22% of the web’s emissions
• Datacentres and information transfer, which contributes 24% of the web’s emissions
• Use of devices (pc, cell phones, etc.), which contribute 54% of web emissions

Benefits of the Sustainable Web

Sustainable Web uses the minimum resources necessary to meet your business objectives.

• At the private level: It has commercial advantages with excellent return per dollar invested.
• On a social level: It reduces CO2 emissions, with the benefits that this implies in the context of climate change.
• Economically: It creates new business opportunities and increases economic efficiency.

Business Benefits

Sustainable Website improves your website’s/ecommerce/system’s SEO, speed, accessibility, usability, and environmental reputation.

• A fast website means a higher probability of conversion and a lower probability of abandonment- Better SEO increases volume and improves the likelihood of conversion
• An accessible website increases the diversity of users and use cases along with improving SEO, which increases reach and likelihood of conversion
• An efficient website generates lower maintenance costs
• Depending on the industry, NOT being sustainable is LOSING sales
• Better usability translates into higher conversion
• Better user experience means better branding
• Better reputation. Given the equality of the attributes of a brand, very few people will prefer a company that pollutes more.

Benefit for sustainability manager

Industrial sustainability is VERY hard. It requires improving processes, being more efficient and innovating. Difficulty in aligning internal objectives of the organization, incentives for “greenwashing” ¹, lack of human capital experienced in new technologies and high investment costs, among others.

However, a sustainable website is not. Sustainable website is reasonable in prices, in difficulty, easy to outsource to competent companies (such as Injeniero 🌿) and improves many commercial attributes of a website (SEO, speed, accessibility, environmental reputation).

A sustainable website is an easy win for a sustainability manager. One less checklist in a difficult and increasingly important business department.

Calculators and methodologies

It is possible to estimate the CO2 emissions produced by a website. It is important to note that:

1. Websites do produce CO2 emissions.
2. They are estimates and depend on the methodology used.

In particular, at Injeniero we use the websitecarbon.com calculator. We could create our own calculator, or we could create a project with an university or research center, however, our assessment is that the precise number is kind of irrelevant. Categories of A and A+ are enough as an attribute to achieve on a website, because most companies do not achieve this category, producing an improvement in web sustainability.

In addition, because they are older and more widely used calculators, it is a good point of comparison (comparing apples with apples) to compare with other websites. However, we emphasize that the number itself is speculative and sensitive. In particular, the websitecarbon.com methodology is based on the Sustainable Web Design methodology 8 that uses the Sustainable Web Design (SWDM) model.

SWDM is an open-source framework (currently in Version 4) for estimating greenhouse gas emissions from digital services: websites, apps, streaming, APIs, etc. It was developed by several organizations in the sustainable technology field. It’s modular, transparent, and allows you to integrate your own data for accuracy.

SWDM Scope and Limits

The model covers three main areas:

• Data centers (22% of energy consumption)
• Network infrastructure (24%)
• User devices (54%)

Includes:

• Operational emissions (energy used in operation)
• Embodied emissions (by hardware manufacturing)

Key Input Data

• Data Transfer (GB): Main unit for estimating energy consumption.
• Grid carbon intensity (gCO₂e/kWh): The global default is 494 gCO₂e/kWh, but can be customized by country or region.

Why use data transfer?

• It is measurable and traceable.
• Reflects the impact of poorly optimized design (heavy pages).
• It is consistent with previous studies.

How does it work?

1. Energy consumption per GB:

• Data centers: 0.055 kWh/GB
• Network: 0.059 kWh/GB
• Devices: 0.080 kWh/GB

Multiplying the above values by carbon intensity yields the operating emissions per GB.

2. Embodied emissions (equipment manufacturing):

• Data centers: 0.012 kWh/GB
• Network: 0.013 kWh/GB
• Devices: 0.081 kWh/GB

Also multiplied by carbon intensity.

3. Complete Formula:

The CO₂ per web visit is calculated considering:

• New vs. returning visitors
• Caching and optimization
• If the hosting is powered by renewable energy

SWDM Strengths

• Standard and comparable
• Useful for quick estimates
• Distinguishes between operational and embedded emissions
• It is modular and customizable, being able to include its own data

Limitations

• Tends to overestimate slightly in order to be conservative
• Doesn’t detect fine technical details (such as CPU usage)
• Based on global averages, not user or device-specific data

Data Sources Used

• Energy consumption: IEA 2022, Malmodin 2023
• Total Data Transfer: ITU 2023
• Carbon Intensity: Ember 2022
• Built-in emissions: Malmodin 2023

Model considerations

The SWDM v4 is a robust and adaptable tool for estimating the digital carbon footprint. It uses energy consumption and transfer data to obtain results that, while conservative, are consistent and useful in guiding more sustainable design decisions.

Beyond CO2 results in calculators websites, our practical recommendation is to try to achieve a webpage with an initial load between 300 kb and 500 kb

Sustainable Web in practice

Web Cache

Web pages work with the client-server model, where the client is a computer with a browser that visits an address (example mycompany.com) and the server is the computer that delivers the files that make up a page (HTML, JS, CSS, images, etc.). Each visit involves “a journey”, called a request, from the client’s device to the server, producing CO2 emissions, in the use of both devices (client and server) along with the transfer of information and the processing of information.

The fewer “requests” the fewer emissions. One of the most efficient ways to avoid requests that aren’t really needed is to use caching. The caching logic is very simple, if the requested file has been saved, then don’t go to the server and use the saved page on the client instead.

Cache policy must be carefully defined as it can harm a site if poorly implemented. For example, updates to new content may not appear until the cache is cleared. An incorrect cache policy can cause a large marketing effort to go to waste. On the other hand, an appropriate policy can greatly accelerate the load of the site in repeated visits along with contributing to lower CO2 emissions.

Perhaps one of the most effective ways is “cache busting”. Cache busting is based on changing the name of the file or adding a query to the url of the file in such a way that the browser considers it a new file and therefore necessarily loads it. For example, if the image <img src="/images/pic.avif"> exists and the file ‘pic.avif’ is modified, cache busting adds –via a “building” process– a unique hash to the name, for example <img src="/images/pic-224-434-3434.avif"> causing the url of the file to change. This is also possible to achieve via a query, such as <img src="/images/pic.avif?3525-55345"> In both cases the browser requests the file again, discarding the cache copy for the new one. Since it is a unique url, it is then possible to apply static cache rules with a long duration because it is guaranteed that if you change/edit the photo, the url will be different.

Images

Images are undoubtedly the main course in web optimization, since most of the kilobytes of a site come from images. In practice, it is based on using efficient formats such as .avif, .webp and.svg and including responsive html attributes such as ‘srcset’, ‘sizes’, ‘fetchpriority’, ‘loading=”lazy”’

Such is its importance that we wrote a dedicated post responsive images in markdown to create responsive and sustainable images using Markdown

Initial load

The initial load is critical on every website due to users’ low tolerance for waiting.

It is possible to save unnecessary kilobytes using “lazy” techniques of loading content as you scroll or browse. One of the recommendations is to avoid forcing the user to consume content. A typical example is videos and audios with autoplay. Instead, load the video only if there is an intention to use it (using hover effect for example) and let the user decide whether or not to consume said content by showing a representative image of the video.

It should be noted that there are exceptions where the autoplay pattern makes sense, such as landingpages in the context of a marketing campaign. However, on the corporate website and pages with frequent visits it loses its meaning.

Optimizing the initial load not only contributes to a sustainable website but is vital from a website’s commercial point of view, directly affecting SEO, conversions and user experience (branding)

Third-party code removal

Third-party scripts, such as analytics and AI scripts, tend to be cumbersome and often downright unnecessary contributing to slow sites via slower initial loading along with increased processing and CPU usage.

One of the recommendations is to stop using Google Analytics. There are many unnecessary kb (more than 100) that harm your site in performance, SEO and conversion. In turn, it is not GDPR compliant and (most likely) profits from data. There are opensource tools to obtain relevant metrics of the use of your site or you can implement your own scripts and APIs.

It is part of our service to deliver efficient and sustainable analytics service

Use of minimalist design

Adopting a minimalist design reduces clutter and highlights essential elements, resulting in faster load times and lower server demands. A clean and simple design requires fewer resources to display, making your site more energy-efficient overall. Minimalism is about improving functionality by focusing on content and navigation. A well-crafted minimalist site is visually appealing, easy to use, and effectively conveys your message without unnecessary distractions.

Compression and minification

Using ‘gzip’ and other compression formats for text reduces the size of the files to be transferred. In turn, the process of minification, i.e. removing comments and white space from text files, also contributes to reducing the size. Both techniques are recommended to achieve sustainable web.

Using Green Hosting

Ideally, you should look for eco-friendly web hosting services that have carbon offset programs applied to renewable energy and efficient energy use. Traditional web hosting often relies on non-renewable energy, which increases carbon emissions. In contrast, eco-friendly hosting uses renewable energy, which minimizes environmental impact and allows your website to contribute positively rather than make the problem worse.

At Injeniero we use hosting with 100% renewable energy use

Other techniques

There are several other techniques such as:

• Use of CDNs, achieving shorter data trips from source (client) to destination (server)
• Use of image CDNs
• Mobile-first approach that tends to produce smaller file sizes
• Use of dark-mode, with battery saving on devices with OLED screens
• Server side rendering, reducing power consumption and processing of the client device

Glossary Terms

• Internet: It is the network of networks. Data centers, hardware and software. Underground cable networks, cell phone antennas, satellites. One of its main applications is the Web. Its protocol is IP, which identifies each node in the network. Example 192.168.0.1 of a home router, and uses a DNS system that translates IP numbers into names in natural language.

• Web: Collection of information accessible from the internet. Use HTTP/HTTPS protocol. There is the “traditional” web that is indexed (i.e. findable via search engines) and the deep web, which is not indexed. Within the deep web is the darkweb (illegal activities).

• Website: Collection of web pages under the same domain.

• Domain: Assign ownership and other information to an IP address using the DNS (Name Domain System) system. Example: 195.200.68.224 –> en.wikipedia.org.

• Webpage: HTML document, with hyperlinks to other websites. An HTML document includes text, images, videos, audio, style sheets (css), and code (javascript).

• Ecommerce: Website where it is possible to buy and/or sell goods or services.

• Conversion: Indicates a business goal achieved by a website user such as a sale, contact, share, etc.

• Web accessibility: It allows users with disabilities to navigate with as little difficulty as possible.

• Web usability: It’s quick and easy to use a website.

• Sustainability: How to co-exist with our planet Earth for a long period of time. This includes the extraction, use, and recycling of resources necessary for our survival.

• Web Sustainability: what we do to reduce the impact on the planet’s resources when we create, maintain and use the web.

• Digital Sustainability: Accessibility to the greatest quantity and reusability with the minimum of technical, legal and social restrictions of digital resources – knowledge and cultural artifacts in text, audio, image, video and software formats.

Conclusion

Sustainable web is within reach in both budget and availability for managers and entrepreneurs who need to create a system or website. Not only does it contribute to lower carbon emissions but it ensures a number of desirable commercial properties, justifying the investment.

Notes

1. Greenwashing is a deceptive form of marketing that makes the public believe that an organization’s products and services are sustainable. A classic example is placing a certain type of logo that gives the impression that it is sustainable when is really not. ↩

References

1. ^ Intergovernmental Panel on Climate Change, “Climate Change 2023: Synthesis Report,” 3.1.2 Impacts and Related Risks. Contribution of Working Groups I, II and III to the Sixth Assessment Report of the Intergovernmental Panel on Climate Change, H. Lee and J. Romero eds. 2023. doi:10.59327/IPCC/AR6-9789291691647.
2. ^ USGS.gov How can climate change affect natural disasters
3. ^ Wikipedia Flood control in the Netherlands
4. ^ Websitecarbon websitecarbon.com
5. ^ W3C.org SUSTAINABLE WEB DESIGN COMMUNITY GROUP
6. ^ W3C.org Sustainable Web Interest Group
7. ^ Mozilla Foundation Introduction to web sustainability
8. ^ Sustainable Web Design Calculating digital emissions