[Focus]The digital impact: best practices for a greener web

This article on eco-design is brought to us by Romuald Priol, a web developer at Peaks Lyon and an expert in web and application performance, point of contact for Collectif Numérique Responsable and representative for GreenIT.fr

Designing a digital service is no longer a complex matter. It has indeed become very easy to create a website with the help of CMSs such as WordPress. These solutions allow the greatest number of people possible to design websites quickly and yet without necessarily taking into account the consequences linked to this mode of development.

The digital impact

The consequences of a digital design are many:

• Accessibility issues, disallowing people with disabilities, including those who are deaf and hard of hearing, access to numerous digital services.
• Ethical issues, such as the recovery or use of personal data without notifying users of such.
• Security issues: new vulnerabilities are discovered daily, and many developers neglect data protection. It is imperative to protect its application, our data and, above all, the data of our users.

Environmental impact

The least known consequence, one of which we are gradually becoming aware, is the one least observed: the ecological impact of the digital world.

The problem with this impact is that it is invisible. When using a phone, we’re using a product that has been designed, manufactured, delivered, and sold: we have purchased (or rented) a material good which depletes certain resources little by little and consumes different energies in order to arrive into our hands. It is a visible product that prompts us to think about both the finite resources extracted from the planet for the product’s design and also those resources which we continue to exhaust to supply ourselves with the electricity essential to its operation.

Where the web is concerned, it is much more complicated. We don’t think of using an application as polluting, since its use is immaterial:

• Watching a film on Netflix or a series using their TV decoder connected to your internet box.
• Playing with your game console online.
• Using ‘cloud‘ power to save your videos, images and documents.
• Posting messages on social media.
• Checking your emails.

All of the actions that we perform through a digital device have a real impact, large or small, that we cannot afford to neglect.

GreenIt.fr published a report on the environmental footprint of the digital world from which we can observe different figures resulting from environmental indicators, giving us an idea of the digital impact:

According to this report, the digital world…

• uses 4.2% of the primary energy consumed on the planet
• emits 3.8% of total greenhouse gas emissions
• consumes 0.2% of clean drinking water
• consumes 5.6% of the electricity produced around the world.

The figures behind this impact don’t seem ‘frightening’, but they represent gigantic values:

• 3.8% of greenhouse gas emissions = 116 million round-the-world trips by car
• 0.2% of water consumption = 3.6 billion showers

We must also put these figures into perspective in comparison with yet another figure, that of the number of internet users:

In 2019, nearly 6% of global electricity consumption was dedicated to digital purposes, resulting in greenhouse gas emissions equivalent to nearly 4% of emissions worldwide (even though half of the world’s population doesn’t yet have internet access).

Let’s not forget that technological progress has enabled us to better understand our planet. We know now that some of our resources (antimony, tin, nickel, cobalt, etc.) are in finite quantities within our soils. Once we have extracted everything, there will be no more!

The digital world is a large consumer of resources. Those generally used by our devices are not only rare but also not very recyclable.

The best example remains that of the ‘rare earths’: despite their designation, they are not especially rare within our soils, but they are less than 1% recyclable.

This is disastrous from an environmental standpoint.

There are some solutions

1. Extending the lifetime of our devices

The first solution is to extend the lifetime of our devices, as the biggest impact lies with the users:

The role of the user is far more significant than that of the network and data centres, but we must take into account that the larger the device used, the greater its negative impact on the environment: a smartphone with a screen size of 6″ (15.2 cm) will therefore have a lesser impact than that of a PC with a screen size of 15″ (38.1 cm), which will have a lesser impact than that of a connected television with a screen size of 85″ (215.9 cm).

So, we could all be better digital users, and, above all: we could improve digital design! This would allow for a far smaller impact on networks and data centres (and, consequently, limit the use of resources necessary to these infrastructures).

2. Improving digital design

A digital service may be designed by anyone, in any way, with any kind of software architecture, and this is a great strength of the web: everyone can participate in its design, provide these ideas and drive innovation. This is, however, also one of its greatest weaknesses: everyone can participate in and intensify the various problems and effects of the web without even realising it.

A digital service and an application are coded, and there are endless ways to code the same feature. From the slowest to the fastest, from the most energy-hungry to the most abstemious. Nantes startup Greenspector.com provides a service that makes it possible to highlight the consumption of an application or a website on a mobile device:

This diagram, from the report ‘What are the best web browsers to use in 2020?‘, simply illustrates the energy consumption (in mAh) of browsing different websites using different browsers on the same device, having the same specificities in terms of hardware, software and connectivity (the measurements, so as to be more reliable, are performed within an identical context).

We can quickly see that some browsers (Opera/Brave) are much more efficient than others (Firefox/Opera Mini) when they are doing the exact same thing: displaying a web page.

This analysis can be directly correlated with the forecasts for battery life in relation to the browser used:

Therefore, it’s possible, for a battery and an equivalent smartphone, to browse the Internet for twice as long when using Opera or the ‘preview’ version of Firefox than when using Firefox or the ‘mini’ version of Opera… We can also look at this differently:

For the same use, you will be recharging your battery half as much when using a more efficient browser. And this same observation is true for each of the applications that you use!

What I’m aiming to demonstrate through this example is that, even among the large software publishers, there are huge disparities in terms of software design. So, imagine what disparities may exist between the websites of people who have little to no knowledge of software quality, computer performance or eco-design.

Software eco-design

In terms of software design, there is an ISO standard that we can look to when we discuss digital eco-design: ISO/TR 14062:2002. This standard describes current practices and concepts relating to the integration of environmental aspects into a product’s design and development. It is interesting to note that this standard was conceived for both material goods and services.

Implementing eco-design within a computer project has multiple advantages: not only does it allow for consideration of planetary resource saving in the creation of services from their design phases but it also helps to obtain increased performance, resulting directly from the rules applied (thereby providing increased user comfort).

How can we eco-design an application?

Before discussing eco-design, we must understand what is possible to eco-design. A website may only be eco-designed if all of these jobs are. Talking about eco-designing software or an application without taking this into account is meaningless! In any case, it is important to act with moderation.

A need which is eco-designed is not necessarily a need met with a computer platform! A person who wants a website in order to attract customers close to home may not necessarily have use for it. It all depends on the person’s job and objectives. In some cases, a simple promotional leaflet distributed in some letterboxes may suffice for attracting more customers!

In the event that there is acknowledged usefulness in the digital service – we know that the need to be addressed will have a greater impact with digital service than without it – we can begin by analysing the various features of the website.

A commercial website, for example, does not necessarily need to have a login area, particularly for the first order from a customer. Forcing users to register on their website increases the number of steps leading them to complete the transaction. Here, too, everything depends on the need. The owner of the website needs to sell a product; there is not necessarily a need for the owner to manage hundreds of pieces of user data that serve no useful purpose for them and which they will need to store securely for no reason. Simplifying sales steps may benefit both user and customer.

The case of contact pages: why force yourself to manage an entire form when, in most cases, a simple tag <a href=’mailto :mail@domain.tld’ >< /a> is sufficient? Why display a mapping plugin which drastically reduces the SpeedIndex of your pages when a simple, dynamically-loaded image with a link redirecting to the mapping website is sufficient?

We have a bad habit of making matters too complicated; such complexity degrades the software quality of our applications and websites and increases the number of lines of code that we must manage: we spend more time maintaining and updating features and making developments than actually taking part in meeting a useful need.

Once there is a list of clearly identified features, and a designer has gone through it for the purposes of managing the UX, taking into account a simple and accessible user journey, devoid of “‘Dark Pattern‘ and infinite scrolling, we can select the web host to host our website!

Choosing a green web host

There are all kinds of web hosts, but very few emphasise respect for ecological and social issues. In general, I recommend Infomaniak based on the following points:

• the energy consumed by this web host is ‘TUV SUD EE01’ and ‘Naturemade Star’ certified, which guarantees that the energy used by their data centres is 100% renewable;
• there is no overconsumption of electricity, as everything is cooled using outside air. No large air conditioners are doing the job;
• they promote local and responsible purchasing (few products come from the other side of the world)
• they offset their greenhouse gas emissions by 200% (even if we agree on the fact that offsetting is the ‘lesser evil’ of the solutions; if we didn’t produce C02, we wouldn’t have to offset it);
• they extend the lives of their servers to reduce the amount of CO2 they emit during their lifetime. Servers are used for at least five years.

It is encouraging to see that such a large company can really move things forward in the right direction, all while respecting our planet as best it can.

Architecture & choice of code

We will also think about the architecture that we’ll have to set up: will we need to handle a large flow of data, which would lead us to build a dynamic website? Does the data displayed only serve to present a simple profile, a company with little, yet relevant, information, which could be entirely generated using a static website, which would eliminate the need to maintain a login area, a database and all of the security concerns that come with it? The latter option will be of great help to us in determining whether we are going with a CMS like WordPress, a Framework, or a code ‘from scratch‘.

This step is also a determining factor for choosing the computer language used. It’s possible to generate HTML code in a wealth of different manners through a wide variety of computer languages. But again, we must take into account several different parameters: the knowledge of one’s teams and the energy used by your language for generating your HTML code.

Not all computer languages are created equal. Some are simpler to learn than others and may be more widely known, and it will be easier to find documentation and solutions to potential problems that your team may encounter. Computer languages also differ in the level of resources consumed by their use – they use more or less RAM (volatile memory) and CPU to function.

One study helps us understand the differences in performance of some computer languages compared to others. We can see that certain ‘recent’ languages, such as Go or Rust, are well positioned in all categories (energy used, operation time and memory used). It’s great to see that new computer languages can be more efficient than those that we are used to using on a daily basis.

It’s important to take into account the code generation on the server side (the code that dynamically generates data). But we must not lose sight of the fact that, in general, the greatest impact that you can reduce is on the client side, given that a caching policy on the server side helps to drastically reduce code generation. The client is the one who will download data, make hundreds of requests, and be required to update their browser or even their computer if they ever feel that everything is ‘slowing down’, given that you have not made your application efficient enough by considering the oldest hardware constraints.

Let’s not forget that we are in an era where we do not change phones when they no longer work, but when they become slow!

Applications, as with websites, are becoming more and more complicated, demanding increasingly higher capacities from different user devices. The direct effect of this is that they must be changed much more frequently in order to enjoy applications and updates that consume increasingly larger amounts of CPU, RAM, storage space and energy: this is what we call software bloat.

To meet the same need, we must consume a great deal more in resources and energy today than we did ten years ago! To create the same text in Word, perform the same action in Excel or create the same email in Outlook, it takes 114 times more RAM with a Windows 8 / Office 2013 pairing than with Windows 98 and Office 97. (The book ‘Sobriété Numérique’ [Digital Sobriety] by Frédéric Bordage, published by ‘La verte’ in 2019, provides a very good explanation of this, for those who are interested 😉)

Now, we can finally get to coding! But not just any coding – as always, with restraint and efficiency. Obviously, regardless of which code you will use, there’s no need to reinvent the wheel. This is a phrase that we hear often in the development world. When a line of code, a bundle or a module already exists, we may as well use it; this is true, and by using it, we can even help to improve it!

However, in many cases, we see this methodology of reusing components taken to the extreme: people downloading an entire garage to reuse a single wheel. We, as users, must be careful of our addictions. Reducing our dependence on external modules is a great trick in terms of eco-design but also with respect to software quality: it’s not necessarily easy to maintain the lines of code that we are familiar with; it’s even more difficult when these are lines of code that we don’t know, which may not evolve at the same pace as your own.

It’s also important to pay attention to the target versions of our Frameworks by making them as compatible as possible with older devices. Aiming for more recent versions offers us features that are not necessarily useful for the code that we will be producing and means that our application will not be supported by older versions of mobile, tablet or PC operating systems. If your application turns up with a new feature that could have worked on older media, you will be forcing your users to change devices in order to keep up with your own changes despite yourself, or, even better (from an ecological standpoint), to abandon you.

Best practices

Next, all that’s left is coding your service while adhering to the greatest number of eco-design best practices that you can find in Frédéric Bordage’s guide to the 115 best practices for web eco-design [in French].

Here are some examples of best practices:

• Remove non-essential features;
• Use input help instead of autocomplete;
• Limit the number of HTTP requests;
• Choose a suitable data format;
• Split CSS;
• Use standard typefaces;
• Avoid expensive JavaScript/CSS animations;
• Only connect to a database if necessary;
• Choose a ‘green’ web host such as Infomaniak;
• Establish an end-of-life plan.

Of course, we must eco-design the needs of our software and digital services by avoiding ‘greenwashing‘. The guide to the 115 best practices for web eco-design is an excellent source of information for implementing a more responsible design strategy within your IT department. All of the rules help streamline your pages and make the web simpler, faster and more accessible!

It is important to understand that you must comply with as many rules as possible in order to assert that you have eco-designed a website. We see many self-styled low-tech and/or eco-designed sites that only follow a few eco-design rules and demonstrate insufficient study of user need(s) and analysis (upstream if possible) of the impact of their service according to multiple criteria (use of water, energy, resources, greenhouse gas emissions, etc.). The result is mixed: perhaps the site’s resource use has been minimised, perhaps the images are compressed, perhaps the pages are static and fast enough, but if the architecture behind it is oversized, a multitude of deferred scripts are loading ten third parties that are slowing down the entire site and they are increasing the amount of RAM and CPU used by your client’s web browser, this is not what we would call an ‘eco-designed’ site; this is a site that has followed a few internet efficiency rules.

Tools for analysing efficiency

There are tools that allow you to analyse the efficiency of your services. These tools exist in many forms: back-end (with the excellent BlackFire for analysing your PHP and Python applications), application (with the ReSharper and DotTrace programs for C, C++ and C# applications) and front-end with the existing static analysis tools (Dareboost, Gtmetrix and Web.dev). These tools are powerful, and once the site or application is available, they allow the owner to analyse efficiency and obtain a great deal of recommendations for improving their service’s efficiency.

Efficiency is (generally) beneficial to the web. One of the benefits of eco-design is that it naturally makes applications more efficient! Let’s not forget that the reverse is not true: an efficient application is not necessarily an example of eco-design.

Let’s take a simple example: the use of deferred JavaScript scripts. When there is a large amount of JavaScript, which we often use for anything and everything, we generally have performance issues. Too much JavaScript means too many requests to perform to retrieve it, too much time loading files, too much content to be read and delivered by the browser. When there is no JavaScript impeding the page’s rendering (which is ideal :D), we can choose to tell the browser to defer running these scripts with the ‘defer’ attribute. The scripts will then be executed last, one after the other, and the page will be displayed much more quickly. You will therefore increase efficiency and will certainly improve SEO, since the SpeedIndex will decrease and the page will be rendered much more quickly.

However, nothing on the site will have changed! It is certainly more efficient, but it is still downloading the same number of resources that:

• may not meet the initial need;
• may be more cumbersome;
• are still a product of developers who have left the project, meaning that it is performing actions that now go unused.

In this case, the site has actually become more efficient, but in no way is it an example of eco-design!

Eco-design analysis tools

In order to more closely monitor eco-design indicators, some associations have created tools for estimating the impact of our digital services:

The Collectif Numérique Responsable, from GreenIT.fr, has designed the site ecoindex.fr [in French]:

EcoIndex calculates the environmental footprint based on the site’s level of eco-design. The calculation uses an average impact in terms of greenhouse gas emissions and fresh water consumption. This average value is modified based on the level of eco-design. A simple approach, this offers a realistic order of magnitude.

It should be noted that browser extensions are available for Chrome and Firefox to monitor website browsing sessions. This allows you to estimate the impact and level of eco-design progress for a complete user path.

The GreenIT.fr community and some of its partners are also the creators of the site Ecometer.org, a service for identifying the best practices implemented (or not implemented) by a digital service via its URL: the site lists the aspects that must still be implemented to reduce the environmental impact of the page or the web service being analysed.

The ‘shifters’ from The Shift Project have also designed a tool for estimating the impact of a website, Carbonalyser, which can be used through a Firefox browser extension. The shift method depends on the searches performed through their ‘1byte model’ program, which converts the data transmitted to the browser into an electricity equivalent (kWh), which is itself converted into a CO2 equivalent. This method has its flaws (given that electricity does not have the same impact from one geographical area to another), but the application provides a helpful glimpse of the impact that we can have when browsing the internet.

These different tools help us to grasp the real impact of our websites by measuring indicators linked to the environment. This is the entire goal of the process: allowing us to design applications that are simpler and work better while doing as much as possible to respect our planet’s resources, all in order to enjoy the benefits of the digital world for as long as possible.

Conclusion

Digital media is a relatively young tool that has experienced continuous evolution over the last thirty years. It consistently helps us in a multitude of areas, brings us closer together, makes our work easier and frees up our time. It helps us to better understand our interactions with one another and with biodiversity, and to better understand the impact that we have on our planet!

This youthfulness, however, is also a flaw: we must learn to manage it better, to use it more wisely, and perhaps in greater moderation, for the good of humanity and of our planet! It is important that we use and design digital media in moderation!

Let’s not forget that it is up to us alone to reduce our impact on the planet with greater efficiency by changing the habits that have an even greater impact (reducing the use of cars, avoiding air travel, adopting a vegetarian diet, moving to ‘zero waste’, eating locally, etc. 😉).

Find out more

• Discover Infomaniak’s ecological commitments
• Training sessions for learning about creating a more responsible digital world
• Certifications from the Institut du Numérique Responsable [institute for a responsible digital world]