Website
Digital communication
Energy efficiency

What technologies should you choose to improve the energy efficiency of your web page?

The decision-making tools and techniques you need to overhaul your web presence yourself and reduce your impact on the climate.

Posted on Aug 7, 2023

Author(s)

Aïcha Besser

Communications Manager
CLIMACT

Expert(s)

Dr
Dr Nicolas Tetreault

Executive director
CLIMACT

Louise Aubet

Responsable R&D et consultante numérique responsa...
Resilio

Aurélien Borst

Lead developper full stack
Tagadart Sàrl

What technologies should you choose to improve the energy efficiency of your web page?

In this second part, we will focus on the specific web development, endeavoring to detail the technologies we favored and the results we achieved in terms of the energy efficiency of our web page. Then, using various online tools, we'll try to quantify our progress in comparison with other information web pages.

In this way, our objective is to provide you with the decision-making and technical tools you need to redesign your web presence yourself, with the aim of reducing your impact on the climate.

In the first part of this article "Web sobriety: what solutions at our scale?", we shared our objectives and motivation as an institution, on the subject of eco-design and how we sought to improve our own practices and reduce our digital impact.

.

A discussion between Aurélien Borst, Chief Developer at Tagadart, Nicolas Tétreault, Executive Director of CLIMACT and Louise Aubert, R&D Manager and Digital Consultant at Resilio:

Nicolas: Aurélien, in your capacity as a web developer, what recommendations would you give your customers concerning the choice of their datacenter, as well as the technologies to be favored for the creation of their website?

Aurélien: When it comes to choosing a datacenter, we recommend service providers who, wherever possible, use renewable energies to power their servers, and who valorize the heat used to cool the servers through a shared heat network, while offsetting the remaining emissions. In this particular case, we opted for Infomaniak servers, but other solutions are developing along these lines, such as WellHosted by Hawaii Interactive, which is located in the heart of Lausanne and is also powered by renewable energies.

Then, to effectively reduce the impact of a website's network, it's important to act on these 3 key levers:

  1. Reduce the number of requests
  2. Limit the volume of data exchanged
  3. Limit information processing by using caches

Nicolas: To reduce our impact on these three areas, you suggested that we not opt for Wordpress, as most companies do. What technologies did you choose instead, and why?

Aurélien: WordPress is by default one of the most energy-intensive CMS (Content Management System), and therefore one of the most polluting. Yet Wordpress is used by over 40% of online sites (source). This is largely due to the richness of its ecosystem, its free nature and its ease of installation for novices. However, Wordpress is rarely the best option when it comes to efficiency.

In line with CLIMACT's objectives for this project, we opted for new technologies, some developed locally and all open source.

So, naturally, our choice fell on :

  1. Strapi: a content management system (CMS) developed in France as free open-source software.
  2. Next.JS: an open-source web development framework created by Vercel for building web applications with server-side rendering and generating particularly efficient static websites.
  3. Plausible.io: Plausible is a lightweight, open-source web analytics tool. Cookie-free and fully GDPR, CCPA and PECR compliant. Created and hosted in the EU.

Nicolas: We've now made our choices regarding the technologies to be implemented, but we still need to understand how to eco-design a website. For that, let's turn once again to Louise, our digital sobriety expert at Resilio. Louise, how can we reduce the environmental impact of our website?

Louise: Once we're aware of the impact of digital technology, we can then try to reduce it, for example by eco-designing our web platforms. Eco-design consists in reducing the amount of IT resources required to meet a need, while maintaining the same quality of service. For example, we can reduce the size of web pages, limit connection times and the amount of data exchanged with servers.

Although this topic is still quite new, many people are already working on it and have published guides to help you discover the subject and implement the necessary changes. Here is a selection, the first 3 of which are freely available online:

Some of the best practices to be implemented are highly technical and will concern web developers. However, a large part of the work needs to be done upstream, at the site design stage. In fact, precisely formulating a website's needs can already help avoid the development of unnecessary functionalities, which will in turn avoid  related impact. What's more, reorganizing the site's tree structure and content can improve the user experience and reduce the time spent on the site.

Nicolas: How can we check that our decisions really do reduce our impact on the climate? Are there any tools to help us measure the environmental impact of our website?

Louise and Aurélien: There are several free web sites or extensions that can be used to estimate the environmental impact of a web page. These include GreenIT Analysis and CarbonViz. The results obtained from these sites vary significantly. These variations are due to differences in the methodologies used. However, these tools provide useful orders of magnitude for a first level of analysis. For example, using Ecograder and Website Carbon, it appears that the CLIMACT page offers better climate performance than 67%-74% of the sites tested. Finally, these sites also enable you to test whether your service provider powers its datacenter with decarbonized and renewable energy.

Louise and Aurélien: The initial results are indeed promising. The CLIMACT web page demonstrates a clear superiority in terms of carbon emissions, particularly when consulting the home pages of information sites. Using an average calculated from all encryption systems, the CLIMACT site manages to reduce its carbon emissions by between 30% and 50%.

This progress may seem negligible on the scale of a single visit. However, given the volume of traffic on sites such as blick.ch, 20min.ch and watson.ch, which accumulated over 107 million visits in June alone, these emissions reductions add up quickly. In fact, if all these sites managed to reduce their emissions to the same level as CLIMACT, we could avoid emitting 72 tonnes of CO2 out of an estimated 174 tonnes. It should be remembered that these figures are simplified approximations, intended primarily to enable comparison between the various sites and to give an idea of the potential scale of carbon emissions.

As you can see, there is considerable potential for improvement in the choice of technologies, the type of energy used by datacenters, eco-design and the adoption of best practices. Today's milestone is just the starting point for a more ambitious project. Not only are we going to continue optimizing our web showcase while further developing our services for the CLIMACT community, but we're also going to document our approach in order to change the status quo and provoke a snowball effect.

With this in mind, we've published the source code of our web page in collaboration with Tagadart, and will continue to enhance our impact with Resilio's expertise.

Here's a summary of our next steps:

  • Set up impact indicators enabling us to better quantify ongoing improvements
  • Migrate all our Youtube videos to the renewable energy-powered servers of our web host, Infomaniak.
  • Implement the 115 best practices as published by CLIMACT
  • Increase the accessibility of the CLIMACT site so that it is suitable for blind and visually impaired people, who use a screen reader to access our content
  • Continue to publish a whole series of articles on the impact of digital technology, efficient web development and any other subject that explains our approach.

If you're a web developer, datacenter manager or any other entity interested in continuing or funding this project, please don't hesitate to get in touch with CLIMACT at info@climact.ch.

Separator

Find out more about CLIMACT:

Don't miss our upcoming events and CLIMACT seminar series, read our articles and follow us on Twitter (@ClimactSuisse and @ClimactSwiss) as well as on Linkedin to stay informed of all our news.