Author: Laurent DEVERNAY

In recent years, the use of fonts on the web has exploded (both in terms of the number of existing fonts and the number of sites using them).

As usual, the Web Almanac is a mine of information, especially via the chapter dedicated to fonts. We learn that the two main suppliers of web fonts are Google and Font Awesome, the latter consisting in the provision of icons. Beyond the potential cost on performance and environmental impacts, some countries have already established that this could contravene the GDPR (General Data Protection Regulation).

Let’s see what good practices can reduce the impact of fonts on the web.

Existing reference systems

The fonts are mentioned in the UX/UI family of the RGESN (Référentiel Général d’écoconception de services numériques) :

• 4.10 – Does the digital service use mostly operating system fonts?

They are also found in GR491 (Responsible Digital Service Design Reference Guide):

• Do you limit the number of fonts loaded?
• Do you give preference to system fonts?
• Are the number of fonts and font variants called (fat, characters used in the project) limited?

Finally, the 115 web ecodesign best practices also mention them:

• Favouring standard fonts

Good practices

Specific cases

Case study

As part of the support Docaposte teams receive for their corporate site, fonts are often a separate project.

The fonts used here are two Google Fonts: Montserrat and Barlow. The site being already online, it is complicated to impose the use of standard fonts.

To avoid violating the GDPR and to improve site performance, fonts are hosted directly on Docaposte’s servers. In a second phase, a dedicated subdomain could be set up to eliminate the need for cookies.

The integration in the form of a variable font requires some additional adjustments, especially in the style sheets. In the meantime, it was decided to apply two best practices:

• Propose the files in woff2 format rather than woff
• The site being proposed only in French and English, a Subset was created keeping only the Latin alphabet.

Original requests

Requests after Subset and conversion to woff2

The woff2 format offers an average of 30% more compression than the woff format and even more than other formats like ttf.

This change in format, combined with Subset, reduced the total weight of the fonts from just over 400 kb to just under 90 kb, a reduction of about 78%.

To go further

• Best practices for fonts : overview of the different best practices related to fonts, mainly in order to improve the performance of a website
• Introduction to optimising web fonts: tips and tools for optimizing fonts
• Reduce web font size : different optimization strategies
• Wakamaifondue : a free online tool to analyze what is in a font file
• Font Subsetter: a free online tool to limit the number of characters in a font file.
• Unicode range subsetting : an approach of the Subset based directly on unicode in order to keep only the really used characters.
• Self-hosting explained (including Google Fonts) : how to host fonts yourself

After a first article where we based ourselves on the websites of the hosting companies to compare the hosting companies proposing “eco-responsible” offers, let’s take a closer look at the offers in question. 

The choice of a web hosting service is often complex because of the many factors to be taken into account (security, availability, storage capacity, sovereignty, etc.). If you also want to choose an offer based on its environmental impact, the choice becomes even more complex.

The main objective of this article is to present some criteria to be taken into account when choosing a web hosting offer.

We first look at the existing good practice guidelines.

Once the list of environmental criteria has been established, we will go into more detail on each of the criteria in order to better understand them but also to have the right information to understand the available criteria or even discuss them directly with the hosts.

Indirectly, this reading grid can also be useful for accommodation providers who are concerned about their environmental impact.

Our objective here is to propose a simple reading grid, allowing anyone to understand what to base their choice of an “eco-responsible” host on. However, all this information will not necessarily be on the websites of the hosting companies. The easiest way is to contact these companies directly to get the missing data.

We obviously welcome feedback and constructive comments in order to improve this reading grid and to know how it is used.

Existing benchmarks

In order to better understand how the environmental impacts of accommodation offers are translated, we started by looking at what the existing standards suggest on this subject.

In order to choose an eco-responsible host, the 115 good web design practices propose the following items (see below for details of each):

• Management of WEEE (Waste Electrical and Electronic Equipment)
• PUE (Power Usage Effectiveness)/CUE (Carbon Usage Effectiveness)/WUE (Water Usage Effectiveness)
• Responsible purchasing policy
• Respect for the social dimension
• Low carbon energy supply
• Carbon offsetting

The RGESN (Référentiel général d’écoconception de services numériques) proposes a dozen good practices relating to hosting. Among other things, it deals with :

• European Code of Conduct for Energy Efficiency in Data Centres.
• Presence of an environmental impact reduction approach (supporting indicators)
• PUE/CUE/WUE
• Equipment management
• Use of renewable energy
• Fatal heat
• Location of servers
• Good data management practices

Note: most of these criteria can be found in those selected for this comparison, with the exception of those relating to the location of servers (mentioned in the social commitments) or to data management (which depend on usage, in particular according to the criticality of the service and the data).

As usual, the GR491 (Reference Guide to Responsible Digital Service Design) offers many recommendations on the subject. If we stick to the essentials, we find :

• Waste management
• PUE
• Sizing of the physical fleet
• End of life of equipment
• Indicators on the software used

In addition, DINUM (Direction Interministérielle du Numérique) offers a practical guide to responsible digital purchasing, with in particular a sheet on IT infrastructure equipment and hosting services (and hosted solutions). The AGIT (Alliance GreenIT), for its part, updated a white paper in March 2023 on the control and optimisation of the environmental impact of a data centre.

By cross-referencing all these elements, we have drawn up a list of criteria to be checked, which is intended to be complete but not exhaustive.

Note 1: Currently, a working group within W3C is building a set of guidelines for website sustainability. One of the areas of work concerns hosting and infrastructure.

Note 2: In January 2023, the ADEME (Agence de l’Environnement et de la Maîtrise de l’Énergie) published a methodological reference framework for the environmental assessment of hosting and cloud services. This document defines the information to be gathered and displayed. At the time of publication of this article, the companies concerned have not adopted it, but it is hoped that this will be the case in the near future.

Reading grid for the environmental commitments of accommodation providers

Let us now look at what constitutes the reading grid in question.

The criteria used

On the basis of the benchmarks seen above and in order to better evaluate the accommodation offers, the choice was made to base ourselves on several criteria (which we will detail below):

• WEEE Management
• PUE
• WUE
• CUE
• Purchasing policy
• Social commitments
• Management of the heat produced
• Renewable energy supply
• Carbon offsetting
• ISO standards, labels, certificates

Description of the criteria

Management of WEEE (Waste Electrical and Electronic Equipment)

How electronic and electrical waste is dealt with. To date, most of this waste is trafficked (What is the status of recycling?).

WEEE management is about extending the life of electronic equipment through recycling or upcycling and reuse. For example, servers used for hosting can sometimes be reused in other contexts.

PUE  

The PUE (Power Usage Effectiveness) represents the proportion of energy used to power IT equipment (servers, storage and network) in relation to the total electricity consumed (for cooling, UPS, etc.). It is always greater than 1 and should be as close to 1 as possible. It is estimated that the oldest data centres have a PUE of around 2, whereas the most efficient ones are more like 1.1.

Many structures advertise very low PUE. Here again, it would be important to see how this is calculated. See the Scaleway website: https://www.scaleway.com/fr/leadership-environnemental/

WUE  

Following a similar reasoning as for the PUE, the WUE (Water Usage Effectiveness) evaluates the efficient use of water, especially for cooling equipment, by comparing it to the amount of electricity used for the equipment. Indeed, the amount of water used by hosts is very high, which increases the risk of water stress.

The aim is to get as close as possible to zero water consumption per kWh.

Few organisations today report CUE or WUE. However, this type of information is an essential complement to the PUE in order to ensure, for example, that a low PUE is not explained by higher water use.

CUE 

Carbon Usage Effectiveness (CUE) compares the amount of greenhouse gas emissions to the amount of electricity used. In order to improve it, technologies with lower CO2 emissions should be selected (which may be the case when a generator is used to produce the electricity rather than using the electricity grid directly). The objective may be to have a UEC of less than 0.1 kg of CO2.

Purchasing policy

The manufacture of equipment remains the most impactful stage in its life cycle, notably because of the many resources (including metals and rare earths) required. The purchasing policy is therefore an essential element in limiting the environmental impact of a hosting company, even if the manufacture of data centre equipment has less impact than its electricity consumption. Thus, some opt for reconditioned equipment or manufacture their own equipment and all must keep in mind the efficiency and durability of the equipment purchased.

Social commitments

It is impossible to make it an objective and directly measurable criterion. However, this category includes what some companies do to reduce the impact of their activity or to contribute to society, which is an essential component of responsible digital. Global elements such as a CSR plan or the Lucie label can testify to this. It may also be interesting to consider the location of buildings as well as local actions, choice of service providers, etc. 

Gestion de la chaleur produite  

Due to its activity and the demand on its equipment, a hosting company can produce a lot of heat. In order to keep the equipment in working order, it is necessary to cool it down, most often by using electricity via air conditioning for example (hence the notion of PUE seen above) or water. When released directly, this heat can have a negative impact on the environment (sometimes referred to as waste heat or energy). Some accommodation providers therefore use it to heat neighbouring buildings. This can be measured by the Energy Reuse Factor (ERF).

Renewable energy supply

Data centres are often criticised for their electricity consumption. While the priority is to ensure that as little electricity as possible is used, it is important to rely on renewable energy as much as possible to limit the environmental impact. This can be measured by the Renewable Energy Factor (REF).

Most hosting companies are focusing on renewable energy. We have based our analysis on the companies’ statements on the proportion of renewable energy used. By way of comparison, the Green Software Foundation’s approach to this (for their Green Hosting Directory which is mentioned by several of the organisations compared here) is rather simple. They distinguish between but take into account organisations that :

• Use only renewable energy
• Invest in renewable energy to offset their own use of non-renewable energy
• Use carbon offsetting

This choice may be debatable (particularly with regard to the inclusion of carbon offsetting). It is up to each individual to see what he or she deems necessary (in terms of procedures and evidence).

It is also important to distinguish between decarbonised energy (e.g. nuclear) and renewable energy.

Finally, claims of “100% renewable energy” can be misleading. It is therefore up to each individual to find out more directly from the companies.

Carbon offsetting

Carbon offsetting is the final step in the process of reducing environmental impacts. It should only be used when emissions have first been reduced as much as possible through sobriety and efficiency. Moreover, the effectiveness of some carbon offsetting solutions is regularly questioned. As there are several ways of offsetting, it is advisable to approach companies to find out more about the precise nature of their approach. In accordance with the recommendations of ADEME and EcoInfo, the notion of carbon neutrality should be approached with caution and avoided as much as possible.

ISO standards, labels, certificates

We look at a number of elements as a matter of priority. These include ISO50001 (energy management), ISO27001 (information security) and ISO14001 (environmental management). In addition to this, we sometimes find the HDS (Health Data Hosting, which includes ISO27001 and ISO50001 among other standards). Finally, the Code of Conduct on Data Centre Energy Efficiency includes many good practices. Greenethiquette is sometimes mentioned, but has disappeared in favour of more detailed standards (such as the European Code of Conduct).

Conclusion 

The notion of an eco-responsible host has been around for several years (notably via the Greenethiquette), but the precise criteria are still under consideration (not to mention what one is entitled to expect from it). Even if some companies are very transparent on their websites (notably via dedicated pages), this cannot replace a more in-depth discussion, both to find out about missing criteria and to better understand the actions already taken. It is therefore to be hoped that hosting companies will move towards concrete criteria to demonstrate their environmental impacts and communicate them in a transparent manner.

For the time being, it is to be hoped that this reading grid will be useful for those who wish to move towards more environmentally friendly accommodation offers, but also so that everyone can be in a position to push companies towards more virtuous actions.

When we are interested in digital sobriety, the question of the host comes up very often. Indeed, this is a very interesting and cross-cutting lever for reducing the environmental impact of digital services. Things get more complicated when you try to sort out the real from the fake in order to choose the best possible host according to the project’s business constraints. Some providers go so far as to talk about carbon neutrality or even carbon negativity.

Claims of carbon neutrality are most often based on the source of the electricity used according to a market-based (supplier’s claims) or location-based (geographical energy mix) approach. Given that some of the scopes 1, 2 and 3 are often neglected, all of this makes these claims invalid. The purpose of this article is not necessarily to go into this point in detail, but you will find some initial answers here:

• [Youtube, 24min 16s] Carbon footprinting tools for public clouds, a presentation by Pierre Rust from Orange Innovation
• Carbon neutrality’ for digital companies, by EcoInfo

Today, in all cases, the claims of eco-responsibility of hosting providers are mostly based on PUE (Power Usage Effectiveness) and the source of the electricity used. This does not seem to be enough. At Greenspector, we decided to look into the subject, to see what was being offered today and to base ourselves on the existing literature in order to determine what criteria to use to choose a hosting company. We were then able to classify several French (or nearby) hosts.

In this first article, we decided to evaluate the homepage of their sites from the point of view of digital sobriety, in order to check whether they reflect their environmental claims. This approach is of course biased and unrepresentative, but it already gives an idea of where each of them stands from this point of view.

It is only with the second article that we will really be able to decide between the hosts, by sifting through the criteria we have chosen.

Comparison of home pages

Based on their intentions regarding environmental impacts, 21 accommodation providers were selected. We have selected as a priority those that show efforts to reduce the environmental impacts of the services they offer. We may have missed some. If so, please let us know!

Based on this list, we measured the homepage of each with the Greenspector tool in order to compare them.

Résultats des mesures sur les pages d’accueil

Now let’s look in more detail

In terms of the Ecoscore (whose calculation methodology can be found on the Greenspector blog), the Webaxys home page does best and Infomaniak does worst. For Infomaniak, this can be explained by the fact that the energy impact of the site is very high. It is even the highest in the sample. On the other hand, from this point of view, it is once again Webaxys that comes out on top. Empreinte Digitale presents the lowest volume of transferred data while Sostradata transfers the most (more than 17 MB!). Concerning HTTP requests, the home page of Empreinte Digitale uses the least while the one of OVEA has the most (at first sight, some optimizations would be quite easy to implement by avoiding duplicates and by delaying the loading of the chat or even by questioning its relevance).

The home pages of the Webaxys and Empreinte Digitale sites clearly stand out and we will now analyze them in more detail. We will then complete our analysis with a quick look at the elements of the Infomaniak site that make it more impactful. We’ll finish with a brief overview of the other sites.

Empreinte Digitale

This homepage is particularly light, which is an opportunity to note the application of several good practices:

• Optimised and lazy-loaded images
• Third-party services mastered and, in principle, all self-hosted
• Very little JS and CSS
• Use of system fonts only

The site is pleasant and attractive. The score could be even better without the animation but this is absent on mobile. The choice of dithering for some images highlights the desire to produce a site as light as possible but is not necessarily necessary.

Webaxys

We find here light and lazy-loaded images, with a simple and attractive service.

On this type of very optimized and light site, some flaws stand out even more, especially the use of Google fonts.

Here we see 7 requests only for these fonts whereas a system font would probably have been suitable. It should also be remembered that their use from Google servers may pose a problem with respect to the RGPD. A variable font could limit the number of files and a subset (limit to useful characters) could reduce the size. But the priority would be to use a system font.

Finally, the last request of the list is probably FontAwesome. So here we get an icon font while only a few icons are useful (and could be integrated in optimized SVG, maybe even directly in the HTML).

Infomaniak

The Infomaniak site stands out for its low Ecoscore and high energy impact.

If you take a closer look, you’ll notice that most of the weight of the page is due to numerous JS files (about forty in all!).

In addition, the animation at the top of the page (for the search of a domain name) seems to be one of the causes of the overconsumption of energy, highlighted in the Greenspector tool:

Other possible explanations for this over-consumption may be found in JS processing. In any case, it should be analysed and limited.

Other websites

Greenshift’s homepage shows a low energy impact, despite the inclusion of animations when the page is loaded. However, in terms of usability, the presence of horizontal scrolling on mobile phones is not ideal.

For the Sostradata site, which has the highest volume of data transferred in the sample, a quick glance reveals the first areas of improvement:

• Avoid including a Google Maps component directly on the homepage
• Optimise images (size, format, quality, lazy-loading)

Good practice in digital sobriety

In terms of good practice, it is worth noting that the Neutral IT homepage meets the most criteria.

From this point of view, we found that some good practices are almost never implemented on the pages in our sample. To improve impact, one should systematically consider :

• Do not let the browser resize images, this limits the consumption of terminal resources
• Only download the necessary images and do lazy loading
• As far as possible, do not integrate css and js code into HTML files; this will avoid systematically reloading the whole file if necessary
• And of course, once the css and js files are independent, they should be minified to save space

Best practices for accessibility

In addition to measurements and verification of good practices (two complementary approaches that are difficult to separate), we were curious to briefly evaluate the selected sites from the perspective of accessibility. While it is important to reduce the environmental impact of digital services, this cannot be done without ensuring that the site adapts to all contexts of use so as not to exclude anyone. What is the point of having the least impactful site possible if it is unusable for a part of the population?

As we do not wish to be exhaustive, we have relied on the aXe tool (it should be remembered that this type of tool is not intended to cover all the WCAG or RGAA criteria) and on the manual verification of certain criteria (200% zoom, content linearisation, textual alternatives, etc.) In accessibility as in digital sobriety, there is no magic wand!

In the end, our findings are as follows:

• The Eolas and Empreinte Digitale websites have the fewest accessibility errors
• Despite its reduced environmental impact, the Webaxys site has several errors that are fairly easy to fix.
• The Infomaniak site is among the sites with the most errors
• Among the most frequent errors, we find mainly those highlighted by the WebAIM Million study (which is consistent):

So here we see (once again) that accessibility and digital sobriety are linked. It would be difficult to say that those who do not take care of the sobriety of their websites do not care about accessibility (and vice versa). On the other hand, it is important to remember that it will be all the easier to apply accessibility criteria to a sober site, and even more so when the two approaches are carried out jointly throughout the project’s life cycle.

Conclusion

A first quick analysis of the websites of the selected hosting providers allows us to distinguish those who make the effort to create a sober (and accessible) site. While this does not indicate that they are paying attention to reducing the environmental impact of their hosting offers, it will be interesting to see if the trends noted here are confirmed later.

In the next article in this series, we will look at the criteria needed to assess the environmental responsibility of a web host. We will return to the websites of the selected hosts to see how each one measures up against the criteria in question.

When we browse the web, autocompletion is almost everywhere. In particular, this functionality is implemented on search engines, whether they are website-specific or not. So, when the user types in the words they are looking for, suggestions are made dynamically, whether to complete the words or phrases they type in or to display the search results as characters are added. 

In the case of Google, these suggestions are often derided as incongruous.  Not to mention the SEO chestnut about the death of the search engine.

Take the example of the Google search engine: 

Here, the blue arrows represent character inputs and the black rectangles represent autocomplete queries.  

We arrive at a total of 16 XHR type queries for 5.1 kb transferred.  

The number of queries remains the same whether the input is fast (input in 2 seconds for the whole search) or longer (7 seconds in total for the input). 

Autocompletion can also be found in some input forms, to ensure that the text entered corresponds to what is expected (city, country, etc).   

While this mechanism can be an aid to the user, the environmental impact of the queries generated should not be overlooked. Let’s see how to limit them.

First recommendations 

If sobriety is a priority, the best thing to do is not to integrate an autocomplete mechanism. However, input help is a definite advantage for users in most cases. 

In the case of forms, the GreenIT.fr collective’s collection of 115 good practices in web ecodesign recommends input assistance. In this way, less strain is placed on the server while ensuring that the text entered remains consistent with what is expected. 

On the GR491 side, there are two recommendations:   

• Limit unnecessary searches by local search engines: this is based on the number of letters entered in order to space out the queries  
• Limit the number of requests between the client and the server: this more general good practice applies perfectly here  

Rather than systematically implementing autocompletion and search, it is sometimes possible to make filters (and sorting mechanisms) available to the user.   

With these initial elements in mind, let’s look at how we can go even further.

Recommendations  

Ensure that requests are as light as possible   

When the client sends a request to the server, ensure that it contains only the elements necessary to provide a relevant response.   

When the server sends a response, again ensure that :   

• Only relevant fields are returned. For example, it is not always necessary to display an image for each result  
• Only the necessary elements are returned (relevance of responses and pagination of results)

Do not offer autocompletion before a few characters  

Before launching the first query, it is preferable to wait until 5 characters have been entered or at least 2 seconds have elapsed since the last entry by the user.   

This avoids returning results for a request that is too vague (when the number of characters entered is insufficient), while taking into account the case where the term searched for is deliberately short (“summer”, etc).

Spacing out the queries in time  

After the initial query, wait until 3 new characters have been entered or at least 2 seconds have elapsed since the last query. 

Limit the number of queries for fast entries  

In addition to the previous rule, in the case of fast input, wait at least one second between each request. Indeed, some particularly fast users can enter a character every 200 ms. 

Measuring local relevance  

When a user adds characters to his search, the results become more precise and their number decreases. It is possible to perform this filtering directly locally, without additional requests to the server. For example, if results were obtained for “housing assistance”, it is possible to filter on the client side if the user continues by typing “housing assistance”.   

This good practice is particularly relevant in the case of an input field in a form. For example, when entering a city or country, the elements of an initial query can be refined locally as the user continues to type.  

Be aware that if a space is entered and new terms are added, the logic chosen for the search results must be taken into account. In particular, should a result contain all the terms entered or only some of them?  

Be careful also to take into account the case where the user deletes some of the characters entered. You may also want to temporarily store the queries you have already made so that you can use them again if necessary.

Back to the example of the Google search engine  

Taking the case of the Google search engine mentioned at the beginning of the article (16 queries, 5.1 KB transferred), we arrive at 3 queries in total for 1 KB transferred.

• A first query only performed when at least 5 characters have been entered.   

• A second query when 3 more characters have been entered.   
• A third query when 3 more characters have been entered.   
• The local evaluation of the results to be returned at the end of the input, since it is only a question of filtering the results obtained following the third query.

Conclusion  

If autocompletion is a necessity and assisted input is not possible, the following good practices should be implemented:   

• Ensure that queries are as light as possible  
• Do not offer autocompletion before a few characters  
• Spacing out queries over time  
• Limit the number of queries for quick entries
• Measure relevance locally

Finally, although this input help may be beneficial to many users, do not neglect its accessibility.