Récemment, nous avons réalisé une analyse d’éco-conception en groupe de trois, portant sur un site web. L’objectif était de comprendre les principes de l’éco-conception et d’explorer les moyens de réduire l’impact environnemental d’un site web.

(On a fait ça dans le contexte d’un cours, même si j’aimerai bien avoir des initiatives intéressantes comme celle-ci)

Choix du site

Pour cette analyse, nous avons choisi de travailler sur mon Portfolio. Bien que cela puisse sembler un peu égocentrique, nous avons eu une idée intéressante : cloner le repository de mon site pour en créer un second, puis appliquer des pratiques “écologiques” afin d’améliorer sa note écologique.

Note écologique ?

Certains outils attribuent une note écologique aux sites web, basée sur des critères variés. Parmi ces outils, nous avons utilisé Eco-Index, qui a servi de base pour notre analyse.

Comme vous pouvez le voir, les résultats ne sont pas glorieux. Le site, que j’ai développé il y a un an, présente plusieurs lacunes : en plus d’être mal conçu, il ne respecte pas véritablement les principes de l’éco-conception (mis à part certains standards de codage).

Il est donc grand temps d’améliorer tout cela !

Mesurer son impact

Pour mesurer l’impact, EcoIndex se base sur trois points principaux.

Le poids de la page

Le poids c’est la taille d’une page après la compilation de votre projet, la médiane est de 2410 octets et la cible est 1024 octets. Malheureusement, mon pauvre Portfolio est de 3.249Mo, soit loin de la médiane et encore plus de la cible.

Complexité

Ici, on ne parle pas de la complexité du code, mais du nombre d’éléments sur la page. Moins on a d’éléments, moins de données sont demandées au serveur et donc moins de puissance est demandée au final.

Ici, mon Portfolio respecte amplement la cible (par pure chance).

Requêtes

Lorsqu’on charge une page, le client va envoyer une requête au serveur pour recevoir différentes données. Que ce soit le style de notre page (CSS), le script, etc…

Il faut faire en sorte de limiter ses échanges, car chaque requête consomme de l’électricité pour rien. Surtout si on peut combiner les fichiers entre eux et éviter de faire une requête pour chaque ligne de script.

Par où commencer ?

Le truc complexe, c’est savoir par où débuter, qu’est-ce qu’il faut retirer. Je peux évidemment retirer toutes les images, styles, et script de mon site mais ça serait idiot.

La police

Un truc simple à faire est de changer de police, le web possible des polices par défaut qui ne nécessite pas de chargement externe et ainsi pas de requête

Les images

Format

Changer de format est une méthode simple pour alléger les fichiers. Par exemple, j’ai converti toutes mes images de .png en .webp. Cela permet non seulement de réduire la taille des fichiers, mais aussi d’accélérer le temps de chargement du site.

Lazy-Load

Le lazy-load est un concept clé qui s’applique à divers éléments d’une page. Son principe est de charger ou d’envoyer des requêtes que lorsque l’utilisateur en a réellement besoin. Cela permet d’éviter de charger toutes les images d’un coup, notamment lorsque l’utilisateur ne passe que quelques secondes sur la page.

Les résultats 🥳🎉

Après tout mes efforts, j’obtiens un minuscule point de plus

C’est mort plus jamais j’essaye de faire de l’éco-conception.