État de l'art

Présentation du domaine : Low Tech, Low Web, Outils CMS et Wiki

I. Généralités sur les sites Web et leur impact environnemental

1. Quelques chiffres sur les sites Web

Depuis des années, le nombre de sites Web augmente constamment et leur consommation croit également. L'explosion de la consommation peut s'expliquer par l'ajout de nouvelles technologies dans les pages Web comme des images de meilleure qualité, des intégrations de vidéo ou encore des animations graphiques. De plus, des plateformes comme Youtube, Twitch et Netflix ont un impact environnemental considérable.

En conséquence, la taille moyenne d'une page Web est passée de 0,45 MB en 2010 à 1,7 MB en 2018, soit une augmentation de 350% en 8 ans. D'après une étude statistique sur 3 milliards d'usagers, l'empreinte annuelle au niveau mondial du Web serait de 1 037 TWh d'énergie, soit l'empreinte de 40 centrales nucléaires, et dégagerait 608 millions de tonnes de gaz à effet de serre.

L'augmentation du volume de données échangées consomme donc de plus en plus d'énergie et réduit aussi la durée de vie des machines. Ces problèmes de consommation d'énergie et de matériel représentent aujourd'hui un véritable challenge.

Le Low Web, en référence à la low-tech, vise alors à réduire l'impact environnemental du Web tout en gardant la même expérience utilisateur et le même confort d'utilisation.

Notre projet LoWWeb Services vient proposer un service de (re)conception des sites en utilisant les principes du Low Web. L'objectif est aussi de se focaliser sur la création de sites frugaux (Wiki, CMS).

2. Mesure de leur impact carbone

Pour comprendre comment les sites Web créent leur impact environnemental, il est intéressant de se pencher sur le calcul de l'empreinte carbone ou l'EcoIndex de ces sites. L'empreinte carbone correspond à l'émission de gaz à effet de serre de ces sites et l'EcoIndex est un score sur une échelle de 0 à 100 établissant la performance environnementale des sites (consommation d'énergie, empreinte carbone, réduction des déchets).

Il existe plusieurs outils permettant de donner l'EcoIndex d'un site :

  • L'outil le plus courant a été publié par GreenIT, une association de 1901 spécialisée dans l'empreinte de l'industrie numérique regroupant des experts à l'origine de nombreux articles et mouvements, notamment dans le domaine de la "sobriété numérique". Il s'agit de GreenIT-Analysis, une extension pour navigateur permettant de mesurer par exemple le nombre de requêtes HTTP effectuées par la page, la taille des images chargées et le fait qu'elles soient bien utilisées ou non, éviter les redirections, ...

  • GreenIT a également sorti un site, plus adapté aux non-initiés du développement web : https://www.ecoindex.fr/. En entrant l'URL d'un site dans la barre de recherche intégrée, on peut trouver les informations sur le site, telles que les statistiques concernant sa taille, le nombre de requêtes ainsi que l'équivalent en consommation d'eau ou en émission gCO2e. 

  • Des sites comme Ecograder et Website Carbon permettent de calculer l'empreinte carbone d'un site. Voici des exemples de critères pris en compte par ces sites : volume de données transférées ou nombre de requêtes lors du chargement de la page, énergie moyenne utilisée pour la consultation de la page, source d'énergie utilisée par le centre de données, trafic du site, temps de chargement de la page, référencement de la page, utilisation d'animations Flash ou de ressources partagées (librairies JavaScript), site mobile-friendly...

II. Eco-conception Web

1. Bonnes pratiques

Internet est responsable de 3,7% de l'émission carbone mondiale. Développer les sites low-tech est donc un point crucial dans le low-numérique. Il existe donc différentes bonnes pratiques pour la création d'un site low-tech. Tout d'abord, il est important  de réduire la taille d'une page (utilisation de moins d'images, réduction de leur taille ou leur nombre). Cela peut aussi se faire en réduisant les couleurs des images importées et en n'utilisant pas de logo.

Conseils pour la création d'un site low-tech (article du low-tech lab :

Gestions des données : 

  • Limiter la collecte de données destinées à la revente, enlever la publicité et la revente d'espace publicitaire ;

  • Utiliser des logiciels installés directement sur le serveur afin de ne pas passer par un service tiers pour la gestion des données (par exemple, Matomo).

Quelques règles d'écoconception :

  • Réduire l’usage de la bande passante ;

  • Réduire le nombre de requêtes ;

  • Réduire la complexité de la page (DOM) ;

  • Réduction de la dette technique et de l’obésité logicielle ;

  • Capacité à maintenir le code le plus longtemps possible grâce à des bons choix techniques (choix des librairies, ...) ;

  • Créer l’expérience utilisateur la plus efficace et rapide possible.

Des choix techniques clés  :

  • Choix de l'hébergement ;

  • Choix du type de site : site statique/dynamique ;

  • Choix d'un gestionnaire de contenu.

2. Pages Low-Tech existantes

Il existe d'ors et déjà des sites low-tech, notamment un site de vente en ligne, organicbasics. Ce site a réduit les transferts de données de 70%, en comparaison avec son site internet classique. Pour se faire, il a suivi quelques bonnes pratiques : 

  • ne pas charger des images avant que l'utilisateur l'ait demandé ;

  • minimiser la consommation électrique des machines des utilisateurs ;

  • s'adapter pour refléter la quantité d'énergie renouvelable actuellement utilisée ;

  • informer l'utilisateur de l'impact de son comportement avec son moteur de recherche ;

  • ne pas utiliser de vidéos ;

  • charger les données localement sur la machine de l'utilisateur pour minimiser les transferts de données ;

  • compresser les données ;

  • charger uniquement les programmes, les frameworks et les cookies les plus cruciaux ;

  • limiter la luminosité émise par l'écran ;

  • optimiser et limiter les utilisations de polices personnalisées.

Le site a conservé sa page actuelle : sa page low-tech utilise environ 819kb de données, soit 7,56 fois moins que la page classique. En utilisant le site, il y a une économie d'environ 14,69g de CO2. De plus, le site informe de la consommation d'un mail, environ 4g de CO2 par mail.

III. Outils frugaux : Cms et Wiki

Un CMS est un outil de création de site web WYSIWYG qui permet de créer des sites web sans besoin de coder. Ils permettent des créer facilement des blogues, des sites de ventes en ligne et des wikis. Le leader du marché est aujourd'hui Wordpress avec 65,1% du marché. Il se base sur du PHP en back-end ainsi que sur un SGBD parmi MySQL ou MariaDB. La consommation majeure de cette solution est l'hébergement du site web. Une autre consommation problématique est l'affichage des pages dynamiques dû à l'interprétation du contenu par PHP. D'après une analyse de performance de temps de réponse aux requêtes, une page dynamique prend 360 fois le temps de chargement d'une page statique.

Bibliographie

Piste 1

Mise en place d'un CMS de site web statique avec une exigence sur les métriques d'éco-conception automatisée. En effet, comme vu lors de l'état de l'art, nous avons remarqué que la création de pages statiques est bien plus économe que celle de pages dynamiques, forcer les utilisateurs à créer des pages statiques peut donc être une solution de low numérisation.

Piste 2

Mise en place d'un CMS utilisant des langages plus économes en ressources que ceux aujourd'hui utilisées et utilisant des mécanismes d'éco-conception de façon automatisée. En effet, la seconde source de consommation de ces logiciels est l'interprétation des langages qu'utilisent les CMS. Un moyen de low-numérisation peut donc être de remplacer ces langages.

Glossaire

CMS : de l'anglais « Content Management System », système de gestion de contenu multimédia. Un CMS est une solution no-code ("sans coder") qui permet de créer un site web de façon autonome, simplement et modifiable à souhait. Les exemples les plus connus sont Wordpress, Wix, Joomla.

Wiki : Application Web qui permet la création, l'édition et l'illustration collaboratives de pages au sein d'un site Web.

WYSIWYG : de l'anglais « What you see is what you get », logiciel de création de site web sans besoin de coder.

SGBD : Système de gestion de base de données.