[Tuto] How to build a low consumption website ?

2023/11/02 - How and why build a low consumption website.

1/ Why a low-energy site?

Energy growth and digital needs

Between 2013 and 2017, according to the Shift Project ¹, global digital energy consumption rose from 2,000 to 3,000 TWh per year, accounting for almost 14% of global electricity consumption. By 2025, digital energy consumption is expected to continue growing at an annual rate of 10%, and could reach between 5,700 and 7,300 TWh by 2025.

It should also be remembered that the digital sector is responsible for 4% of greenhouse gas emissions worldwide, and that digital usage accounts for 25% (while the manufacture of equipment such as network infrastructures, data centers and user terminals accounts for 75%). ²

On the question of energy consumption and the use of resources (numerous and necessary for the production of an ever-increasing number of hardware infrastructures - datacenters, networks, computers, smartphones), many bodies are calling for digital sobriety ³.

However, the exponential growth in resource and energy consumption (Yet another exponential growth…) can be explained by two factors:

• Firstly, the digital revolution has changed the nature of human relations. The possibilities of human expression, which pretty much define what makes us human, are now inseparable from the digital infrastructures of our society. This has resulted in the digitization of our lives, leading to the dematerialization of more and more social relationships: shopping, chatting, going to the movies, reading, getting information. Living disconnected is less and less possible, since it would mean excluding oneself from the vast majority of human activities.

• And secondly, the social trends of our globalized culture are driving an exponential growth in energy requirements per basic action. In other words, the energy required to view a website has increased 10-fold over the past 20 years. The same needs now require exponentially more energy than before to satisfy. So how did we get here?

The myth of immateriality

Digital technology is quite insidious. To move a table from the kitchen to the terrace, anyone can have a fairly simple idea of the amount of energy required, carrying the table is a bit too much for me alone, I’ll ask Lou for help. On the other hand, the so-called immateriality of digital technology can be understood as a break with this understanding of energy dependency. The streaming application works, but the user has no idea how much energy it consumes. All the more so since in our Western countries, where energy can still be considered cheap and accessible, and where our business models are based on advertising personalization, the question of energy has disappeared from the user’s mind. One consequence of this mythe of immateriality has been a growing propensity for instantaneous services (we expect to receive our e-mails instantly, for streaming videos to load without waiting…).

Little by little, therefore, the lack of knowledge and belief in the “immateriality” of digital services has led to an explosion in the power required to produce the services that are now digitized, and a loss of know-how based on the old technical constraints of storage and calculation capacities, now largely superseded by technical advances in the sector.

Re-introduce efficiency at the heart of digital developments

When it comes to the energy and material needs of the digital sector, stopping the exponential madness of growth must involve restructuring digital activities around the following issue:

Re-introduce efficiency at the heart of digital developments!

Efficiency aims for a balanced equation between the satisfaction of a need and the expenditure of resources required to satisfy it. Its means of action therefore concern both the reduction of resource requirements and the reduction of actions incompatible with digital sobriety. On the first point, the levers are technical and numerous. On the second point, the levers are more social, and stem from a poor understanding of digital resource requirements. For example, the addition of numerous features, cookies and tracking by designers makes websites much heavier than they used to be. It’s time to rethink the way we write and share digital content.

This article presents the means used during the creation of this website to minimize its energy requirements.

2/ Creating a low-energy website

A/ A site of intermediate complexity

Neither of us had any prior web design skills. Our knowledge of html and css was extremely rudimentary. However, we were determined to learn through this blog project.

Mainstream website-building platforms (like Wordpress) are double-edged. On the one hand, they make it easy to create web content, but on the other, they make the way in which information is arranged, processed and manipulated invisible. What’s more, digital sobriety is rarely one of these platforms’ considerations. However, writing a website from scratch in css, html and js was out of the question. Although it would have been possible, the effort involved was just too much. For the sake of accessibility, we decided to explore other methods, which could be described as intermediate level… These require more rudimentary programming skills, but also an understanding of how content is created.

On the other hand, our research into the creation of a low-energy site has made us aware of several levers. Gauthier Rousshile, in his article on creating a low-tech site⁴ classifies them in 3 categories:

• Reducing impact on usage
• Reduced data transfer
• Reduction of material needs (electricity, equipment…)

This mid-level research, along with the desire to reduce our blog’s ecological footprint, has resulted in three key principles:

• Static sites.
• The Markdown language.
• The concept of dithering.

B/ Static sites?

Static site VS dynamic site

One of the trends in today’s sites is that they are designed to be dynamic, meaning that every time someone logs on to the site, the page is generated on the server side from the code and information that define it. This means that with each connection request, a certain amount of energy is consumed to generate the website. This makes it possible to build more personalized pages (by generating targeted advertising, for example, or to manage the display of a database according to the filter selected by the user), but it’s fair to say that if your needs don’t clearly express the need for a dynamic page, then you should opt for a static page. A site page is said to be static if it is generated only once, the page being stored on the server side. During a connection request, the static site can directly redirect to the page file. So, for 300 visits, a dynamic site will generate 300 web pages, whereas a static site will have generated just one!

Creating a static site

Inspired by low-tech sites such as low-tech magazine⁵, we discovered static site generators. The principle is simple: create a rudimentary structure to write content and generate a static site. In general, creating a site involves :

1. Choosing and installing a static site generator (an application, often a CLI for the curious).
2. Choosing a theme.
3. Install the theme, customize the theme by following the theme wiki, or even modify the theme with css and markdown additions for the more motivated.
4. Write content (in markdown).
5. Generate the site.

In other words, all you need is a file manager and a text editor to generate your website! No html or css skills required. Just a little reading of your theme’s documentation: the most detailed ones explain how to modify a number of parameters from a single config.toml file: parameter: true or parameter: false often suffice to indicate the state of a parameter. Of course, your choices are quickly limited: if you want total website customization, you’ll have to create your own CSS classes (which you’ll write in base.css or something like that…)… All you have to do is use them when writing your content.

Writing the content of your site is by far the simplest part of the process, so I invite you to read the following section on markdown language for a more in-depth look!

We tried out Pelican , Hugo , Zola which are three powerful and easy-to-use generators. We chose Hugo because we found the monochrome theme closest to our needs and desires.

C/ Markdown language

Structure of static site generators

The themes offered by the Hugo, Zola and Pelican generators make it easy to create a website structure. You then customize it and add your own content. For Hugo, for example, the html code is in the layout file, the css code in assets and the blog pages in content. Yes, the content of web pages (articles, blog pages, etc.) are stored in a separate folder, and the Markdown language makes them almost entirely free of lines of code. All you have to do is write your articles in the text manager of your choice (a simple notepad or more complete applications such as Obsidian, Joplin or Atom), save them as .md files and place them in content. Hugo’s static site generator will then transform the previous .md into a complete html page. Of course, a few writing rules are necessary, but nothing too complicated (see next section.)

Customizing our blog required a deep dive into the html and css files of the chosen theme. This is optional, as often, for many customizations, themes offer documentation detailing how to transform colors, titles, pages… However, we wanted to create our own theme from a basic one.

Writing in Markdown

Static site generators simplify the writing process. Pages are written in markdown :

Markdown is a markup language designed for simple, efficient markup while maintaining maximum accessibility and readability. In other words, it’s an easy-to-read markup language in its unformatted form. This language enables simplified, comprehensible writing of our website’s content.

For example:

# This is title 1 in markdown

## And this is title 2

** This text is in bold ***

Many mardown wikis exist, here’s a didactic one

D/ Images and dithering

The increasing weight of web pages is largely due to the increasing size of images. Several methods exist to reduce the size of images. One of them, dithering, was a source of inspiration for our visual identity. Its retro feel caught our eye. The principle of dithering also illustrates the notion of digital efficiency - “doing better with less”.

The principle of dithering is to recreate the illusion of “color depth” in images with a limited color palette. Colors not available in the palette are approximated by a diffusion of colored pixels from the available palette. The human eye perceives the diffusion as a mixture of the colors it contains. This reduces image size by minimizing the number of pixels and colors. This process can reduce the size of an image by a factor of 5 to 20. It’s easy to go from a 4 or 5 MB image to a 50 to 300 KB dithered image! And all this while retaining a totally acceptable visual accessibility and a unique retro style:

^Image dithered with DitherIt⁶

^Another palette example for dithering (Blue & Yellow)

^Original image

Dithered images, especially those with relatively few colors, are often distinguished by a characteristic grainy or speckled appearance.

From a computer science point of view, dithering is the deliberate application of noise to randomize discretization errors⁷. The article Ditherpunk pedagogically explores the computer secrets behind dithering.

3/ Publication of our blog

Once we’ve generated our content, we only need two things to make our blog accessible on the Internet: a domain name and a web host. On these points, many considerations can be made (concerning the ethics of hosting structures, their data protection policies, the quality of services, the extent of the means of management and administration of your site or, on the contrary, the conditioning of your activity…). We’ll leave these reflections for another article, to concentrate on today’s theme: low-energy sites.

Choosing your domain name

At first glance, there’s very little you can do to reduce consumption via your domain name. However, just like banks, the money you invest in your domain name will ultimately serve your convictions or work against them. So check that the structure that owns your domain name is transparent about the energy sources it uses, and that its values (its ethical commitments) include reducing the environmental impact of digital technology.

In our case, we chose Gandi primarily for its ethical vision of transparency, integrity and an open web accessible to all.

Choosing your web host

When it comes to the environment, a hosting provider has the choice of whether or not to use green energy, and chooses the lifespan of its infrastructures. So, if your host doesn’t care about sobriety, and decides with its partners to change its datacenters every 2 years to create economic value in order to continue extracting resources (Mouahaha), then your money may seem poorly invested.

So at Deuxfleurs , our hosting company and member of the CHATONS⁸, are transparent about the hardware they use as well as their stance on the subject of energy consumption (see their article here ).

Comments :