Surfgreen's FAQ about Sustainable and Green Websites

What is Sustainable and Green Web Design?

What is sustainable web design?

Sustainable web design also known as green web design is a certain methodology to design, plan, create and code websites that have a minimal impact on their energy consumption while the website runs on sustainable powered server resources. Surfgreen distinguishes sustainable web design into the frontend and backend component. The frontend part is what the user sees, the backend part is what makes the website run.

In order to become sustainable and green on the frontend part, Surfgreen recommends to implement state of the art frontend technologies to minimize the weight, network overhead and a fast rendering on user devices. This can be achieved by, e.g. optimising caching policies for your static assets (CSS, Javascript, images), optimising images by serving different image sizes that fit to the device that the user is visiting the website with and many more optimisation strategies. By testing your website with Surfgreen you get direct recommendations on how to improve your frontend and minimise the carbon dioxide footprint of your website.

Regarding the backend part, websites can run on carbon dioxide neutral servers that, e.g. run solely on renewable energy resources such as wind or solar power.

Why is sustainable web design important?

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.

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 infrastructure 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.

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 popular internet services, such as Facebook, Apple or Google to build a renewably powered internet. But there’s still a journey to make.

How can I test if my website is green?

Surfgreen has developed an algorithm that analyses your website based on certain criterias such as performance, caching, image weight, weight of javascript and css files. Surfgreen’s algorithm calculates different scores based up on performance, weight, caching or progressive web app capability. Our algorithm calculates based on the weight of your website, how much coal is burnt and how much carbon dioxide is emitted with 1.000 uncached impressions.

To test your website with Surfgreen, just visit our homepage (link below) and enter your website’s adress. Click on the button or hit enter and the algorithm starts to analyse your website. This can take between 10-60 seconds. Testing your website regarding sustainability with surfgreen is totally for free. Have a look here:

You can test your website for free with Surfgreen

How do I create a sustainable and green website?

Design, coding and creating a green and sustainable website depends on the technology you use, e.g. WordPress, a static website or are an advanced custom web app. But generally speaking the following describes the most important topics on how to create and design a sustainable and green website:

Use Caching effectively to reduce the network overhead of your website’s assets

Caching describes how website assets such as HTML, images, CSS or Javascript files should be handled/stored by a browser. If you don’t declare any caching policies for your assets, the browser will request all files on every page impression which leads to a massive network overhead and a minor sustainability scoring. Surfgreen recommends to set a caching policy for your website for at least a day to 3 months.

Caching is declared by setting a Cache Control Header for your assets, that need to be configured on the server side. The property max-age=86400 defines a caching of 1 day for your website assets as an example.

A convenience solution for caching is to use a CDN (Content Delivery Network) that makes copies of your website assets and stores them in data centers around the globe. A CDN has the advantage that your website will be delivered faster to your users by reducing the latency as assets are served from the nearest location your user visits your website from, plus CDNs let you define what caching policies should be applied.

If you have questions regarding CDNs, Caching and how to create a sustainable website, don’t hesitate to contact us!

Optimise your images to improve your website’s sustainability scoring

Images are heavy and weight and very often totally unoptimised. We often see images that are larger than 1MB in size, which is totally unnecessary regarding network overhead and will reduce your website’s sustainability scoring. There are many tools to optimise and minimise images. If you don’t need to have a transparent background for your image, e.g. for a logo or similar, always use images in JPEG or the WEBP format. Those image formats can compress the images far better. With tools such as MozJPEG your images are compressed and optimized without loosing too much quality.

We recommend that images should not exceed 500KB in size even for large marketing images.

Some CDNs let you even optimise your images automatically on the fly and serve Googles WebP format dynamically to browsers who support this format.

Do not over use external, custom fonts

Integrating custom fonts other than system fonts will negatively impact your sustainability score. That’s because you add further network overhead to load font data that will block rendering your website and increasing energy consumption of your device. Surfgreen recommends to use not more than one external, custom font and deliver this font via a professional CDN to minimize the overhead that come with custom fonts.

Compress and minimise your HTML, CSS and Javascript

Removing whitespace from your HTML, CSS and Javascript files reduces the file weight increasing load time and reducing network overhead. Furthermore Gziping your „text“ files can also reduce the amount of KBs that need to be delivered over the wire. Surfgreen here also recommends to either integrate minimizing text files during your deployment process or by using a CDN which out of the box are zipping and minimising your files.

Test the sustainabilty of your website
Surfgreen analyses your website and calculates a sustainability scoring. It's free.
Any questions about sustainable web design?
Do you need help or have any concerns regarding sustainable web design? Don't hesitate to get in touch with us!