What is a Sustainable Website and How to Make One

Today we cannot imagine our world without the internet and that’s why we must think about sustainable website. Apart from food, water, and air, the Internet is a necessity for most people as well because it provides us with the resources to do almost anything right from where we are. We can order food, apparel, and home appliances from our device with just a few clicks and taps. Business use internet today to reach to their target audience. We socialize digitally, but the main power of the internet is the opportunity to explore the vast ocean of knowledge online, and there is no age restriction to access it. Even a 10-year-old uses the internet to watch his favourite cartoons or study.

But there is a downside too. In our quest for knowledge, we turn a blind eye to those things. Every website we use leaves digital carbon footprints. Today these websites are proving a hazard to our environment. 

And thus, with global warming and other environmental concerns in mind, I’ll be discussing what is a sustainable website in this article and how we can build one. What role can they play in helping us maintain a cleaner, greener planet?

Over 63% of the world’s population, or about 5 billion people, are online these days. Information is sent and received between their device and a central server when a user accesses the internet. When a user requests, the data they need is retrieved from one of many large data centres located worldwide. These data centres rely on massive supercomputers to function. Super Computers are on the go nonstop, which causes them to overheat. These supercomputers are kept cool by massive cooling systems. However, only a tiny fraction of these cooling systems operates on renewable power sources.

The Rise of Sustainable Web Design

Fortunately, the tide is turning towards eco-conscious practices, and sustainable web design is emerging as a powerful force for good. By prioritizing efficiency and responsible resource management, you can create a website that not only serves your audience but also minimizes its environmental footprint.

The Pillars of a Sustainable Website

• Green Hosting: Choose a web hosting provider powered by renewable energy sources like solar or wind power. Look for certifications like the Green Web Foundation or The Green Grid to ensure transparency in their green practices.
• Content Optimization: Reduce file sizes of images and videos without compromising quality. Use lazy loading to only load content as users scroll. Implement caching mechanisms to minimize server load and page load times.
• Design Choices: Opt for minimalist design principles, avoiding unnecessary animations and plugins. Use efficient coding practices and responsive design to ensure smooth display across devices, reducing the need for multiple versions of your website.
• Green User Experience: Encourage sustainable actions through your website. Feature eco-friendly products and services, share tips on green living, and provide users with the option to unsubscribe from emails or limit data collection.
• Transparency and Measurement: Track your website’s energy consumption and emissions through tools like Website Carbon Calculator. Be transparent with your audience about your sustainability efforts and share your progress publicly.

The Benefits of Going Green

Building a sustainable website isn’t just good for the planet; it also benefits your business and users.

• Reduced Costs: Efficient websites consume less energy, translating to lower hosting bills.
• Improved User Experience: Faster loading times and a cleaner design enhance user engagement and satisfaction.
• Brand Reputation: Demonstrating your commitment to sustainability strengthens your brand image and attracts eco-conscious consumers.
• Future-Proofing: Sustainable practices ensure your website is aligned with evolving environmental regulations and consumer expectations.

Some Notable statistics about Digital Waste

At the present rate of internet usage, 3.7% of the world’s total CO2 emissions (1.6 billion tonnes) come from the network. Twenty milligrams of carbon dioxide is released into the atmosphere every second by a single website page. Emissions of carbon dioxide per person per year are approximately 400 g. The internet would be the world’s sixth-largest polluter if it were a country. The damage it does to Earth is therefore apparent.

If we calculate by how many trees would be required to nullify the effect of each type of digital activity, then it can be said that:

• To counteract the environmental damage done by spam emails, 1.6 billion trees would need to be planted.
• To handle annual e-commerce returns in the US alone, 1.5 billion trees would need to be planted.
• To mitigate the environmental damage caused by the data utilized by Americans in 2019, 231 million trees would need to be planted.
• An estimated 1.9 trillion searches occur on Google annually, resulting in pollution levels equivalent to planting 16 million trees.

According to some research, we waste about 90% of data.

90% of data we create and store, and we never use it. We can think of data as the building blocks of digital systems. Words, music, images, motion pictures, and digital media are the all different forms of data. Most data are equivalent to disposable plastic: it’s used once and then thrown away or, rightly said, never used again.

• Tech Target reports that almost 90% of data is never retrieved three months after being saved.
• According to a survey published in 2018 by Active Archive Alliance, 80% of all digital data is forgotten or ignored after being stored.
• Search technology expert Lucidworks estimates that around only 10% of the data businesses collect is analyzed.
• According to IDC, 90% of unstructured data is never evaluated.
• IBM has estimated that as much as 90 percent of the data gathered by sensors embedded in IoT devices is never put to good use.

Further, if we consider apps, they also show similar trends.

It’s free, so we test it out, maybe once, and then we never use it again. Mobile intelligence company Quettra conducted research showing that the typical app loses 77% of its users during the first three days after the installation, 90% within the first 30 days, and 95% within the first 90 days. All time, money, and resources are spent on something that no one will use. So, why we still download these Apps. Because they are Free. Therefore, it’s all right. Inexpensive means sacrificing a planet. The ‘free’ business model is particularly harmful since it relies on two environmental hazards—waste and advertising—to function.

Wolfgang Goebl, founder of the Architectural Thinking Association, said, “What I’ve seen in many companies is that they could run the same business with 10% of IT applications and servers.”

What About Web Searches

According to Moz, the first page of Google captures 71% of search traffic clicks and has been reported to be as high as 92% in recent years. Second-page results are far from a close second, coming in at below 6% of all website clicks. On searching for the keyword “Eco-Friendly Websites,” Google shows 22,80,00,000 results; now divide it by ten so Google has created around 22.8 million pages for that keyword, and if we use the above the data by MOZ, then we can see that the first page will get 92% clicks and the rest others will get 8%, so what’s the use.

A 2018 study by Ahrefs found that 91% of all pages they analyzed got zero traffic from Google. Because of low storage and processing costs, the World Wide Web has become full of data that isn’t useful anymore. There are just there because of our negligence and lethargy.

Data production, storage, transmission, and the necessary gadgets for its consumption all leave a trace on the environment. This “junk” takes 200 times as much energy to store in the cloud as it would on a local hard drive.

In just 15 years, the average online page has ballooned from 400KB to 4MB, and much of that is not needed. 90% of the CSS and JavaScript are unnecessary. It’s a waste, literally.

When we store images on the cloud, the original files remain along with the edited ones when we make some edits to them. So, we might not be aware of hundreds of copies of the same image.

Some More Stats That Prove why Sustainable Website is the need of hour

• The internet produces almost as much pollution as the airline industry.
• There are over 1 billion websites, and they are all hosted on servers. Fossil fuels power servers and they consume tons of energy.
• In 2019 alone, the production of e-waste exceeded 50 million tons, and it is projected to increase by 8% annually.
• In the US, data centres are responsible for 2% of the country’s electricity use, while globally, they account for just under 200 terawatt Hours (TWh).
• The footprint of an email also varies dramatically, from 0.3g CO2e for a spam email to 4g (0.14oz) CO2e for a regular email and 50g (1.7oz) CO2e for one with a photo or hefty attachment, according to Mike Berners-Lee, a fellow at Lancaster University who researches carbon footprints. These figures, however, were crunched by Berners-Lee 10 years ago. Charlotte Freitag, a carbon footprint expert at Small World Consulting, the company founded by Berners-Lee, says the impact of emailing may have gone up.
• If every adult in the UK sent one less “thank you” email, it could save 16,433 tonnes of carbon a year – the equivalent of taking 3,334 diesel cars off the road, according to an energy company, OVO.
• One study from 2012 estimated that a five-hour meeting held over a video conferencing call between participants in different countries would produce between 4kg (8.8 lbs) CO2e and 215kg (474 lbs) CO2e.
• Watching online videos accounts for the most significant chunk of the world’s internet traffic – 60% – and generates 300m tonnes of carbon dioxide a year, roughly 1% of global emissions, according to the French think tank, The Shift Project.
• Netflix says its global energy consumption reached 451,000-megawatt hours per year, enough to power 37,000 homes.

So, What to Do?

It is evident from the above facts that everything we use and create digitally comes at a cost. They are damaging the environment. So, what should we do? Should we refrain from using the internet, or is there any middle ground?

Well, that’s what this article is going to be about. To be honest, this is a vast topic, and we can’t fit all of it in just one article, so to keep the topic short and succinct, we will discuss only making websites that provide less harm to the environment. We will be talking about Sustainable Websites or Green Websites. I will make every point clear about how we can develop these websites.

What is a Sustainable Website?

Sustainable Websites are eco-friendly websites in layman’s language. Web developers create sustaianble websites keeping the adverse effect of web development on the environment in mind. Sustainable websites consume significantly less energy compared to traditional websites. They also don’t require additional web development knowledge or any other programming knowledge; they are built using the same technology, and only optimizations and tweaks are done. Hence, they are also called Green Websites or Eco-Friendly Websites.

I will share all the information I have that will help you develop a Sustainable website.

Let’s Begin

How To A Build Sustainable Website or Eco-Friendly Website.

Web developers are front-of-line workers for web sustainability, and it won’t be wrong to say that we are the gods of websites. We build them, and we have limitless power which we can use to make this world greener to live in. We know how to code effectively and efficiently, and we know how to optimize websites for better performance. To put it simply, a high-performing website efficiently uses its available resources. Therefore, it causes minimal climate change and contributes to a healthier, more environmentally friendly world.

1. Reduce JavaScript execution time

Generally, when we talk about reducing JavaScript execution time, we mean cutting down on time required to parse, compile, and run JavaScript code. When a browser executes JavaScript, the browser is blocked from performing other tasks. This could delay page rendering and impact page interactivity depending on the order in which the scripts are executed. Cascaded requests may be less effective if the time it takes to execute JavaScript decreases.

The execution time of JavaScript significantly affects site performance, and decreasing it can solve other JavaScript or main-thread-related problems. This can help in creating a sustainable website.

Ways to Reduce JavaScript Execution time

• Implementing code-splitting
• Removing unused code
• Caching your code with the PRPL pattern
• Minifying and compressing JavaScript code

Implementing code-splitting

The term “code-splitting” refers to a technique where your JavaScript bundle is broken up into smaller files so that only the critical code (i.e., code necessary for above-the-fold content and user interaction) is run when the page first loads.

Running fewer lines of code at the start of the page load process can decrease the time it takes for First Paint to occur.

Additionally, the main-thread blocking time is decreased, and the total time required to parse and execute JavaScript is sometimes drastically reduced when the code is executed in smaller chunks.

Removing unused code

Occasionally, you will find unused code imported from other modules or carried over from older versions of your site.

It’s also possible that you have sections of code that were once utilized for testing but are now obsolete and can be removed from the live website.

Eliminating unused or unnecessary JavaScript from your page will speed up the main thread and make your website load faster.

Caching your code with the PRPL pattern

The PRPL pattern is an abbreviation for the following four techniques that, when used together, can significantly speed up JavaScript’s execution time:

1. Preloading important JavaScript files
2. Rendering the First Paint as soon as possible
3. Pre-caching assets
4. Lazy-loading JavaScript files

Minifying and compressing JavaScript code

To reduce the size of JavaScript files, one can compress and minify them by removing unnecessary code, comments, and whitespace.

These components slow down the parsing time of your website because the browser doesn’t need them to load. Additionally, they add no value to the page.

2. Optimize CSS and HTML Codes

Minify HTML & CSS codes and remove those that are not needed.

Like JS codes removing and minifying CSS and HTML codes makes sites load faster. While the impact on site load time may not be drastic, but any reduction in loading time is crucial when considering the overall performance of the site.

You May Like : Interesting Blogging Statistics

Use Lightweight CSS libraries alternatives to Bootstrap like pure.CSS

Pure.css, a collection of CSS frameworks, is a lightweight option for smaller applications. It assists developers in making mobile-friendly layouts by providing optimized grids, menus, forms, buttons, and more. Even though it’s pretty tiny, it provides much power and output.

3. Use Web Fonts Strategically

Many websites incorrectly load custom web fonts, despite their widespread usage. This leads to many issues with page loading, including sluggishness, blocked rendering, and font switching when navigating.

Many developers either ignore these problems or continue to make the same mistakes repeatedly because “they have always been doing it that way.” However, as web developers, we need to be able to adjust to these changing conditions.

Some vital points to consider

Use the correct font format

When it comes to web fonts, there are many options, but if you don’t need to support IE 8 or below, WOFF and WOFF2 are all you need. These are the only two file formats you should ever use; both are automatically compressed using the gzip format, making them very compact; both are web-optimized; both are completely supported by Internet Explorer 9 and later and by all other evergreen browsers.

Preload fonts

Using the rel= “preload” as= “font” attributes, you can instruct the browser to preload the fonts you’re using. These attributes will tell the browser to download the required resource as soon as possible. They also tell the browser that this is a font so it can give it the proper priority in its queue of resources. Using the preload hints will significantly affect how well web fonts work and how quickly the first page loads. Browsers that support preload and prefetch hints will download web fonts as soon as they see the hint in the HTML file and no longer need to wait for the CSS.

Instead, you can use the rel= “prefetch” attribute to tell the browser to get ready to download resources that may be needed later during page load or user actions. This way, the browser will give those resources a low priority.

Use the correct font-face declaration.

Declaring a font-face family is very simple. When a browser has to start downloading resources, it will do so in the order in which they were declared. Therefore, the order in which fonts are declared is also crucial. The font will be downloaded in the WOFF2 format if the browser recognizes it; otherwise, it will try the following resource format in the list.

Avoid invisible text during font loading.

Even when compressed with gzip, fonts can be somewhat sizable files. Due to this, some browsers include a temporary text hiding until the font loads (the “flash of invisible text”). By first utilizing a system font and replacing it later, you can prevent the “flash” and present content to users instantly.

Since we currently live in an era where businesses utilize their own custom fonts to develop their corporate identity on the web, it would be impossible to forego the use of Custom fonts entirely. Yet the priority must be placed on reducing usage to as minimum as possible. When not necessary one should aboid using bold or italic fonts. Custom Web fonts also slow down sites.

4. Use images and Video Strategically and Wisely to create a Sustainable Website.

• High-resolution graphics make a website look elegant and draw the user in. However, too big or not optimized images can use much power. The quickest way to fix this is to decrease the image’s file size. Always ask yourself if you’re just trying to make your site look prettier when adding high-definition photographs. We have to use the image we really need, which has to be low resolution and small. Web tools like TinyPng can cut an image’s file size by as much as 70 percent. Use Webp or AVIF image formats and Serve different image sizes for different devices (smaller images on smaller devices) if possible. Read this article to know how to do image optimization in WordPress.
• A video is more of a problem than an image. Despite their apparent appeal, the presence of videos undeniably increases both energy consumption and website load time of a website significantly. We need to be selective about the videos we upload as well because we should also consider the planet’s future. The videos have to be low quality and embedded straight into the post. If you can’t get rid of the video, at least turnoff the autoplay.
• Website Developers are also familiar with Lazy Load. Pictures and other media on the website should utilize this feature. When using Lazy Load, the media format is downloaded only when needed. When a page is opened, all content above the folder will load instantly. If users don’t scroll down, they won’t see the remaining content; this saves energy consumption. This is useful for making an Eco-Friendly Website.

5. Set up Web Caching ( A Simple Trick to Create a Sustainable Website)

Web caching is the practice of saving a local copy of a website on the user’s computer or mobile device for later viewing. When someone first visits a website, website leave a cookie in their browser. If the same user returns to the site, the cached version is displayed rather than the original data. Thus, the site’s performance is enhanced as the loading time of webpages is decreased. It reduces the amount of data transferred, therefore lowering energy consumption.

6. Remove unnecessary and cluttering data.

We need to perform regular site audits to eliminate old or unused content. Things like unused plugins and themes, irrelevant or obsolete blog posts, unused media assets, broken links, spam comments, and so on. This practice, known as “Spring Cleaning,” helps maintain the site’s cleanliness and efficiency. It reduces the site’s energy consumption.

7. Improve the Site Navigation to make a sustainable website

An extensive website that does not have effective navigation can be highly unpleasant for users, and it is also of little value to the bots who crawl the site to index its pages. Sites with poor navigation cause users to click more frequently than necessary to reach the location they desire, increasing the energy consumed. Additionally, bots cannot crawl and index the pages effectively, which further increases the number of wasted resources. Therefore, the website needs to have good navigation. It not only makes it simpler for users to locate the material they are looking for on the site, but it also assists in efficiently applying the crawl budget, contributing to an overall increase in the site’s energy efficiency.

If the website has an excessive number of pages, it is recommended that an HTML sitemap and an internal search function be added. These features make it easier for the user to locate the content he is seeking on the website. An XML sitemap is a must, too, because it gives search engine bots a clear direction to follow to index the pages. Consequently, you will develop a sustainable website.

8. Use Dark Themes rather than Light themes.

Using Dark themes helps save energy but it is also half true. Dark Themes are only beneficial if the user uses an OLED or AMOLED screen. If the user’s device has LCD or any other display then changing themes won’t have any effect. But with the advancement of technology, more devices are coming up with OLED\ AMOLED displays, so it will undoubtedly be an excellent option to use a dark theme. We should do things keeping the future in mind.

9. Use a Green web hosting Platform For Creating a Sustainable Website.

Energy is essential for the operation of all mechanical devices. It is crucial to choose a hosting platform that operates its infrastructure—be it servers, data centres, or cooling systems—using renewable energy. Green web hosting is a greener solution to web hosting. These days, many businesses are trying to reduce their carbon footprint while still offering reliable hosting services. The main idea is to generate as much, or more, energy than is used and then send the excess back into the grid. Many businesses are turning to renewable power sources like solar and wind to achieve this goal. The company’s goal is to serve the community without negatively impacting the natural world.

Because this is a new technology, it might be difficult to find a green web hosting provider that offers reliable service and helpful customer support. Most of them also lack their own data centres. As a result, they can only regulate the servers’ energy use to a certain extent.

If they can provide trustworthy hosting services and friendly support, we should give them some thought because we can build a better, more sustainable website with the support of Green Web Hosting.

A green business does not need access to green power from wind, water, or solar energy; instead, it can offset the use and cost of conventional energy by purchasing green certificates. The Green-e label indicates that the hosting company voluntarily follows stringent environmental guidelines.

GreenGeeks, Kualo Hosting, DreamHost, HostPapa, and Fat Cow are examples of companies offering eco-friendly web hosting services.

You May Also Love to Read: Best Sustainability Blogs

Now We Know How We Can Make A Sustainable Website Let’s Take a Look How Big Cloud Providers are Dealing with Carbon Emission

Comparing the carbon emissions of Microsoft Azure, Amazon Web Services (AWS), and Google Cloud

AWS

• 13,400,000 MT of scope 1 CO2e emissions seem relatively low compared to Azure and Google (as they don’t report specific scope 1 data).
• However, 57,870,000 MT of scope 2 emissions (market-based) are significantly higher than the location-based reporting used by Microsoft and Google. This means AWS uses more renewable energy for its data centers, lowering its reported scope 2 emissions.
• Scope 3 emissions are not publicly reported by AWS, but are likely substantial given their large global operations.

Microsoft Azure

• 139,413 MT of scope 1 CO2e emissions are higher than AWS but still relatively low compared to total data center usage.
• The location-based scope 2 emissions (6,381,250 MT) are lower than AWS’s market-based reporting, highlighting the impact of reporting methodology.
• 16,340,000 MT of scope 3 emissions are significant and highlight the importance of addressing upstream and downstream impacts.

Google Cloud

• No specific scope 1 emissions are reported, making direct comparisons difficult.
• Google emphasizes its carbon neutrality for workloads processed on its platform through extensive use of renewable energy and carbon offsets. However, transparency on total emissions, especially scope 1 and 3, is limited.

Important considerations

• Reporting differences: Understanding the scope and methodology used by each provider is crucial for interpretation. Market-based reporting for scope 2 can mask the actual energy consumption.
• Focus on renewable energy: Google’s approach prioritizes utilizing renewable energy, while AWS and Microsoft focus on offsetting emissions and achieving carbon neutrality/negativity goals.
• Lack of complete data: Limited transparency across all three providers, especially on scope 3 emissions, makes comprehensive comparisons challenging.

So What does Scope 1,2 & 3 actually mean in terms of Carbon Emission.

• Scope 1: Direct emissions from sources owned or controlled by the company, such as fuel combustion in data centers.
• Scope 2: Indirect emissions from purchased electricity, steam, heating, and cooling.
• Scope 3: All other indirect emissions, including emissions from upstream supply chains, employee travel, and product use.

Now it’s quite evident event Big Cloud Providers are too emitting large amount of CO2e emissions, but sure they are taking some steps to minimize the risk associated with it.

So What Initiatives these Major Cloud Providers are taking to mitigate this Challenge.

Amazon Web Services (AWS)

• Renewable Energy: Aiming for 100% renewable energy by 2025 with investments in wind and solar farms globally. Offers tools like AWS Power Optimizer to help customers optimize energy consumption.
• Data Center Efficiency: Building energy-efficient data centers with innovative cooling technologies and server designs. Implementing AI and automation to further optimize resource utilization.
• Sustainability Tools: Developing tools like the Amazon Sustainability Data Initiative (ASDI) and AWS Greengrass to help customers track their own cloud footprint and develop sustainable solutions.
• The Climate Pledge: Co-founded a global initiative to achieve net-zero carbon emissions by 2040.

Microsoft Azure

• Renewable Energy: Targeting 100% renewable energy for data centers by 2025, investing in wind, solar, and hydro projects. Offering regional renewable energy agreements for customers.
• Carbon Capture and Storage: Investing in research and development of carbon capture technologies to remove emissions from the atmosphere.
• Sustainable Data Centers: Building energy-efficient data centers with liquid immersion cooling and other low-carbon technologies. Optimizing server utilization and minimizing water usage.
• Carbon Neutrality and Negativity: Committing to achieving carbon neutrality by 2030 and carbon negativity by 2050.

Google Cloud

• Carbon-Free Energy: Aims to operate all datacenters and campuses on carbon-free energy by 2030. Achieved 100% renewable energy matching globally in 2022.
• Efficient Datacenters: Designing highly efficient datacenters with innovative cooling techniques and optimized hardware.
• Carbon Offsets: Invests in high-quality carbon offset projects to compensate for remaining emissions.
• Sustainability Solutions: Offers various tools and services like Google Cloud Carbon Footprint to help customers understand and reduce their cloud footprint.

Additional points to consider

• Transparency: Microsoft provides the most comprehensive reporting on all scopes of emissions, while Google focuses on carbon neutrality for workloads and limited scope 1 reporting. AWS data may be skewed due to market-based reporting for scope 2.
• Focus: AWS excels in offering sustainability tools and services for customers. Microsoft prioritizes carbon capture and regional renewable energy agreements. Google emphasizes carbon-free energy and achieving overall carbon neutrality.
• Third-party initiatives: All three providers participate in external sustainability initiatives like The Climate Pledge, demonstrating their commitment to the broader industry.

Since there is demand, so we can’t altogether stop using the services. As we can see although these Cloud Providers are emitting large amount of CO2e but they are taking some steps to minimize that.

Sustainable Website For a Better Tomorrow

More CO2 will be released into the atmosphere in the future as a direct result of the growth in the world’s population and the expansion of internet access in the coming years. The IT industry’s greenhouse gas emissions will reach 14% of global emissions by 2040. By 2025, research shows that the world’s technological emissions of carbon dioxide will exceed those of every country except China, India, and the United States. Another study estimates that 250,000 additional fatalities per year will be caused by climate change between 2030 and 2050. So, the environmental and climatic consequences are difficult to fathom.

As a result, we can’t ignore the fact that our insatiable thirst for knowledge will inevitably lead us to a grim tomorrow unless we take action. It’s impossible to ignore this reality. Our next generation deserves a cleaner, safer Earth, but what can we do to make that happen? My short and sweet response is that we all need to keep an eye on our digital carbon footprints and work toward creating more environmentally friendly websites.

We must not continue to pretend that this is not a significant problem or that nothing will happen. Reducing the internet’s ecological footprint is an important goal. Incorporating these procedures into a website-building project will allow us to achieve this goal. Taking these measures will not only make our site more environmentally friendly, but they will also improve its search engine ranking, a WIN-WIN scenario. Creating a sustainable website is the way of the future. Therefore, let’s get on board to make our home planet a better place to live.