The need for sustainable digitalisation

The internet creates four areas of energy demands: data centers, communication networks, end-user devices and energy required to manufacture the equipment of all three. The energy needed to power our devices has historically been the dominant portion of the IT sector’s electricity consumption. This is rapidly shifting as our personal computers and personal electronic devices have become smaller and more energy efficient. By creating, sharing, and accumulating a tremendous amount of data at an ever increasing rate, the investments in digital infrastructure, especially in data centers that serve as the factories of the digital age.

The internet’s carbon dioxode footprint

Today the internet, if it would be a country, ranks on the 6th position of the most energy consuming countries worldwide. With the increasing demand of energy for network infrascture and datacenters, the energy demand will probably increase of three to 10 times compared to current levels with high end estimates of projected data center electricity demand alone reaching 13% of global electricity consumption.

Towards a sustainbale web and cloud

How we build and power our quickly growing global digital infrastructure is rapidly becoming central to the question of whether we will be able to transition to renewable energy in time to avoid dangerous climate change. If data centers and other digital infrastructure are 100% renewably powered, our increasing reliance on the internet can actually accelerate our transition to a renewably powered economy.

But, if our growing digital infrastructure is built in the opposite direction, locking us into a dramatic increase in the demand for electricity from coal and other dirty sources of energy that are changing our planet’s climate, it will be far more costly and take an unnecessarily longer time to reach a renewably powered economy. As of today, it can be seen that more and more of the most popluar internet services, such as Facebook, Apple or Google to build a renewably powered internet. But there’s still a journey to make

Source: Greenpeace

How to implement sustainable web design technologies

Reducing the carbon dioxide footprint of a website or webservice can be achieved by implementing optimization efforts on several levels.

Find out how sustainable your website is

Surfgreen.dev provides a simple service to test your website regarding sustainability and it’s carbon dioxide footprint.

Just enter your website’s adress and Surfgreen analyzes your website based on Surfgreen’s sustainable algorithm to calculate a sustainability score focussed on the onsite / frontend technology and implementation.

The algorithm outputs:

• a sustainability score
• a weight score
• a total performance score
• a progressive web app score
• several recommendations on how to improve the sustainability score of your website

Based on this feedback, you can start adjusting the frontend implementation of your website to improve the sustainabiliy scoring.

The crucial factors of sustainable web design

There are several crucial factors that impact the sustainability of your website:

1. The weight of your website and website assets
2. The load speed of your website
3. The javascript implementation and its performance
4. Using next-gen frontend technologies
5. Sustainable and green website hosting / cloud services

How a website’s weight determines sustainability

How a website’s weight influences its sustainability scoring is based on a simple calculation: The lighter your website’s frontend code is, the better your sustainability scoring. A website’s weight is based on several factors that can be easily optimised.

Websites are a set of static assets, such as images, css or javascript, supporting the static nature of html that’s just containing text and characters. As everyone can assume, images are the largest and heaviest assets of a website.

Optimizing image assets to increase website sustainability

To optimise those in order to reduce their weight can be achieved in several ways:

• Using a CDN (Content Delivery Network) that can optimise your website’s images on the fly, e.g. to provide next level image formats, such as WebP. (most easy way)
• “Manually” optimise images with Photoshop or apps that reduce image weights.

Optimizing Javascript, CSS and HTML to increase sustainability scoring

Regarding the other classes of static website assets such as Javascript, CSS or HTML, the optimization approach is quite simple to those of images.

• Use also a CDN that takes on optimization, such as minification of javascript, html and css.
• Implement optimisation technologies during the build of your website/app during deployment.

Apply next gen frontend technologies to reduce the carbon dioxide footprint of your website

Besides the above mentioned approaches of reducing images, css, javascript and html, applying next gen frontend technologies such as Progressive Web App (PWA) helps optimising your website’s CO2 footprint.

To be short, Progressive Web App technology let’s your website act like a native app for iOS or Android but in your (mobile) browser. The most important PWA technology regarding sustainability is its “offline” feature. With that static assets are directly stored on the device of a user and don’t need to be requested by each website visit from the server, reducing the overall network overhead and speeding up the load time of your website.

Sustainable and green hosting and cloud providers

Another step towards website sustainability is to host your website with green hosting and cloud providers. Those run their energy hungry server farms and cloud infrastructure solely on renewable energy sources such as water, wind or solar avoiding dirty energy sources such as coal or gas.

The most well known cloud provider that is carbon dioxide neutral is Google, for simple website/blog hosting the hosting market offers several companies that offer cardbon dioxide neutral hosting services.

Finally, try it and test the sustainability of your website

Surfgreen.dev ist totally for free, you can test as many website’s you like. So give it a try:

Test the sustainability of your website with Surfgreen.dev

In my next post I describe in detail how to implement sustainable frontend optimisation techniques.

Image Credit: Photo by Brooke Lark on Unsplash