Best practice: optimizing fonts
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:
Good practices
Objectives
In order to reduce the impacts of fonts, several best practices are applicable:
- Give preference to standard/ system fonts : This avoids additional requests
- Use an optimal compression format (today, it is the WOFF2 format). Online tools as Everything Fonts can provide this conversion.
- Limit the number of variants used or use a variable font
- Load only the characters that are really used (for example via a subset)
When ?
These good practices must be implemented as soon as the visual design of the service is done in order to favor standard fonts as much as possible. If this is not possible, then limit the number of variants to be loaded. Finally, when fonts are integrated, use the woff2 format, variable fonts and make sure to load only the characters or languages actually used.
Ease of implementation
If the site is already online, it can be complicated to change the font used. On the other hand, technical optimizations are easy to implement (format, variable font, Subset).
Estimated gains
These best practices reduce the number of HTTP requests and the volume of data transferred.
Specific cases
Google Fonts
To avoid problems with the RGPD, it is recommended to host Google Fonts yourself.
If variable versions are not available for all, some creators offer these versions for free. In addition, the Google API allows you to directly create a Subset with a request of this type: https://fonts.googleapis.com/css?family=Montserrat&subset=latin
Icons
Icon fonts are quite common. Using them directly may imply loading many icons that will not necessarily be used. The best way to use icons is to use each of them directly in SVG format. In this form they can be embedded directly in the HTML (without any additional HTTP request). If an icon font must be kept for practical reasons, limit the file to the icons actually used.
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
Best Practice: Limit the number of third-party services
Content in 3 minutes
What is a third party service? They are services that allow to integrate a functionality or a complex content via code that we have little control over. The 10 most frequent third-party services block the loading of sites for about 1.4s. Google fonts are the most common service even though its use may contravene the RGPD.
The impacts of third-party services are far from negligible. In terms of environment, performance, security but also personal data management, attention grabbing and sometimes even accessibility. It is therefore advisable to use them as little as possible. This last point is supported by the RGESN and GR491 guidelines.
Best practices for limiting third-party services?
- Your site is under construction: do not include third-party services
- Your site is already built: limit the addition of content or remove certain third-party services (by checking compatibility with the design, marketing or strategy already in place)
- Your site will load faster: a bonus for sustainable digital as well as user experience.
A concrete example:
During a client audit, it was decided to remove the twitter feed present on several pages of the site. Results:
A significant improvement in metrics and indicators. In particular:
- Reduction of the battery discharge rate by 36%.
- Reduction of the CPU load by 76%
- Reduced the volume of data transferred by 68%.
Context
Third-party services are present on 94% of websites and represent 45% of the requests made by all websites. These services are used to integrate a functionality or complex content via code most often hosted on another site, with little or no control over it. Thus, it can be an analytics solution, a video, the contents of a social network, a captcha, trackers, etc.
Here is a list (sorted by categories), built by Patrick Hulce.
You can find more information about them as well as statistics on their use in the Third-parties chapter of the Web Almanac : https://almanac.httparchive.org/en/2022/third-parties
The statistics show that the 10 most frequent third-party services block the loading of sites for an average of 1.4s and that technical optimizations are often possible (minification, compression, delayed loading, but also removal of obsolete JS code). Also, most of the most used third-party services are linked to Google.

It is interesting to note that Google fonts are the most widely used service, even though their use may contravene the GDPR. One way to fix this is to host the corresponding files yourself. Of course, the best thing to do is to stick to the available system fonts as much as possible.
All this shows that the impact of third-party services, especially on websites but also on mobile applications, is far from negligible. In terms of environment, performance, security, but also in terms of personal data management, attention grabbing and sometimes even accessibility (see the Temesis article on this subject [FR]: https://www.temesis.com/blog/contenus-tiers-exemptes-deroges-audites/). It is therefore advisable to use them as little as possible.
At Greenspector, this is something we look at very closely for our customers, using specific tools to list third-party services and estimate their respective impacts. This is a significant added value of measurement. It is also an essential step in reducing environmental impacts and improving the user experience.
Today, let’s look at a best practice of sobriety, which consists of integrating as few third-party services as possible into a digital service.
Existing reference systems
This criterion can be found in the Specifications family of the RGESN [FR](Référentiel Général d’écoconception de services numériques): 2.5 – Has the digital service taken into account the environmental impacts of third-party services used during their selection ?
This is also found in GR491 (Reference Guide to Sustainable Design of Digital Services): Are third-party services (social network feeds, social wall, carousels, google maps, etc.) not used for convenience to compensate for the lack of content production resources ?
Good practice
Objective
This sobriety best practice consists in limiting the number of third-party services in a digital service.
When to use it?
It occurs at the design stage of the service (choose not to include the services in question) but also when adding content (for example, do not integrate directly a Youtube video in an article).
Ease of implementation
It is technically easy to remove a third-party service. On the other hand, this removal may require upstream discussions on design, marketing or strategy. That’s why this decision should be made as early as possible in the project.
Estimated gains
The gains can be significant in several areas related to Sustainable Digital. In all cases, this proves beneficial to the user.
Case study
While working for a client (initial audit then daily measurements and expertise), it was decided to remove the Twitter feed on all pages of the site. The modification took place on February 1st, 2023. The measurements on the homepage highlight the gains linked to this modification, which can be observed by measuring the consumption of IT resources and energy via the Greenspector tool.

Evolution of page load metrics between February 1 and 2, 2023

Ecoscore (web benchmark) of February 1st 2023

Ecoscore (web benchmark) of February 2, 2023
We can see here a significant improvement of the metrics and indicators. In particular:
- 36% reduction in battery discharge rate
- 76% reduction in CPU load
- Reduction in the volume of data transferred by 68%.
Following the environmental projection via the Greenspector methodology, we can see that the impact of this homepage was, before deleting the Twitter feed, 0.95g eqCO2. After deleting this feed, it is 0.54g eqCO2.
The page in question has more than 2.5 million views per year.
For the sake of simplicity, we leave aside here the contributions of the client-side cache (even if they are certainly non-negligible), the disparities of time spent by each person on this page, as well as the modifications made during this time.
We go from an impact of 2.38T eqCO2 to 1.36T eqCO2 over one year, which is a reduction of more than 40% of the impact in terms of greenhouse gas emissions.
For the other impacts assessed, the trend is similar. Thus, over one year, we go from 383047 to 224675 L of water consumed and from 383 to 230 m² of land use.
To go further
For third-party services that are deemed essential, there are methods to reduce their impact (via efficiency). This can include integrating an interactive map or video as a clickable thumbnail.
Some articles approach the subject from a web performance perspective:
- Reducing the Site-Speed Impact of Third-Party Tags, par Andy Davies : improving performance through tag management
- How to Find the Third-Parties on Your Site, par Simon Hearne : presentation of the RequestMap tool, used on Webpagetest to detect third-party services. This tool was already discussed on an article about auditing Android applications.
- Identifying, Auditing, and Discussing Third Parties, par Harry Roberts : how to audit third-party services on a website
- Reducing The Web’s Carbon Footprint: Optimizing Social Media Embeds, par Michelle Baker
- Partytown : a library to handle third-party services through a WebWorker
- Are my third parties green, par Fershad Irani : an online tool to assess the environmental impacts of third-party services through the origin of electricity used by the servers
Reading grid for environmental commitments of web hosting offers
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.
Web hosts, impact and sobriety actions
The article is based on measurements taken in November 2022. It is possible that some companies have since redesigned their websites.
Summary of the article
More and more web hosting providers are claiming to be environmentally friendly.
– We measured the homepage of 21 web hosting providers.
– We analysed the homepage of the first ranked provider, which is Digital Footprint.
– We then analysed the homepage of the last one in the ranking which is Infomaniak.
– We then took a look at Greenshift’s site by exposing an extract of the HTTP requests of the homepage.
Finally, we reviewed the good practices of sobriety and accessibility which reveal that Eolas and Empreinte Digitale have the fewest accessibility errors unlike Infomaniak which has the most.
In the next article, we will look at the criteria needed to assess the environmental friendliness of a hosting company.
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.
Nom | URL | Ecoscore | Energie (mAh) | Données transférées (Mo) | Requêtes HTTP |
---|---|---|---|---|---|
Webaxys | https://webaxys.fr/ | 89 | 4,173192 | 0,47913 | 21 |
Empreinte Digitale | https://cloud.empreintedigitale.fr/ | 85 | 5,009883 | 0,313111667 | 18 |
Greenshift | https://www.greenshift.co/fr/ | 80 | 4,253108 | 1,079741667 | 51 |
Eolas | https://www.eolas.fr/ | 73 | 4,449822 | 1,416203333 | 59 |
IONOS | https://www.ionos.fr | 72 | 4,586076 | 0,9967127 | 27 |
Scaleway | https://www.scaleway.com/ | 72 | 5,083758 | 2,247849663 | 29 |
OVH | https://www.ovhcloud.com/fr/ | 72 | 5,553175 | 1,832020334 | 64 |
Neutral IT | https://neutral-it.com/ | 69 | 6,62236 | 1,286239 | 49 |
o2switch | https://www.o2switch.fr/ | 67 | 5,3824 | 0,979763667 | 90 |
Ikoula | https://www.ikoula.com/ | 66 | 5,315384 | 1,54606967 | 33 |
PlanetHoster | https://www.planethoster.com/ | 66 | 5,469159 | 1,778474 | 76 |
DRI | https://www.dri.fr/ | 60 | 5,98907 | 0,451148333 | 27 |
Datacampus | https://datacampus.fr/ | 60 | 5,691275 | 13,14124667 | 64 |
EX2 | https://www.ex2.com/ | 58 | 5,474202 | 9,756049 | 91 |
Data Center Light | https://datacenterlight.ch/ | 56 | 4,686341 | 2,86276037 | 51 |
Sostradata | https://www.sostradata.fr/ | 52 | 7,235153 | 17,19431033 | 89 |
Digital Forest | https://digitalforest.fr/ | 51 | 6,225642 | 0,897602 | 35 |
OVEA | https://www.ovea.com/ | 45 | 7,01255 | 4,253318032 | 111 |
Infomaniak | https://www.infomaniak.com/ | 39 | 10,30043 | 3,092772997 | 72 |
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.
Optimising your website for print
With the arrival of digital technology and in particular the web, many people predicted that this would greatly limit the volume of printing. In reality, the opposite has happened as these new technologies, coupled with the democratisation of personal printers, have made it easier for everyone to print. In passing, this can be seen as an illustration of the rebound effect or Jevons’ paradox.
It should be borne in mind that printing is still used for personal or business purposes for the transmission or storage of information.
We will therefore look here at how to make the printing of website content as low impact as possible. We won’t discuss the printer, paper or inks used (printing in draft quality, double-sided, multiple sheets per page, etc). Instead, we will look at good design practices that can make printing less impactful and the printed content more readable.
To begin with, let’s look at what the existing guidelines mention on this subject.
- The GreenIT.fr collective’s repository of 115 good practices in web ecodesign proposes BP_027: “Provide a print CSS”. The brief example provided already covers a good part of the recommendations that we will detail in the rest of the article.
- GR491 suggests checking that a clean version is available for print and that a font optimised for print is used.
This is partly in line with what we will now see in terms of recommendations.
Limit the number of pages
Often, when trying to print a simple web page directly, the number of sheets used seems disproportionate. This is the case, for example, when printing an electronic ticket, such as a train ticket. There are a number of ways of overcoming this:
- Reduce page margins
- Reduce the spacing between elements
- Reduce the size of titles and texts
- Linearise content
- Remove peripheral content (decorative images, contextual elements such as blocks presenting similar articles or the latest articles, menus, top and bottom of the page, navigation elements, etc)
Limiting ink surfaces
If we saw in the previous good practice how to limit the amount of paper used, it is also possible to limit the use of ink. If a dark mode is in place, make sure that the background is white when printed. Again, it may be worth removing unnecessary visuals such as decorative images.
Some fonts are specially designed to reduce the amount of ink used in printing. Take a look at Ryman Eco or tools like EcoFont.
Another option is to allow the user to print the content without the images. In some contexts, images can help with comprehension, but you might as well give the user the choice of printing a page with or without the images.
In addition, CSS filters can limit the ink cost of images: Quality print versions with CSS filters.
How to implement these good practices?
As mentioned in the 115 best practices for web eco-design, the easiest way is to set up a stylesheet dedicated to print and used for the whole website. For this, I invite you to read the Smashing Magazine article “Print stylesheets in 2018“.
Conclusion
In order to facilitate the printing of website content, we have seen here the best practices to implement. The development costs are limited but the benefits for users can be substantial. It is indeed essential to keep in mind all the contexts of use of a website.
Reducing the impact of autocompletion
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.
How is the ecoscore calculated in the case of a web or mobile benchmark
In this article, we will see in more detail how the ecoscore is calculated in the case of a web benchmark performed by Greenspector.
And in other cases ?
As you may already know, Greenspector also performs measurements on mobile applications. In the case of Android applications, it is possible to easily perform a benchmark. The methodology is standard: measurements on loading stages, pauses and reference. The ecoscore is also calculated from the Network and Client Resources ecoscores. The only notable difference is that the implementation of good practices is not automatically controlled and therefore not included in the calculation.
Also, in some cases, it is more appropriate to measure a user path directly in order to be as close as possible to the behavior of the site in its real conditions of use. Whether it’s for the web or a mobile application, Greenspector performs the measurements (always on real user terminals) after automating the path (via the GDSL language). The ecoscore is then established from the metrics represented via 3 ecoscores: Mobile Data, Performance and Energy.
What is a web benchmark?
In order to evaluate the environmental impacts of websites, Greenspector has several operating modes and tools. The easiest to implement is the web benchmark. This standard methodology allows to measure any web page and compare it with other pages.

The measurements are performed on a real smartphone available on our test bench, most often in WIFI (even if other connection modes, such as 3G or 4G, are possible) and with the Chrome browser.
Such a measurement lasts 70 seconds and includes:
-The loading of the page
-A pause step with the page displayed in the foreground
-A pause step with the page displayed in the background
-Scrolling on the page
In addition, a reference measurement is performed on an empty tab in Chrome.
Several iterations of measurement are performed to ensure their stability.
We thus recover metrics on the data transferred but also the impact on the user’s terminal and in particular on the battery discharge. In addition to this, the correct implementation of some thirty good practices is automatically verified.
Then, the environmental indicators are calculated taking into account, when possible, the real statistics of the page use. You can find more information about this on the dedicated page on the Greenspector blog.
Once all this information is available, it becomes easy to compare different web pages, whether they are on the same site or not. This is the operating mode that is used in the framework of the website rankings proposed on this blog, but also at the request of a client in order to establish an inventory of one or more of its websites and to propose an action plan. It can also be a way to build a competitive benchmark to position itself in relation to a sample of similar sites.
You can already have an overview of all this via the Mobile Efficiency Index (MEI) made available by Greenspector to evaluate the impact of a web page for free.
For the moment, we only have to see how the ecoscore is calculated in the context of a web benchmark.
Calculating the ecoscore for a web benchmark
First of all, the ecoscore established for a web page is the average of two values:
-A Client Resources ecoscore which reflects the way client resources are managed from a sobriety point of view when accessing this page
-A Network Ecoscore which reflects the network (and server) load

Client Resource Ecoscore
The Client ecoscore is based on 12 controls performed on the metrics directly retrieved from the user terminal (and collected via its operating system). These metrics concern, among other things, transferred data, but also battery discharge, CPU and memory. For each, 4 to 5 thresholds are defined to determine the acceptable values. According to these thresholds, a score is calculated. The scores for all the metrics are then aggregated to calculate the Customer Ecoscore.
For example:
-The maximum score for data transferred during page loading can only be obtained if its total weight is less than 500 KB
-For the battery discharge, we compare it to the one measured during the reference step described above
The thresholds used are defined via a database of measurements in order to be able, according to the statistical distribution of the measurements previously obtained, to determine the expected thresholds.
Network Ecoscore
Today, the Greenspector methodology is based on measurements only on real user terminals. As a result, the definition of the Network Ecoscore is slightly different. It is based on two elements:
-Comparison of metrics related to data transfer with thresholds defined in a similar way to those used for the Client Ecoscore calculation
-Automatic verification of the implementation of some thirty best practices
For example, we ensure that text resources are compressed on the server side, that images are not resized in the browser and that there are no more than 25 HTTP requests in total. These are therefore good technical practices (rather efficiency-oriented) that can be found in most good practice guidelines for ecodesign or responsible design of digital services.
Conclusion
All these elements make the web benchmark a very efficient process to evaluate the impacts of a web page and compare it with other web pages. It is also an excellent way to start a more in-depth analysis, especially by looking at the most impactful pages of a site. In some cases, it will be more judicious to start with the least impactful pages. A design flaw on a high impact page will often be specific to it, whereas on a low impact page, it will often be common to all the pages.
The web benchmark, among other things through the calculation of the ecoscore, illustrates once again the need to use both measures and good practices in an approach to reduce the environmental impact of a digital service.
Analysis of the 10 sites nominated for mobile excellence by Awwwards
Awwwards references websites that stand out from the crowd in terms of their conception, user experience and design. It is a true reference for web designers and web developers around the world. The concept is simple : every day, designers submit their websites to Awwwards. The site is submitted in the “Site of the day” category. It is judged by members of the Awwwards community of designers, developers and agencies. The best site of each day of the year appears in the book “The 365 Best Websites Around the World”. Every month, a site is elected “Site of the month”. At the end of the year, during a ceremony, the jury chooses the best of the year.

The Awwwards site has grown since its creation in 2009. The nominees are divided into 6 groups:
- Sites of the Day
- Sites of the Month
- Sites of the Year
- Developer
- Mobile Excellence
- Honorable
There are also site themes called Categories, of which there are 26.
Pretty sites but not necessarily sober ?

Our curiosity led us to analyze 10 sites nominated on Awwwards. We have selected sites nominated in the “Mobile Excellence” group. These sites are judged on 4 criterias :
- Friendliness
- Performance
- Usability
- PWA
Awwwards assigns a score for each of the above criteria, which is then used to calculate a total score.
At Greenspector, we decided to go further in the analysis of these sites to see if they met our sobriety criteria.
Additional analysis of sites at the bottom of the ranking

More than 200 HTTP requests to load the page and then 1 request about every 10 seconds. The requests point to about 50 domains.
These queries can be found on the RequestMap (a tool created by Simon Hearne):

While the presence of the cookie banner is legitimate, the chatbot obscures a good part of the display, which is problematic for an Awwward-awarded site. Is this chatbot really necessary? Shouldn’t it open (and load) only on user request?
It should also be noted (but unfortunately this is often the case) that about thirty requests are triggered as soon as cookies are accepted.
When scrolling, the number of requests and the amount of data transferred increase considerably following the direct integration of a Vimeo video. The use of the facade pattern would have been more judicious. We also notice a carousel which is difficult to use on mobile (swipe only).
The lazy-loading is well implemented but we note various superfluous visual effects (in particular parallax) which still come to weigh down the site, in particular with scrolling.
When we scroll down to the bottom of the page, we are at more than 400 HTTP requests and more than 12 MB of data transferred.
Finally, the Wave plugin detects about 40 accessibility errors and about 30 contrast errors.
We had previously discussed the subject of sober sites, but here we are typically on a site where a very busy design and too many third-party scripts greatly degrade the user experience. This is particularly true when we look at the measurements during the pause stages:

Ideally, there should not be any data transfers or such sharp spikes in the battery discharge rate. This may be due to third party services or animations.

For this site, the loading never really ends, as the Firefox developer tools show:

The stats here (including loading time) never stop increasing.
The site is undoubtedly interesting from the point of view of pure design but it is a site that is absolutely not usable:
-The perpetual movements (without the possibility of control) will make it inaccessible for some users.
-The continuous requests to about fifteen domains will put a strain on the data plan of some users.
-Contrast errors are indeed present and keyboard navigation is more than laborious.
All this results in an environmental impact more than consequent with continuous data transfers and solicitation of the battery of the smartphones used, even in background.


The remarks on the two previous sites apply largely to this one. When loading, there are more than 200 requests for 2 MB transferred. Indeed, there are more than 57 domains, which corresponds well to the slogan of the site proposing to make your website a marketing asset.
If the size of the images is rather well controlled, most of the weight of the site comes from the JS with more than 100 requests of which a dozen are more than 100 kb each.

The lazy-loading of the images does not seem to have been implemented and the design of this homepage seems to be much too heavy anyway.
On the other hand, the errors reported by the Wave plugin are almost non-existent.
In short, there is still work to be done in order to make this homepage more sober, to better integrate certain elements but also to limit the use of third party services.
Additional analysis of top-ranked sites

This site is rather light (just over 1 MB) and fast to load. We still get 60 HTTP requests for the first load, spread over 15 domains.
This homepage is visually rich but remains clear. The images are optimized (especially through the use of webp format). It is regrettable that lazy-loading is not implemented.
The cache is globally well managed, which is a very good thing.
On the other hand, we notice that the fonts are rather large, for a total of 5 requests. It would be better to use system fonts or a variable font to limit the number of requests.
Also, from an RGPD perspective, it would be best to avoid Google fonts or host them yourself.
Some accessibility errors appear with Lighthouse.
Animations should be limited to the scroll and cursor movement effects seem superfluous (even harmful for the user).

This site is apparently quite sober. No requests to third party services and globally optimized images but too many. The implementation of lazy-loading (preferably natively) would be a very good thing.
The loading time is made longer by the default loading of a 1 MB video and about 20 requests for the fonts alone.
On the other hand, the cache is implemented on almost all elements.
Even if Wave reports few accessibility errors, animations should be less present at the scroll on the page. Currently, they make the scroll step the most impactful step from the point of view of the battery discharge speed.

The trend observed so far seems to be confirmed: many images (optimized but most of them are loaded twice) and many animations.
15 queries just for fonts but not many queries to third party services.
In short, a site that would benefit from being a little more sober in its presentation and from going further in the technical optimization to avoid that the efforts (especially image optimization) are cancelled out by bad practices (such as double loading of images).
On the Wave side, some accessibility errors come up but mostly contrast problems.
Data projection to measure environmental impact
We went further in the analysis by carrying out a data projection in order to obtain additional details, notably on the CO2 impact, the water footprint and the soil footprint.
Here, energy, data exchange, CPU and memory usage are directly measured on the device. The environmental impact and Ecoscore (based on the measurements but also on the application of good practices) are calculated. You will find the details in the dedicated article on the blog. It is thus possible to compare the different sites, classified here according to their Ecoscore (the higher the better).
version | ecoscore | CO2 impact (gEqCO2) | requests | Energy (mAh) | Data exchange (Mo) | CPU (%) | Water footprint (Litres) | Surface footprint (m2) | Memory (Mo) |
---|---|---|---|---|---|---|---|---|---|
hskr.ru | 60 | 0,30 | 23 | 5,45 | 1,82 | 2,71 | 0,05 | 0,61 | 682,42 |
ladispensadelchianti.it | 75 | 0,31 | 56 | 4,73 | 1,57 | 1,14 | 0,05 | 0,55 | 511,82 |
ingridparis.com | 65 | 0,36 | 38 | 5,54 | 3,59 | 2,11 | 0,06 | 0,63 | 632,50 |
azzerad.com | 63 | 0,38 | 75 | 5,59 | 1,98 | 1,50 | 0,06 | 0,65 | 735,91 |
marcoambrosi.salon | 52 | 0,41 | 47 | 5,81 | 4,75 | 2,44 | 0,06 | 0,67 | 701,52 |
once-lifetime.com | 45 | 0,45 | 56 | 5,73 | 6,37 | 2,24 | 0,06 | 0,66 | 734,36 |
grege-interieurs.com | 39 | 0,64 | 26 | 11,20 | 6,80 | 5,06 | 0,11 | 1,25 | 746,73 |
webflow.com | 33 | 0,67 | 179 | 6,34 | 7,17 | 3,21 | 0,09 | 0,80 | 863,02 |
lamalama.n | 42 | 0,71 | 21 | 9,71 | 13,42 | 4,71 | 0,10 | 1,09 | 828,77 |
blueyard.com | 56 | 0,72 | 50 | 8,02 | 15,13 | 2,56 | 0,10 | 0,92 | 575,93 |
datagrid.co.jp | 29 | 0,80 | 128 | 9,34 | 11,02 | 3,15 | 0,11 | 1,10 | 671,31 |
betterup.com | 27 | 0,81 | 121 | 11,28 | 7,85 | 3,51 | 0,12 | 1,31 | 862,15 |
Conclusion
When the design of sites must be judged or compared, those that come out on top are often sites offering a profusion of images and other visual effects such as animations or video. Even if these design choices can be more attractive or entertaining, they often harm accessibility but also environmental impacts… and therefore, ultimately, the users themselves.
Even when looking for sites specifically dedicated to sustainability, one finds examples with numerous accessibility errors or transferring files larger than 5 MB when loading.
On the Awwwards site, usability is indeed one of the criteria taken into account. However, a quick look at the scores shows that even for betterup.com, which has many accessibility errors, the usability score is often very high. It is normal that a subjective element, often linked to personal experience and the perception one has of such creations, comes into play. Nevertheless, an objective measure should allow to relativize and nuance the statement, as well for accessibility as for sobriety (even performance). These additional constraints could be a source of creativity and give rise to innovative user experiences while remaining respectful of users and the planet.
Digital sobriety at Greenspector
As we talk more and more about digital sobriety, it’s important to come-back to this notion. Especially it’s a part of greenspector activity.
Definition
Digital sobriety is a global approach of digital, respectful of the earth and people.
Since few years, this topic takes more and more extent. We see this notion almost everywhere but often limited in consideration of environmental impact. For many Eco-design has been the gateway into the digital sobriety.
- Eco-design and digital environment impact consideration
- Digital accessibility and inclusion
- Attention economy
- Respect for personal data and privacy protection
- Cybersecurity
- Ethics
- Low tech and fight against technological solutionism

Various aspects of digital sobriety
Environmental impact consideration plays a crucial role in digital services. Beyond resources consumption related to their use (for example, energy needful to charge the battery), these services affect the user’s equipment: battery and components wear, memory and system surcharge… Those impacts motivate early change of latest and newer equipment.
However, today, the manufacturing of those equipments represents the phase of digital services with the greatest impact on the environment. It suits to create websites, mobile applications, and other digital services with as low impact as possible.
That’s why the repositories have been increasing. Examples include the GR491 of INR, the RGESN of DINUM, the 115 best practices or OPQUAST.
Add to this the law REEN as well as tools for evaluating the impact of digital services
Finally, we observe that the subject is gaining momentum and structuration. We can only delight even though there is a long way to go.
The benefits for users and companies are considerable. Overall, this approach improves the user experience (and in particular performance) as well as reduces development, maintenance and hosting costs. Similarly, the adoption of eco-design leads to the development of expertise, an improvement in brand image and constitutes a factor of attractiveness for customers but also for future employees
As a result, an eco-designed digital service will often have a smaller scope, which will facilitate its security, its compliance for accessibility and will tend to restrict the personal data collected.

Eco-design also tends to ignore mechanisms aimed at capturing attention (infinite scroll, autoplay of videos, excessive notifications, etc.). This also constitutes an ethical advance: the user is no longer just a consumer who must be retained by all possible means. We gain their trust and support by first providing them with quality service, tailored to their expectations.
Finally, by placing the user at the center of considerations, digital sobriety tends to avoid technological solutionism. This will avoid (among other things) going to digital services when it does not seem necessary. Sometimes a good old SMS can replace a website or a mobile application: a low-tech solution can meet user needs just as well (sometimes even better).
At a time when more and more services (including public ones) are becoming digital, the accessibility of digital services is a central subject, in a process of inclusion and access to services for all. Unfortunately, this important subject does not yet receive all the attention it needs, although many tools exist and are being developed. The standard (RGAA) is now in its fourth version and the legislative framework extends to public structures as well as companies whose turnover exceeds 250 million euros. It offers a concrete approach to WCAG: a complete panel of W3C recommendations for accessible web content. Verification tools are numerous, even if they are not sufficient to verify all the criteria.
Yet, even today, 97.4% of the most used websites have at least one accessibility error. The compliance with administrative procedures is also far from what one might expect. Accessibility nevertheless remains an essential subject for digital sobriety technology and contributes to ensuring the usability of digital services as well as their sustainability.
Beyond the penalties incurred by companies in the event of non-compliance with obligations, the benefits of this approach are numerous :
- Ensure that everyone can access the services and information offered under good conditions.
- Reach as wide an audience as possible, in particular via the curb cut effect.
- Develop internal expertise (retention of employees and attractiveness for recruitment).
The attention economy is a field relatively little known as such, although it is already deeply rooted in our daily lives. These are all the mechanisms (design, design, functional, and others) that make us addicted to our smartphones and certain apps. We are talking here about captological mechanisms (or deceptive patterns): infinite scroll, notifications, modals, autoplay, etc. Through these design choices, the time spent on our mobiles increases, and our attention span decreases. The stake around our attention is above all financial. All this is detailed in the book The Goldfish Civilization and structures such as Designers Ethiques have already taken up the subject.
This problem is all the more fundamental since we find ourselves faced with tools designed to spend as much time as possible on them, even though their use has a non-negligible environmental impact (via the wear and tear of the terminals, their energy consumption but also by ultimately pushing consumerist behavior, in particular through massive exposure to advertisements). It should be noted that in addition to these harmful impacts on the environment and the individual, there are ethical considerations since this system often results in greater collection of personal data.
Regarding personal data, the question is not new, but the implementation of the GDPR was an important turning point. The aim here is to regulate the capture and storage of personal data of European citizens but also by European companies. This complex subject is particularly linked to micro-targeting (targeted advertising based on data collected on the Internet user) and is all the more dizzying in that it involves companies buying and reselling personal data (data brokers, all against a background of surveillance and political issues as in the case of Cambridge Analytica). More recently, the subject of personal data has returned to discussions following the questioning of the use of Google Analytics and Google Fonts, particularly in France. Not to mention the leaks of personal data that occur very regularly.
Cybersecurity is present everywhere, through security breaches and other incidents that we hear about regularly. Today, it would seem aberrant or even irresponsible to offer a digital service that is not secure. However, this area requires many skills as well as constant monitoring. Again, digital sobriety can reduce the attack surface of a digital service. In return, care must be taken to ensure that the protection of the user does not force him to update his applications and software too often, under penalty of tending towards software obsolescence. Likewise, open source makes it possible, via total transparency, to prevent the presence of vulnerabilities.
Ethics is a complex but necessary subject in the digital field. It is often at the heart of discussions, especially on the vast subject of algorithms and machine learning, for example in the case of self-driving cars. In order to design a digital respectful of individuals, the question of ethics is inseparable.
Finally, technological solutionism, largely theorized by Evgeny Morozov, warns that digital is not always an appropriate solution. This awareness is all the more essential when we seek to reduce the environmental impact of digital technology.
Digital sobriety as part of the Greenspector’s work.
At Greenspector, digital sobriety is at the heart of our business. Even if our primary concern remains the reduction of the environmental impacts of digital services, all this is accompanied by considerations related to digital sobriety technology. The inextricable links between the different aspects of this subject mean that it is essential to guarantee a global approach so as not to miss an area for improvement, or even to avoid providing a recommendation that would harm the users in one way or another (deterioration of accessibility, security risk, etc.). If the impact is not always directly measurable or the seemingly minimal gain from the point of view of sobriety, other axes such as accessibility, the absence of captological mechanisms, and respect for privacy will contribute to making a more resilient product. This is why (and this is just one example among many), we encourage our customers not to directly integrate content from third-party services such as Youtube, Twitter, and others.
For this, Greenspector supports its customers in the eco-design of products throughout the life cycle of the project, but also in the measurement of consumption and the monitoring of impacts over time, in addition (for example) to an improvement process. These are the principles that we also apply to our own products.
In order to work for a digital system that respects people and the planet, it seems essential to apply these values right down to the proposed working framework: allow everyone the possibility of teleworking as much as necessary, insist on the right to disconnect and give everyone the opportunity to adapt their schedules to their own needs. There is also the desire to free up time for everyone to carry out digital monitoring, to create spaces to share the results of this monitoring and to support the development of skills.
Resources to go further
The resources to become aware of digital sobriety are multiplying, but here are already two good starting points :
Does a sober site have to be ugly?
Today, we focus on a question that comes up very often when we address the question of web eco-design or digital sobriety: is an eco-designed site necessarily ugly? Often, the request consists of obtaining examples of “pretty and eco-designed sites” (preferably with a purpose similar to the current project). Specialists in web accessibility have no doubt encountered this type of question frequently. It is already not easy to define what would be, in absolute terms, a “pretty” site. The concept is itself very subjective.
We will therefore proceed differently. We will first compile a list of sites that are sober. There are lists and directories for this, which will be listed later. After compiling the list, we will do a quick analysis to exclude sites that are not as sober as advertised (too much data transfer, too many requests, etc.). Finally, we will use the Greenspector tool to decide between them (by classifying them and identifying those that are more impactful at first sight).
Finally, armed with this list, we will look at what they look like and try to identify design trends, depending on their purposes (an information site does not necessarily look like an e-commerce site or a web agency, for example). Moreover, it will provide an opportunity to keep in mind other aspects of Digital Sobriety, such as accessibility. Having a site that is light and pleasant to look at does not make sense if it is unusable for part of the population.
The purpose here is to offer a list of websites with a lower environmental impact. Everyone is free to find those that seem attractive to them and that correspond to their expectations (in terms of purpose, target, etc.). Thus, this list could be a source of counter-arguments concerning eco-designed sites which would necessarily be ugly. It can also be a way to find sources of inspiration in order to design eco-designed and attractive sites.
Where are the sober sites?
We have chosen to go through the lists and catalogues of sober sites, with the bonus of other sites crossed elsewhere.
Here are the lists in question:
- https://www.lowww.directory/
- https://greentheweb.com/best-practices/
- https://www.linkedin.com/pulse/48-exemples-de-sites-internet-basse-consommation-c%C3%A9dric-liardet/
There are probably others, but this is already a good starting sample. If you have others in mind or want to test your site’s sobriety, do not hesitate to contact us.
A first analysis was carried out with this first list (more than a hundred references in the end). This is mainly based on the Network tab of the DevTools to watch the HTTP requests and the amount of data transferred.
In the end, only about forty sites are left, which are then used for a benchmark with the Greenspector tool.
Sober sites: the verdict by measurement
The benchmark of the selected sites makes it possible to classify them according to their respective EcoScores (the idea being to obtain an EcoScore as close as possible to 100).
Ranking | URL | Ecoscore | Energy (mAh) | Data (Mo) | Requests HTTP | Carbon Impact (gEqCO2) | Water Surface (Litres) | Land use (m²) |
---|---|---|---|---|---|---|---|---|
1 | https://kuroneko.io/fr/ | 94 | 4.24 | 0.14 | 2 | 0.18 | 0.04 | 0.46 |
2 | https://lesraisonnees.co/ | 94 | 4.08 | 0.21 | 11 | 0.19 | 0.04 | 0.45 |
3 | https://brawcoli.fr/ | 92 | 4.08 | 0.13 | 11 | 0.19 | 0.04 | 0.45 |
4 | https://solar.lowtechmagazine.com/ | 92 | 4.35 | 0.35 | 17 | 0.21 | 0.04 | 0.48 |
5 | https://www.pikselkraft.com/ | 91 | 4.35 | 0.11 | 3 | 0.19 | 0.04 | 0.48 |
6 | https://amap-chelles.net/ | 90 | 4.59 | 0.34 | 4 | 0.2 | 0.04 | 0.5 |
7 | https://primitive.wildandslow.fr/ | 90 | 4.1 | 0.16 | 11 | 0.19 | 0.04 | 0.45 |
8 | https://productfornetzero.com | 90 | 3.99 | 0.17 | 14 | 0.19 | 0.04 | 0.44 |
9 | https://www.mountain-riders.org/ | 90 | 4.31 | 0.23 | 19 | 0.21 | 0.04 | 0.48 |
10 | https://fairness.coop/ | 89 | 4.28 | 0.09 | 14 | 0.2 | 0.04 | 0.47 |
11 | https://jeudi.am/ | 89 | 4.47 | 0.15 | 20 | 0.22 | 0.04 | 0.5 |
12 | https://www.boavizta.org/ | 89 | 4.26 | 0.27 | 9 | 0.2 | 0.04 | 0.47 |
13 | https://lowtechlab.org/fr | 87 | 4.09 | 0.22 | 6 | 0.18 | 0.04 | 0.45 |
14 | https://www.gov.uk/ | 87 | 4.35 | 0.24 | 15 | 0.21 | 0.04 | 0.48 |
15 | https://www.treebal.green/ | 87 | 4.19 | 0.8 | 17 | 0.21 | 0.04 | 0.47 |
16 | https://www.boutique-natali.com/ | 86 | 4.84 | 0.44 | 25 | 0.25 | 0.04 | 0.54 |
17 | https://designersethiques.org/ | 85 | 4.06 | 0.28 | 17 | 0.2 | 0.04 | 0.45 |
18 | https://oceanfifty.com/ | 85 | 4.63 | 0.42 | 14 | 0.22 | 0.04 | 0.51 |
19 | https://anelym.fr/ | 84 | 4.64 | 0.17 | 23 | 0.23 | 0.04 | 0.52 |
20 | https://lowimpact.organicbasics.com/eur | 84 | 4.65 | 0.74 | 33 | 0.26 | 0.04 | 0.53 |
21 | https://www.europeansleeper.eu/en | 84 | 4.33 | 0.73 | 31 | 0.24 | 0.04 | 0.49 |
22 | http://www.biocoopmontreuil.fr/ | 83 | 4.75 | 0.53 | 23 | 0.24 | 0.04 | 0.53 |
23 | https://www.licoornes.coop/ | 82 | 4.37 | 0.17 | 28 | 0.22 | 0.04 | 0.49 |
24 | https://empreintedigitale.fr/ | 81 | 4.26 | 1.14 | 26 | 0.24 | 0.04 | 0.48 |
25 | https://www.international-alert.org/ | 81 | 4.67 | 0.83 | 28 | 0.25 | 0.04 | 0.53 |
26 | https://www.laboutiquedupartage.fr/ | 81 | 4.77 | 0.31 | 20 | 0.23 | 0.04 | 0.53 |
27 | https://www.light-communication.fr/ | 81 | 4.53 | 0.19 | 13 | 0.21 | 0.04 | 0.5 |
28 | https://dolo.biz/fr/ | 80 | 4.81 | 1.19 | 15 | 0.25 | 0.04 | 0.53 |
29 | https://www.polybion.bio/ | 80 | 4.88 | 1.02 | 10 | 0.24 | 0.04 | 0.54 |
30 | https://zugvoegelfestival.org/ | 79 | 4.26 | 0.52 | 44 | 0.25 | 0.04 | 0.49 |
31 | https://pathtech.coop/ | 77 | 4.55 | 0.66 | 6 | 0.21 | 0.04 | 0.5 |
32 | https://dalkia.fr/ | 76 | 4.28 | 0.89 | 38 | 0.25 | 0.04 | 0.49 |
33 | https://sustainablewebdesign.org/ | 76 | 4.88 | 1.02 | 43 | 0.29 | 0.05 | 0.56 |
34 | https://palaeyewear.com/ | 74 | 4.51 | 1.19 | 78 | 0.32 | 0.05 | 0.54 |
35 | https://themarkup.org/ | 73 | 5.27 | 1.13 | 14 | 0.26 | 0.05 | 0.58 |
36 | https://www.ademe.fr/ | 72 | 4.75 | 0.64 | 26 | 0.25 | 0.04 | 0.53 |
37 | https://theadccawards.ca/ | 71 | 5.46 | 0.29 | 6 | 0.24 | 0.05 | 0.6 |
38 | https://flowty.site/ | 63 | 6.91 | 0.35 | 21 | 0.32 | 0.06 | 0.77 |
39 | https://heylow.world/ | 62 | 6.14 | 0.35 | 19 | 0.29 | 0.05 | 0.68 |
40 | https://becolourful.co.uk/ | 60 | 6.15 | 0.23 | 15 | 0.28 | 0.05 | 0.68 |
41 | https://www.ec-lyon.fr/ | 59 | 5.06 | 0.81 | 43 | 0.29 | 0.05 | 0.58 |
42 | https://www.wholegraindigital.com/ | 58 | 8.65 | 0.65 | 25 | 0.41 | 0.08 | 0.96 |
43 | https://daviddaumer.com/ | 50 | 7.83 | 0.32 | 13 | 0.35 | 0.07 | 0.86 |
By classifying the results (by EcoScore) and looking at the extremes, we already notice two things:
- Some sites have scores above 80 or even 90. This is a rare occurrence and highlights sites that have made an effort to maintain digital sobriety.
- Some sites have an abnormally “low” EcoScore. Thus, these are rather light sites, but they are still impactful.
https://daviddaumer.com/ (EcoScore Greenspector 50): few requests on the page, little data transfer. We look with EcoIndex, and the score A is obtained (which is the best possible score). EcoScores drop due to animations that continuously drain the device’s battery. Therefore, by displaying this page, the battery is discharged faster, which increases its wear and predicts the need to replace the battery. It induces heavy environmental impacts, most of which come from the device fabrication. The impact of CSS and JS processing should be limited. Are animations necessary? What are their accessibility and attention capture impacts?
The reasoning is pretty much the same for:
- https://www.wholegraindigital.com/ (EcoIndex B, EcoScore Greenspector 58… and some animations, some of which are continuous)
- https://www.ec-lyon.fr/ (EcoIndex B, EcoScore Greenspector 59… and a carousel that should be avoided)
- https://becolourful.co.uk/ (EcoIndex A, EcoScore Greenspector 60)
- https://heylow.world/ (EcoIndex A, EcoScore Greenspector 62)
- https://flowty.site/- (EcoIndex B, EcoScore Greenspector 63)
- https://theadccawards.ca/ (EcoIndex A, EcoScore Greenspector 71) : the environmental impact of the animations here is far from negligible, the site is also very light and sober. On the other hand, this abundance of visual effects seriously harms the usability of the site, in particular from the point of view of accessibility.
In the end, the examples illustrate the need to consider all factors before claiming that a site is sober or has benefited from eco-design. It is good to make efforts to reduce the number of requests and the amount of data transferred. On the other hand, JS or CSS treatments (more particularly animations) can cancel out a good part of the benefits thus obtained. Especially (and I insist on this point) that these animations potentially have a detrimental effect in terms of capturing attention but above all accessibility. On this subject, I invite you to refer, among other things, to criterion 13.8 of the RGAA (On each web page, is each moving or flashing content controllable by the user?). The most glaring example here is https://heylow.world/ with its very present animations which further impair readability for all users.
Analysis of the ranking of sober sites
We started with what to avoid to produce an eco-designed website that is visually pleasing without sacrificing usability. Let’s now take a closer look at the sites to extract relevant examples.
We can already consider the list of sites with an EcoScore > 70% as sites on which a sobriety effort has been made. It remains to be seen what can make them attractive and which ones to highlight.
Note: to avoid possible bias, we haven’t included the Greenspector site has not been included (even if its EcoScore is around 72).
E-commerce
The list contains 3 e-commerce sites:

https://lowimpact.organicbasics.com: as of this writing, the standard site is under maintenance. In the “low impact” version, the choice of sobriety is clearly displayed. The focus is on simple shapes (via SVG) and solid colours. On the other hand, it is regrettable that this version is not the default version of the site. This significantly undermines the impact of this approach.

https://palaeyewear.com: the homepage is rather light and pleasant. It includes the classic elements for such a site: a video (integrated soberly), some products, consumer opinions, some news, an impact report, etc. Several good efficiency practices are not respected but this page is doing better than most other e-commerce sites. Everything gets complicated when you access a product sheet. Here, more than 100 requests and several MB of data are transferred. The eco-design effort should therefore have been pushed further, in particular by basing itself on a user journey (navigation and purchase of a product) rather than only on the home page.

https://www.boutique-natali.com: On this page, we also find several elements specific to this type of site (current promotions, reinsurance elements, products highlighted, etc.) in addition to highlighting the eco-design approach implemented. The same sobriety can be found on the product sheets. Admittedly, some types of products sold online probably require more images (for example in the field of fashion or cosmetics) but in my opinion, this is a good basis for thinking about designing an online store. light and pleasant to use.
Magazines and online press

https://themarkup.org is a sober and elegant site at the same time, which is all the more remarkable for the online press. These sites are usually weighed down by advertising and trackers, among other things, which is not the case here. An important site to keep in mind is an example of an eco-designed online press site. Be careful, however, the lightness of this site compared to other similar sites is partly due to choices of an economic model. Once again, this highlights the role that all the actors of a project have to play on the subject of digital sobriety.

https://solar.lowtechmagazine.com: This is probably one of the best-known examples. The radical choice of environmental impact reduction is clearly displayed here. This will not necessarily be unanimous (notably because of dithering).

We find a similar logic on the Designers Ethiques site (layout similar to an old-fashioned paper newspaper for a more sober result) or even (for the structure) on that of Pikselkraft. The Low-tech Lab site, if it takes up certain elements, goes to a page richer in content and with a less rigid structure. The home page then seems more attractive and the content easier to identify.
Others sites

https://lesraisonnees.co: a scroll-based one-page site. An agency site with classic content but produced in a very sober and efficient way, very clear. A very good example.

https://brawcoli.fr: the classic elements are grouped together on a single page, putting well before what this restaurant offers.

https://primitive.wildandslow.fr: we find in the list of many agency sites or freelancers specialising in the creation of sober sites (which is logical and even reassuring). The idea is generally to present everything on a single page with solid colours and few images (all optimised). Primitive by Wild&Slow is quite representative while standing out, among other things, for areas with non-linear contours. In other cases, the emphasis is on geometric shapes rather than more complex images.

https://www.treebal.green is a much richer variant graphically and for all that quite sober.

https://www.mountain-riders.org is a good example of using the principles seen above with a very contrasting graphic charter for a clean and attractive final rendering.

Although it may seem less attractive than others, https://www.gov.uk shines with its lightness and accessibility. Great efforts have been made here at the level of information architecture. It is in any case interesting to have here an example of accessible and sober public service.
Even if continuous and ubiquitous animations are to be avoided, some lightweight sites use them sparingly:
In any case, it is advisable to keep in mind the accessibility as well as the fact that this type of addition is only cosmetic. For some sites like https://dolo.biz/, the attractiveness of the home page relies heavily on the animations but everything remains efficient and rather pleasant (even if it will not necessarily be practical for everyone’s navigation, in particular, the keyboard).
In a totally subjective way, I also retain https://zugvoegelfestival.org for the choice of colours and navigation on the home page. It is just unfortunate that the various navigation elements on the site are not available (at least by click) upon arrival on the site.
And a last special mention for https://sustainablewebdesign.org which uses geometric shapes, and bright colours and emphasises accessibility while being a mine of information on web eco-design.
Conclusion
The ranking presented here should give you a better idea of what is possible with a sober website. This list is expected to grow over time and serve as an inspiration for those who wish to create sober websites.
One must consider accessibility when using a site and dig as deep as necessary into the notion of sobriety if the feeling one can get is partly subjective.