Category: Web sobriety

Reduce the weight of a web page: which elements have the greatest impact?

Reading Time: 11 minutes

A few years ago, I had the chance to take part in the design of INRIA’s MOOC on the environmental and other impacts of digital technology. On that occasion, an activity was created by Benjamin Ninassi, with the aim of enabling participants to classify the elements of a web page according to their weight. The point here is to help participants build their own mental model of what constitutes a web page, and the respective impact of each element that makes it up. This is an essential step when considering web eco-design. That’s why I regularly use this activity for training purposes, as well as to raise awareness of the need for editorial restraint.

The primary objective of this article is to validate the classification proposed in this activity by measurement, but also to go further. This article was produced in collaboration with INRIA (thanks Benjamin!) and the MOOC activity will be modified accordingly in the near future.

Methodology

In order to measure the various elements that make up a web page, we started by creating as basic an HTML/CSS page as possible to serve as a reference for the measurements. This page has an all-black background. For each element to be measured, an HTML page is created from this reference page, to which only the element to be measured is added. The CSS is created in a separate file, containing at least the all-black background. This file is not minified (deletion of characters not required for code interpretation), as the input on such a short file is negligible.

Next, a simple path is automated in GDSL (Greenspector’s automation language) to simulate standard user behavior, based on a basic usage of the measured component. Then, once the measurements have been taken on the measurement bench, we generate a dashboard and environmental projection. These results are then used to analyze and rank the impact of the various elements measured.

As far as the media integrated into the page as an example for measurement purposes are concerned, we have used the elements used in the MOOC activity. The latter originally featured a Twitter feed, which has since been removed. With INRIA, we decided to replace it with a Facebook feed (INRIA’s own), both in the activity and in the sample measured here.

Furthermore, we decided to measure elements based on their nominal usage :

  • Images, animation and animated image : loading, pause
  • Audio and video files : loading, pause, playing
  • Facebook embed, table, text : loading, pause, scrolling, pause
  • Interactive map : loading, pause, zooming, pause.

The measurements were carried out on a Samsung Galaxy S9, using WIFI.

Various assumptions have been made for the environmental projection:

The environmental projection methodology is described in this dedicated article.

Ranking page elements by weight

Warning: this article contains spoilers. It is based on the expected result for the activity “Compare the weight of elements on a web page”. If you haven’t done this activity yet, do it now.

In the MOOC activity, the proposed ranking is as follows (from the component with the highest weight to the one with the lowest weight):

  1. High Definition Video
  2. Low Definition Video
  3. Audio podcast
  4. Raw image
  5. OpenStreetMap
  6. A social network feed
  7. Autres traductions
  8. Text only

As a result of the measurements we have carried out, the data transferred when the corresponding pages are loaded gives the following results:

Data transferred at page load for activity elements

This is more or less the same classification as in the activity, with slight differences due to the content chosen for each content type.. It should be noted that the weight of these elements depends on several factors, in particular the social network selected and the content integrated here (message, message thread, etc.). The same applies to the other elements measured here, but the order of magnitude is still quite correct.

So here we can validate the ranking of element weights as proposed in the INRIA MOOC activity. We could stop here, but now let’s take it a step further. To do so, let’s take a look at what happens after the page has loaded, as well as at other metrics and indicators.

Other impacts of web page elements

So we’re sticking with the eight elements proposed in the activity.

The dashboard generated via Greenspector Studio lists several other metrics and indicators. The first score calculated concerns performance. However, on such lightweight pages, loading is too fast to be able to differentiate between elements in any meaningful way due to “noise”, in particular TTFB (Time to First Byte), which can vary slightly from one iteration to the next.

Data transferred beyond initial upload

Let’s start by looking at the data transferred after the page has loaded: pause for 30 seconds, scroll to the bottom of the page, then pause again for 30 seconds.

Data transferred over the entire measure for activity elements

We see here that the data transferred beyond loading is most of the time not negligible. In particular, in the case of video and audio playback (as one might expect) but also for the Facebook feed.

Energy consumption

Over all the stages measured, the energy consumed according to the elements is as follows:

We see that the order remains generally coherent with a few exceptions (we will come back to this later) but especially the Facebook feed which, although less impactful than the video, is more so than the other elements (notably the audio player).

Facebook feed

The page containing the Facebook feed is by far the most impactful in terms of energy. While it’s logical that scrolling and loading should have an impact (since these steps involve at the very least a modification of the display), it’s even more surprising when it comes to pauses. Indeed, when the user is inactive, the display is normally not modified. So it remains to be seen whether any “parasite” requests occur. In the Greenspector Studio web interface, we obtain the following representation:

CPU visualization and data transferred during the pause after scrolling on the page containing the Facebook feed

On a “normal” pause stage, no data transfer takes place (apart from any requests related to Chrome browser telemetry). If, in addition, the display is not modified, we would expect to see a stable, low CPU load and no data transfer. This is not the case here. Apart from a strong CPU peak, correlated with data transfer, the CPU peaks seem to be more related to tracking.

Extract of HTTP requests captured in the Network tab of Firefox DevTools

When integrating content from an external service, it is common for requests to be sent at regular intervals to the source site to inform it of user behavior and interactions with the integrated content. We see it here in the case of Facebook but be aware that most social networks do this (in this regard, I recommend that you test the integration of Linkedin content…).

For more information, see our article on integrating third-party services on a web page: https://greenspector.com/fr/service-tiers-youtube/

Audio file integration

The text appears more impactful for energy than the interactive map or images. All these contents do not cause any change in the display once loaded and just viewed. On the other hand, on an AMOLED screen (like that of the S9 used here), the display of the text is more impactful than the images and the interactive map because the background is black but the text white. On this type of screen (and this is the reason for dark mode from a energy consumption point of view), a black pixel is much less expensive to display than a white pixel. We are therefore here in a special case but one which allows us to understand where the impact of a page in consultation only comes from.

For more information, see the article on the impact of color on energy consumption: https://greenspector.com/fr/faut-il-changer-son-fond-decran-pour-consommer-moins-de-batterie/

Intermediate conclusion

For MOOC activity elements, the measurement of transferred data confirms the expected ranking, with only a slight downside related to integrated social networking content.

However, if we look more closely at the energy consumed, we see that much of the impact of the Facebook feed occurs after loading, via regular requests to third-party services. This underlines the need to go beyond measuring requests, transferred data and the DOM, and also to measure what happens after the initial load, at the risk of missing out on third-party services (and elements whose loading is deferred, often for performance reasons). Also, it is a question (at the risk of insisting) of being as close as possible to user behavior.

Let’s take a look at how to add to the initial list of new items often found on the web.

Other elements integrated into a web page

In addition to the elements proposed in the MOOC activity, we looked at other items:

The methodology for measuring and creating the sample pages is exactly the same as that described above.

Let’s take a look at the results.

Data transferred during initial loading

As a result of the measurements we have carried out, the data transferred when the corresponding pages are loaded gives the following results:

Data transferred at page load for all elements

In addition to the above ranking of activity elements, we note that the selected GIF is heavier than most elements (which is of course linked to the content chosen for integration).

The table is less voluminous than the text because it contains fewer characters (fewer sentences of dummy content have been introduced into the table than into the page used to measure the impact of the text alone). We’ll see later that, in the case of the table, the overconsumption lies elsewhere. The animation here appears rather light (a few lines of HTML and CSS).

Note that the elements added here do not involve any additional data transfer beyond the initial loading stage.

Data transferred on all stages for all elements

Energy consumption

The results obtained here are as follows:

Energy consumed over the entire measure for the elements

When limited to the elements of the MOOC activity, we noted a few differences with the ranking initially proposed. In particular, the Facebook feed stood out as the most impactful in terms of energy.

Here, we can see that the CSS animation is by far the most impactful in terms of energy. The Facebook feed comes right after the videos, followed by the animated GIF. This order is noteworthy: unlike the animated GIF, which continuously modifies the display, the Facebook feed appears rather static when the user is inactive. As mentioned above, its excessive energy consumption is due to what is not visible: requests to Facebook and video preloading.

The native HTML table is slightly more energy-intensive than plain text, even though it contains fewer characters. So, from the moment it’s displayed, the table makes slightly greater demands on the CPU (more on this later).

This was already mentioned in the article on sober sites:
https://greenspector.com/fr/un-site-sobre-est-il-necessairement-moche/

When an element on a page causes continuous or almost continuous changes to the display, the energy impact can be considerable. We’ll see in the last part of this article how this affects environmental impact.

Intermediate conclusion

The three added elements fit in unsurprisingly with the initial ranking based on data transferred. However, from an energy point of view, the CSS animation and the animated GIF have a considerable impact. This underlines the need for measurement to go beyond HTTP requests, transferred data and DOM. The usefulness of the latter metric for environmental projection remains debatable. The cases presented here are good illustrations of cases where the DOM is very light but the impacts are very significant.

This is detailed in another blog post: https://greenspector.com/en/dom-as-a-metric-for-monitoring-web-sobriety/

Finally, we’re going to use a different measurement methodology and collect data to get a more global view of the various elements.

Measuring pages with a “classic” benchmark

For this new series of measurements, we started with the same sample of pages, but used a classic benchmark. Each page is measured over a period of 70s, using the following steps:

  • Page loading
  • A pause with the page displayed in the foreground
  • A pause step with the page displayed in the background
  • Scrolling on the page

To find out more about the benchmark, visit this page: https://greenspector.com/fr/comment-est-calcule-lecoscore-dans-le-cas-dun-benchmark-web-ou-mobile/

The results are as follows:

Aggregation of item benchmark results (sorted by quantity of data transferred)

As far as data transfer is concerned, we can see what we’ve already observed. However, it is more difficult to distinguish between CSS animation, text and HTML tables, as the quantities of data transferred are very small.

As for the CPU, we note some slight variations but above all the excess consumption for the CSS animation, the GIF and the Facebook feed are all the clearer. Following this top trio, we find the HTML table which, despite the small amount of data necessary for its loading, turns out to be impactful for the CPU.

For his part, Alexander Dawson has begun to investigate the impact of various standard HTML and CSS elements: https://websitesustainability.com/cache/files/research23.pdf [PDF 384 kb].

In terms of HTTP requests, the Facebook feed and the OpenStreetMap map are unsurprisingly at the top of the list. This involves the integration of dynamic elements provided by third-party services, which require more files to function. It’s worth noting that requests to and from Facebook are almost continuous, reaching more than 170 in all after a few minutes of user inactivity (as we saw above).

Regarding greenhouse gas emissions equivalents, animation and moving images have the most impact, followed by the Facebook feed (due to its high data and CPU consumption). For information, land use and water are also indicated (see the article on environmental projection: https://greenspector.com/en/environmental-footprint-methodology/). The rankings for these two other indicators remain broadly identical.

Intermediate conclusion

These new measurements, with a slightly different methodology, once again underline the need to take into account not only different metrics, but also the discrepancies observable during the evaluation of several environmental indicators.

Overall conclusion

Staying within the same perimeter (data transferred during initial loading), the measurements confirm the ranking of elements proposed by INRIA’s MOOC activity. The only point to be discussed is the integration of a social network element. In the sample selected here, the integration of the Facebook feed has a greater impact than the interactive map from OpenStreetMap (without even counting the other impacts identified beyond the initial loading or energy-related data).

If we go beyond this measurement perimeter (by also looking at other environmental metrics and indicators), the ranking may change, particularly because of the impact on energy consumption.

Lastly, the addition of new elements that can be integrated into a web page inevitably modifies the ranking, but above all refines the mental model mentioned in the introduction to this article. In particular, CSS animation and animated GIFs (as well as HTML tables to a lesser extent) highlight the impact on metrics that are not currently measured by most tools, even though they play a key role in environmental impact. For example, the CPU’s impact on the terminal’s battery discharge can lead to an acceleration in the terminal’s battery renewal, and therefore to major environmental impacts linked to this operation. This observation directly calls into question the widely adopted mental model for the environmental impacts of digital technology, which leads some people to “compensate” for their self-imposed diet of transferred data by setting up animations. By extension, this also raises questions about the impact of different formats and codecs for certain content (where the reduction in weight can be offset by a calculation overload that reduces or even cancels out the environmental gains).

While it’s normal to start with a simple mental model, this article also aims to highlight the need to refine it so that you have all the elements in hand to make informed choices. Hopefully, some of the results presented here will contribute to this.

In conclusion, two rankings are proposed here.

The first relies only on the data transferred during the initial loading, as initially planned in the activity (from least to most impacting):

  1. Table
  2. Text 
  3. Animation 
  4. Optimized image
  5. Interactive map
  6. Integration of social network content
  7. Animated GIF
  8. Audio file
  9. Low-definition video
  10. Raw image
  11. High-definition video

The second ranking is based directly on the projection of greenhouse gas emissions over all measurement stages (which means going back to the metrics to explain, but also being transparent about the environmental projection model):

  1. Text 
  2. Table 
  3. Light image
  4. Interactive map 
  5. Audio file
  6. Raw image
  7. Low-definition video
  8. High-definition video
  9. Integration of social network content
  10. Animated gif
  11. Animation 

What is the environmental impact of opening or not opening links in another tab?

Reading Time: 5 minutes

Introduction

Older users may remember a time when browsers didn’t yet offer the option of opening content in multiple tabs. The emergence of this possibility has given rise to a debate that has yet to find a definitive answer: should links be opened by default in another tab or not?

Key numbers

The results obtained for opening links in another tab are summarized as follows:
The overall impact is 1.9 gCO2eq, 0.4 L water consumption and 4.1 cm2 land use.

The results obtained for opening links in the same tab are summarized as follows:
The overall impact is 1.8 gCO2eq, 0.3 L water consumption and 3.9 cm2 land use.

On a website, the default behavior when a link is clicked is to open it in the tab the user is already in. To return to the initial page, the easiest thing to do is to use the browser’s (or your phone’s) backspace function. This may be seen by some Internet users as an inconvenience. There are at least two possible solutions:

  • On the user’s side: hold down the Ctrl key to open the link in another tab, or click with the mouse wheel.
  • For developers: force the link to open in a new tab (via the target=”_blank” attribute or via JS). However, this means leaving the user no choice. It is therefore advisable to notify the user of this behavior (Opquast Rule 141 – Users are notified of new window openings). Otherwise, this may lead to accessibility problems.

In all cases, target=”_blank” must be accompanied by additional attributes for security reasons, as follows:

<a href=”https://greenspector.com/fr/le-petit-bout-de-la-lorgnette/” target=”_blank” rel=”noopener noreferrer”> 

The “noopener” (https://html.spec.whatwg.org/multipage/links.html#link-type-noopener [EN]) and “noreferrer” (https://html.spec.whatwg.org/multipage/links.html#link-type-noreferrer [EN]) values ensure that context information is not passed on when the link is clicked. Seemingly redundant, they are mentioned here together to support some (very) older browsers: https://stackoverflow.com/a/57630677 [EN].

The discussion about whether or not to open links in another tab (or on another page) is not new, and the arguments are numerous. Many of them can be found here: https://www.badsender.com/en/2023/01/27/target-blank-links-email/

From the point of view of environmental impact, there is also room for discussion. Opening the link in another tab could lead to an unnecessary multiplication of open tabs, thus increasing the environmental impact (by putting more strain on the terminal). Conversely, opening the link on the same page could lengthen the user’s journey on the original site, risking a loss of progress after going back (entering information, reading an article in progress, etc.).

As always, it’s important to get back to the real reasons behind this choice, especially if it’s a question of improving your own site’s statistics by keeping it open while the user explores other links (which is not a good way of doing things).

In the absence of an ideal answer to this problem, we decided to use measurement to shed further light on the issue.

Methodology

We’ve created a test page that’s as simple as possible. It features two links leading to the same page. The first opens in the same tab, the second in another tab.

For the measurement, two GDSL scripts were created to automate the route and take the measurements:

  • A script that consists of clicking on the link that opens in another tab and then returning to the first tab (three times in a row)
  • A script that consists in clicking on the link that opens in the same tab and then going back via the browser directly (three times in a row)

Each of these routes follows the same stages :

  1. Load test page
  1. Pause for 30s on test page
  1. Load destination page (click on link)
  1. Pause for 30s on destination page
  1. Going back
  2. Pause for 30s on original page

Steps 3 to 6 are repeated 3 times each, in this order.

In all cases, the link destination page is the same. The idea here was to choose a lightweight page with enough content for the measurements to be meaningful. We therefore chose an article from the Greenspector blog: https://greenspector.com/fr/le-petit-bout-de-la-lorgnette/ Beyond the first iteration, the cache limits the number of requests made by relying on elements stored on the client side (as with any web page, provided it is correctly configured).

The measurements are performed on the latest version of the Chrome browser on a Samsung S9 phone with brightness set to 50%, in WIFI. Ten iterations of measurements were performed for each script.

Measurements were taken between August 24 and 29, 2023. Following these measurements, a campaign dashboard (aggregating data from Greenspector tools) was generated, in particular to be able to compare measurement stages and calculate an overall Ecoscore based on Performance, Transferred Data and Energy scores.

For the environmental projection, the following assumptions are made:

  • 100% of users and servers in France
  • 100% complex servers
  • 51% of users on smartphone, 3% on tablet, 46% on PC (average stats for France)

Results 

The results obtained for opening links in another tab are summarized as follows:

The overall impact is 1.9 g CO2e, 0.4 L water consumption and 4.1 cm2 land use.

The results obtained for opening links in the same tab are summarized as follows:

The overall impact is 1.8 g CO2e, 0.3 L water consumption and 3.9 cm² land use.

Initially, therefore, it appears that opening links in the same tab is slightly more advantageous from an environmental point of view. In particular, it appears that the path is much shorter when opened in the same tab. In fact, it’s easier to go back via the button on Android phones than to go through the list of open tabs.

Presumably, keeping tabs open has a greater impact on the phone’s battery. Let’s take a closer look.

The following diagram shows the energy consumption of the various stages:

Blue indicates the opening of links in another tab. Black indicates opening in the same tab.

Stages of the journey with links opened in the same tab are almost systematically less impactful. In particular, this is true for pause steps, which seems to confirm the impact of multiple tabs opened when pausing on the current tab. This also reflects the fact that going back is much easier via the phone button than via the tab list.

For all the steps measured, very little data is transferred. However, for users who need to go back, it’s important to integrate the bfcache (https://web.dev/bfcache/ [EN]). This browser optimization makes backtracking and forwarding smoother.

Conclusion 

Based on the environmental metrics and projections for the test case chosen here, it seems more advantageous to open the links in the same tab by default. On the other hand, it’s important to bear in mind that the user mustn’t lose progress in this way (e.g. while typing or reading a long page). What’s more, the bfcache must be correctly implemented to allow subsequent backtracking. In this case, the user is free to open the link in another tab using the shortcuts provided. However, it is essential to provide information on the behavior of links if this is not the default behavior (as well as the language of the destination page if it differs from the original page). In conclusion, let’s not forget that accessibility and quality (as implemented via the Opquast rules) must remain a priority when integrating links.

Publication of the W3C Web Sustainability Guidelines

Reading Time: 2 minutes

W3C

The W3C (World Wide Web Consortium: official website https://www.w3.org/) is an organisation that defines web standards (such as the technical elements governing the operation of HTML, for example) and guidelines. It was founded by Tim Berners-Lee in 1994.

As part of the Responsible Digital Initiative, the W3C is best known for its publication of the WCAG (Web Content Accessibility Guidelines: https://www.w3.org/WAI/standards-guidelines/wcag/). These rules for web content accessibility are a worldwide reference. In particular, they serve as the basis for the RGAA (Référentiel Général d’Amélioration de l’Accessibilité: https://design.numerique.gouv.fr/accessibilite-numerique/rgaa/ ), which in turn serves as the basis for the introduction of regulations on this subject in France.

Providing a framework for digital sobriety

Digital sobriety and the eco-design of digital services are becoming increasingly important, but it is difficult to define the framework for their application. In France, the legislative context is becoming increasingly clear, in particular via the REEN law (Réduction de l’Empreinte Environnementale du Numérique: https://www.vie-publique.fr/loi/278056-loi-15-novembre2021-reen-reduire-empreinte-environnementale-du-numerique ) and the RGESN (Référentiel Général d’Ecoconception de Services Numériques: https://ecoresponsable.numerique.gouv.fr/publications/referentiel-general-ecoconception/ ).

We will be coming back to this legislative framework in the very near future to provide you with a summary and outlook.

Nevertheless, we were very enthusiastic when W3C announced its intention to work on the subject of ecodesign in a concrete way (https://www.w3.org/community/sustyweb/2022/04/19/sustainability-recommendations-working-group/). I was lucky enough to take part in this working group (with Thierry Leboucq). The aim was to produce guidelines so that standards could subsequently be defined. It was an opportunity to meet some great people and compare digital sobriety practices with experts from all over the world. Well done to Tim Frick and Alexander Dawson for overseeing all this, and to all those who contributed to the sub-groups dedicated to specific themes:

  • UX Design
  • Web Development
  • Hosting & Infrastructure (which I monitored)
  • Product & Business Strategy
  • Metrics

The official release of a first version of the Web Sustainability Guidelines opens up this work to everyone: https://www.w3.org/community/sustyweb/2023/09/07/web-sustainability-guidelines/. It contains 93 recommendations and 232 success criteria. All this is in line with the GRI standards (Global Reporting Initiative: https://www.globalreporting.org/how-to-use-the-gri-standards/gri-standards-french-translations/ ).

What happens next?

The publication of the WSGs represents a historic milestone in the application of digital sobriety to the web. But let’s not forget that this is just the beginning. The main purpose of this publication is to gather feedback from experts and then to see how this framework can be defined even more precisely. It is also hoped that this work will serve as a basis for wider adoption of the subject, so that countries can use it to define a legislative framework. This foundation also appears to be essential for training and raising awareness on the subject, but also as a support for initiatives to reduce the environmental impact of websites.

At Greenspector, we intend to continue contributing to these guidelines, in particular by providing feedback based on our practical experience of the eco-design of digital services. Very soon, these guidelines will be incorporated into the best practices on which we rely on a daily basis, as well as into the eco-design awareness-raising sessions that we offer.

In this way, we will be able to see in more detail how WSGs can be reconciled with existing reference systems (mainly RGESN and RG491).

What is the environmental impact of the top 30 websites of the French daily press?

Reading Time: 10 minutes

– 2023 Edition –

Many questions are being asked today about the environmental impact of the press and digital media. Beyond the contents, advertising and data tracking are integrated both to satisfy the economic requirements of a free or semi-free model and to better know the user to better serve him (center of interest). Moreover, the press and media often use rich content to illustrate their articles (videos, images …). All this often implies an overconsumption of digital titles at each passage of a reader. 

A year ago, we have realized a ranking of the carbon impact of the top 100 most visited websites of the French daily press on mobile. Its objective was to quantify the impact of the online press via mobile. Indeed, this impact is becoming more and more important every year.

For this new ranking, we decided to reduce the study to 30 sites and to evolve our approach, taking into account one article per site (dated 13/04/2023) in addition to the homepage. This is all the more interesting because users spend most of their time on the articles. 

We based ourselves on the ranking of the ACPM site (made according to last year’s filters: Fixed Web Site News / News Information / General Information). The benchmarks were performed with a Samsung Galaxy S9 without Sim card and with 3 iterations. The measurements were performed in March and April 2023. 

Condensed Results

Less impactful homepages :

  • Le Monde
  • Actu.fr
  • Ouest-France

Most impactful homepages :

  • Rfi
  • france24
  • L’Est Républicain

Less impactful articles pages:

  • Huffingtonpost
  • Actu.fr
  • France Info

Most impactful articles pages :

  • Sud Ouest
  • la Nouvelle République
  • Rfi

Here is the list of sites on which the study is based:

INSERT TAB

Discover the Greenspector analysis methodology.

Limitations of the measure

One of the problems encountered concerns the methods of access to content. Indeed, some articles are much shorter because their complete access is paying. 25% of the sites in the ranking are concerned. This influences the results of the benchmark for these websites by indirectly benefiting sites that restrict access to their content. 

Also, some sites are only partially loaded until the user has made his choice for the data collection consent popup (RGPD). This does not necessarily prevent scrolling on the page. More generally, we can only regret that such artifices are detrimental to the user experience.

In particular, this is what we see on the first ranking for home pages (Le Monde).

Here is for example the RequestMap (a tool created by Simon Hearne) for lemonde.fr with the requests seen by the measurement tool (Greenspector, Webpagetest or other) we can see that there are few requests and third party services at first sight :

Here is for comparison the complete RequestMap for lemonde.fr, built from a HAR file obtained via Chrome after acceptance of all cookies by the user:

It thus appears that the data transferred and requests made are multiplied after the Internet user’s consent has been obtained. This phenomenon is observed on a large number of similar sites. Here are some additional resources on online advertising, closely related to the online press:

What we have to remember today is that the results of the measurements proposed here (and via other tools available elsewhere) offer a sometimes truncated vision of the reality of online press sites. However, we already have here a good overview of what could be improved on some of these sites and their respective impacts.

Analysis of the results at the global level

For the home pages of the 30 sites measured, the average carbon impact per page and per minute is 0.44 gEqCO2. This average is 0.42 gEqCO2 for the articles.  

On the analysis of home pages, 19 sites are positioned below this average. While on the measurement of the articles, 23 sites are below. 

We noticed a difference in results between the 7 sites offering restricted access to their articles (sometimes paying or obligation to create an account to continue reading) and the 23 others where the articles are 100% accessible.  

The home pages with restricted access have an average impact of 0.42gEqCO2. For the free access sites, the average impact on the home pages is 0.44 gEqCO2.

This difference is explained by the display of numerous advertisements on some sites with free content, which considerably weigh down the pages.

Due to a richer content, the home pages consume in general slightly more than the articles (we notice an increase of more than 0.02 gEqCO2 on average).  

Here is a synthesis of the different metrics measured on the home pages of this ranking of the Press websites consulted on mobile :

MetricsAverage Minimum  Maximum  
CO2 impact per page / min en gEqCO2  0.44 0.26  1.10  
Ecoscore Greenspector  54  31  72  
Energy consumed in mAh  7.2  4.58  21.98  
Data exchanged en Mo  2.63  0.68  7,27  
Number of web requests 76 30  169  

If we compare these results with our previous analysis on homepages, we can see a slight degradation of the results with an average of 53 for the ecoscore against 54 today. On average, the three metrics of data energy consumed and number of requests have decreased. The energy consumed by the homepages went from 4.22 mAh on average to 7.2 mAh, the data consumed went from 2.31 MB to 3.63 MB, and the number of requests from 78 to 76.

Here is a synthesis of the different metrics measured on the article pages of this ranking of press websites consulted on mobile:

MetricsAverageMinimum  Maximum  
CO2 impact per page / min in gEqCO2   0.37  0.21  1.19 
Ecoscore Greenspector   58  24  75 
Energy consumed in mAh   7.15  4.62  21,26 
Data exchanged in Mo   4.52  0.58  31.42 
Number of web requests 66 26 213 

For the study, these articles were compared with articles coming from the same press sites and dating from 05/07/2022. The result is quite negative because we can see on average a lower Ecoscore on the recent articles with a score of 58 contrary to 59 for the articles of 05/07/2022. The energy consumed by these pages has also increased from 6.58 mAh in July 2022 to 7.15mAh for the articles of April 2023. Similarly, the volume of data exchanged increased from 3.46MB in July 2022 to 4.52MB for the April 2023 articles. On the other hand, we can observe a lower CO2 equivalent impact for the April 2023 articles with a score of 0.37 gEqCO2 and 0.42 gEqCO2 for the July 2022 articles. Similarly, we can see an improvement on the number of requests exchanged from 68 on average for the July 2022 articles to 66 for the April 2023 articles.

Home pages

Top 3 (least impactful home pages)

1st

Le Monde 

Le Monde gets the first place thanks to its efforts to reduce the environmental impact of its website. We notice a good application of sobriety practices, especially on the management of images. Also, data and requests are optimized thanks to the progressive loading of the page. Thus, the content is loaded only when it becomes visible. That said, the site can still be improved in terms of third-party services that are not detected in the measurements and yet are very present. Indeed, the collection of data after the acceptance of cookies increases considerably the number of requests to third party services (see above) and has previously raised concerns about privacy and security.

2nd
Actu.fr 

The web page uses progressive page loading. This allows to limit the number of requests. Moreover, actu.fr uses mostly the right formats for its images. However, actu.fr is invaded by advertising. This reduces the accessibility for the users and increases the number of requests considerably. As for the first ranking, the measurements only took into account what happens before cookies are accepted.

3rd
Ouest-France 

Ouest- France loads its page progressively and uses a very good image format, like AVIF or Webp. However, advertising increases the number of requests, thus increasing the environmental impact of the site. The measurements here are also limited to what happens before accepting cookies.

Conclusion for the top 3 homepages

We can notice that the top 3 use the best practices of progressive page loading and image formats. However, the measurements were done via the cookie page and, if we take a closer look, we can see that these sites use a lot of ads. This considerably increases the number of requests to third party sites and therefore the environmental impact.

Flop 3 (most impactful homepages)

Rfi 

The site has a lot of images, one for each article highlighted. However, we emphasize the good practice of the webp image format. The fonts are not standard fonts, which increases the environmental impact of the site. In the end, the number of requests is considerable and the errors displayed in the console are numerous.

RequestMap of the rfi.fr homepage
France 24 

The structure and the findings are similar for this page.

We are indeed, as for the site of France24 on sites resulting from France Médias Monde thus with a similar architecture and a similar structure.

L’Est Républicain 

The site takes a long time to fully load because it makes a lot of requests to third party sites when the page loads. Moreover, it launches videos automatically. The content of the page is very long compared to other sites, which explains its ranking.

Conclusion for the flop 3 homepages

The main problem of the sites in the flop 3 is the number of requests. Especially made within the site itself and can slow down the loading of the page. In addition to that, we can deplore a lack of sobriety and sometimes even the automatic launch of videos.

Let’s move on to the articles.

The articles

Top 3 ( Less impactful articles)

1st

Huffingtonpost 

The general sobriety of the site is a good point that earned it its first place in the ranking. The site uses little video or image content in its articles and gradually loads the content on its page. But it is especially that unlike many press sites, Huffingtonpost does not have ads on its articles, and this is verified at the level of its third party services which are very few. This strongly reduces the impact of the site. Besides this, the font format used is good, but the site uses too many. It also generates too many files in JavaScript format used to format the site. Finally, there is a very impactful point which is to load a video and launch it automatically on a page. Thus, even the first place of this ranking can still strongly reduce its environmental impact.

2nd
Actu.fr 

We find here the same optimizations as on the home page. However, the page is largely occupied by advertising, including a video that launches automatically. This last point is particularly problematic from the point of view of environmental impact and accessibility, in addition to harming the user experience.

Underneath the article, there is a lot of additional content, mostly advertising. There are more than 40 thumbnails leading to internal and external articles. Despite this, the majority of the requests are internal, which reduces the use of third-party services.

3rd
France Info 

The article is at first sight quite sober, but the end of the article is made of a lot of images for the article recommendations. This number of images can easily be reduced but the images have at least the good point to be in Webp format which is among the least impacting image formats.

What allows to give this place to this article is the number of requests. Indeed, the site has few requests before the recommendations of articles compared to other press sites and loads gradually its page. Considering the number of requests, the number of third party services is rather significant but it remains reasonable compared to other news sites.

Conclusion for the top 3 articles

The articles in this Top 3 have in common that they don’t use many third party services and that they load progressively the content in order to limit the number of requests. The articles are rather sober but the additional content of recommendation weighs down these article pages.

Flop 3 (most impactful articles)

Sud Ouest 

This article is long unlike many other articles in the ranking. However, if it is the most impactful of the ranking, it is because it uses a lot of images in JPEG and PNG format, JS and CSS scripts for formatting, fonts, and contains audio files, and ads. The site is not at all sober and uses a lot of requests and third party services.

La Nouvelle République  

The article contains a lot of images, scripts and links to other articles. These practices add to the environmental impact of the site. With this, the site uses a lot of requests and third party services. This increases the environmental impact but also reduces the performance of the site which takes longer to load. A good point to raise is the number of fonts used which is 1 and in woff2 format.

Rfi 

The article is sober because of its subscription system which hides a good part of it. There are few images but most of them are in png format which is not necessarily ideal from an efficiency point of view. However, we would like to point out that the most impactful image is in Webp format, which is one of the best compression formats. We find here a lot of requests and the multiplication of third party services.

Conclusion for the flop 3 articles

The main problem of the sites in the flop 3 is the number of requests, especially towards third party services. We can also add the lack of sobriety of these pages and question the functional needs.

Conclusion

When we look at the environmental impacts of online press sites, we can see that good efficiency practices are already widely adopted, especially regarding the management of images (which remain an essential vector to attract the Internet user and support the subject).

However, there are still efforts to be made to be more sober, in particular concerning the use of third-party services but also the use of video (and to a lesser extent fonts). As seen above, this is closely linked to the business model behind these newspapers. The model in question, beyond its considerable environmental impact, demonstrates once again its negative effects on the user experience, notably through the collection of personal data and the security risks that this may entail.

It is also worth noting that improvements to reduce the environmental impact of these sites would be all the more effective as some of them are read several hundred thousand times a day.

It would also be interesting to take a closer look at the accessibility of the sites in question (if this has not already been done), as this is fundamental for everyone to be able to access information related to current affairs (which is an essential part of a citizen’s life).

Best Practice: Limit the number of third-party services

Reading Time: 5 minutes

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:


Optimising your website for print

Reading Time: 2 minutes

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.   

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. 

Analysis of the 10 sites nominated for mobile excellence by Awwwards

Reading Time: 4 minutes

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.

categories awwwards

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 

Betterup.com

landing page betterup.com

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):

RequestMap

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.

Datagrid.co.jp

landing page site datagrid.co.jp

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

screenshot results solution

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.

Webflow.com

landing page site webflow.com

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 

Ladispensadelchianti.it

landing page site ladispensadelchianti.it

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

Ingridparis.com

landing page site Ingridparis.com

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.

Azzerad.com

landing page site azzerad.com

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

versionecoscoreCO2 impact (gEqCO2)requestsEnergy (mAh)Data exchange (Mo)CPU (%)Water footprint (Litres)Surface footprint (m2)Memory (Mo)
hskr.ru600,30235,451,822,710,050,61682,42
ladispensadelchianti.it750,31564,731,571,140,050,55511,82
ingridparis.com650,36385,543,592,110,060,63632,50
azzerad.com630,38755,591,981,500,060,65735,91
marcoambrosi.salon520,41475,814,752,440,060,67701,52
once-lifetime.com450,45565,736,372,240,060,66734,36
grege-interieurs.com390,642611,206,805,060,111,25746,73
webflow.com330,671796,347,173,210,090,80863,02
lamalama.n420,71219,7113,424,710,101,09828,77
blueyard.com560,72508,0215,132,560,100,92575,93
datagrid.co.jp290,801289,3411,023,150,111,10671,31
betterup.com270,8112111,287,853,510,121,31862,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. 

Which image format choose to reduce energy consumption and environmental impact?

Reading Time: 4 minutes

It is not easy to choose the right type of image to reduce environmental website impact. We can focus on image size or on display performance (are they two related ?). This may be the right approach. However, an energy measurement will be a more precise element if you really want to measure the actual consumption and move towards reducing the environmental impact.

in 2017 we carried out a benchmark of the new WebP format compared to JPEG and PNG. Support for Webp in browsers was beginning. In addition, AVIF, a promising image format, has arrived.

Here is an updated study.

Methodology

As a test image, we used the one proposed by Addy Osmani in an article on Smashing Magazine.

The images were generated to have the same perceived quality. Compression qualities are therefore different between formats.

Image 1 : https://res.cloudinary.com/ddxwdqwkr/image/upload/v1632192015/smashing-articles/206-webp-ayousef-espanioly-DA_tplYgTow-unsplash.webp

  • Test 1 Default quality given by Sqoosh (https://github.com/GoogleChromeLabs/squoosh/) : JPEG original (560KB), JPEG@q75 (289KB), WebP@q75 (206KB),  AVIF@q30 (101KB)
  • Test 2 Target quality JPEG@q70 : JPEG (323KB), WebP@q75 (214KB), AVIF@60 (117KB)
  • Test3 Low quality : JPEG@q10 (35KB), WebP@q1 (35KB), AVIF@q17 (36KB)2

Image 2 : https://res.cloudinary.com/ddxwdqwkr/image/upload/v1632080886/smashing-articles/q50jpg.jpg

  • Test1 : Target quality of 45k : Original (442kB), JPEG@q50 , WebP@q54, AVIF@q36

Image 3 : https://res.cloudinary.com/ddxwdqwkr/image/upload/v1632082138/smashing-articles/q10-25.jpg

  • Test 1: Target quality of 25kB : Original (716KB),  JPEG@q10 , WebP@q5, AVIF@q19

Measurement protocol

  • We display the images one by one in a Chrome browser on a real device (Samsung Galaxy S10).
  • We use Greenspector tools to measure energy consumption and other metrics (CPU, performance…).
  • We perform a measurement throughout the display of the image and this 3 times to have stable measurements.
  • The measurements are made under different Wifi, 3G and 2G network conditions.

Results

On image 1 for test 1, we obtain the following energy consumption measurements:

Consommation d'énergie pour l'image 1

If we observe more closely the behavior in WiFi, we can better appreciate the differences in consumption with the confidence interval.

Consommation d'énergie pour la wifi avec intervalle de tolérance

In Wifi, the consumption is relatively similar between the types of image. JPEG consume little more than other format. It is followed by WebP format and then by AVIF.

In 3G and 2G, the difference in consumption is noticeable and AVIF consumes less energy than Webp.

These behaviors are explained by the smaller file sizes in AVIF and Webp.

On image 2, the behavior is the same:

Comparaison de consommation d'énergie pour l'image 2 entre la wifi, la 3G et la 2G

In image 3, there is almost no difference between the formats. The image is small and we find ourselves in an operation close to wifi (fast transfer):

Comparaison de consommation d'énergie entre la wifi, la 3G et la 2G

The behavior is the same with image 2 which is at 45kB:

Consommation d'énergie pour l'image 2 en wifi, 3G et 2G

This is the same behavior for image 3:

Consommation d'énergie pour l'image 3 en wifi, 3G et 2G

It is necessary to monitor the new formats (JPEG XL, Webp2…) as well as the optimization of the algorithms because even if the gains in size are significant, the decoding processing could potentially gain even more efficiency. Indeed, here is for example the CPU processing for image 1 on test 1, where AVIF consumes more CPU than the other formats.

Traitement CPU pour l’image 1

Recommendations:

In any case, it is necessary to compress images with lower quality, regardless of the image format. A quality >85% is useless. Energy consumption is reduced by a factor of 2 for qualities that remain high, and reduced by a factor of 6 for low qualities.

Even if the energy consumption is relatively similar between the formats, the gain provided by AVIF and Webp is much greater for less efficient connections. The choice of AVIF and Webp will be preferable because the users are not connected with broadband! In addition, the gain in terms of data exchanged will be interesting to limit the overall size of the site.

The choice between Webp and AVIF is not easy and will depend on the type of images and visitors. Additionally, Google is working on WebP version 2, and formats like JPEG XL are coming to compete with AVIF. However, considering the benefits of Webp other than the environmental impact, we recommend the use of WebP more.

For information, here is the taking into account of the AVIF format in the browsers:

Pour information, voici la prise en compte du format AVIF dans les browsers :

As well as the Webp format:

Pour information, voici la prise en compte du format webp dans les browsers :

In any case, optimize your images, compress, reduce the size and lazy-load!

Does a sober site have to be ugly?

Reading Time: 8 minutes

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:

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

RankingURLEcoscoreEnergy (mAh)Data (Mo)Requests HTTPCarbon Impact (gEqCO2)Water Surface (Litres)Land use (m²)
1https://kuroneko.io/fr/944.240.1420.180.040.46
2https://lesraisonnees.co/944.080.21110.190.040.45
3https://brawcoli.fr/924.080.13110.190.040.45
4https://solar.lowtechmagazine.com/924.350.35170.210.040.48
5https://www.pikselkraft.com/914.350.1130.190.040.48
6https://amap-chelles.net/904.590.3440.20.040.5
7https://primitive.wildandslow.fr/904.10.16110.190.040.45
8https://productfornetzero.com903.990.17140.190.040.44
9https://www.mountain-riders.org/904.310.23190.210.040.48
10https://fairness.coop/894.280.09140.20.040.47
11https://jeudi.am/894.470.15200.220.040.5
12https://www.boavizta.org/894.260.2790.20.040.47
13https://lowtechlab.org/fr874.090.2260.180.040.45
14https://www.gov.uk/874.350.24150.210.040.48
15https://www.treebal.green/874.190.8170.210.040.47
16https://www.boutique-natali.com/864.840.44250.250.040.54
17https://designersethiques.org/854.060.28170.20.040.45
18https://oceanfifty.com/854.630.42140.220.040.51
19https://anelym.fr/844.640.17230.230.040.52
20https://lowimpact.organicbasics.com/eur844.650.74330.260.040.53
21https://www.europeansleeper.eu/en844.330.73310.240.040.49
22http://www.biocoopmontreuil.fr/834.750.53230.240.040.53
23https://www.licoornes.coop/824.370.17280.220.040.49
24https://empreintedigitale.fr/814.261.14260.240.040.48
25https://www.international-alert.org/814.670.83280.250.040.53
26https://www.laboutiquedupartage.fr/814.770.31200.230.040.53
27https://www.light-communication.fr/814.530.19130.210.040.5
28https://dolo.biz/fr/804.811.19150.250.040.53
29https://www.polybion.bio/804.881.02100.240.040.54
30https://zugvoegelfestival.org/794.260.52440.250.040.49
31https://pathtech.coop/774.550.6660.210.040.5
32https://dalkia.fr/764.280.89380.250.040.49
33https://sustainablewebdesign.org/764.881.02430.290.050.56
34https://palaeyewear.com/744.511.19780.320.050.54
35https://themarkup.org/735.271.13140.260.050.58
36https://www.ademe.fr/724.750.64260.250.040.53
37https://theadccawards.ca/715.460.2960.240.050.6
38https://flowty.site/636.910.35210.320.060.77
39https://heylow.world/626.140.35190.290.050.68
40https://becolourful.co.uk/606.150.23150.280.050.68
41https://www.ec-lyon.fr/595.060.81430.290.050.58
42https://www.wholegraindigital.com/588.650.65250.410.080.96
43https://daviddaumer.com/507.830.32130.350.070.86

For each of its websites, measured on an S7 smartphone (Android 8), the measurements were carried out using our Greenspector Benchmark Runner, allowing automated tests to be carried out. The measurements were taken at the end of June 2022.

Scenario details:
– Loading the website
– Page scroll
– Inactivity website in foreground
– Website inactivity in the background

Each measurement is the average of 3 homogeneous measurements (with a low standard deviation). The consumption measured on the given smartphone according to a wifi type network may be different on a laptop PC with a wired network for example. For each of the iterations, the cache is first emptied.

Find out how Greenspector assesses the environmental footprint of a digital service.

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:

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.

CAPTCHA and digital sobriety

Reading Time: 3 minutes

Security is an essential part of responsible digital. It is not uncommon to wonder how to protect your site, especially when you allow the possibility of sending content from your website: form (in particular contact), comments, etc. We know that a good part of the activity on the web is not due to humans (How much of the internet is fake?). Nobody wants to undergo an injection or other malicious act via their website.

At the end of the 90s, a miracle solution appeared in the form of CAPTCHA. Today, we find this component almost everywhere. You may need to copy difficult-to-read characters, click on photos with different elements, or click on a box to confirm that you are not a robot.

But what about its environmental impact? How to reconcile it with digital sobriety? That’s what we’re going to see here!

Looking for the best solution

The CAPTCHA meets the need to secure the data submitted by Internet users on your site.

The problem is that this way of doing things, among others with reCAPTCHA, is often laborious for users. Additionally, the user journey is longer, which increases the environmental impact of digital services when it does not result in abandonment altogether. Especially for users with disabilities who may find it impossible to complete the task. Not to mention the additional requests (CSS, JS and other iframes) necessary to integrate this type of component into a page.

Thus (and this is an essential point of responsible digital), the search for the soberest CAPTCHA takes accessibility into account first.

The accessibility of CAPTCHAs is a recurring problem, and there are many solutions. The main watchword here is not to use CAPTCHAs. Thus, form security should no longer be the responsibility of users. The subject has been previously discussed, among others at Orange.

There are several possibilities:  

  • Identify the entry time to exclude entries that are too fast
  • Use a filter (regular expression or other) to identify suspicious responses 
  • Randomly add a question that a bot will not necessarily be able to answer (“Which animal is barking?”, “How much is one plus one?”, “How many d’s in pudding?”, etc.). By leaving the possibility of refreshing the question in case of difficulty for the user.
  • The honeypot (to which we will return)

In the end, it is the honeypot solution that seems the most adequate in most cases. Detailed elsewhere on a Canadian government site, it consists of adding a hidden field in the form concerned. This field should be set to be filled out only by bots. It does this by hiding it from users and assistive technologies while giving bots code elements that make them think it’s a required field. This means that when validating the form, responses with this field filled in should not be taken into account. While the honeypot requires some thought for flawless implementation, it remains very light and elegant because it keeps the focus on the original goal: to prevent bots from sending data through a digital service. Rather than impacting the user to ensure that he is not a robot, we leave the user journey intact to focus on bot detection.

Conclusion 

The example of CAPTCHA proves to be representative of a responsible digital approach. In order to improve the security of a digital service, we are first interested in the accessibility of possible solutions (the free and widely used solution not being here again necessarily the best) to finally ensure via digital sobriety that the chosen solution does not degrade the environmental impact of the service.