Nos bonnes pratiques pour l'éco-conception de notre site web

Chez Troopers, nous modifions notre site web pour limiter son impact environnemental. Pourquoi ? Le numérique est responsable de 3,2 %* des émissions de gaz à effet de serre (GES) en France. Le moyen d’y remédier ? L’écoconception est une des recommandations des experts pour réduire l'empreinte des services numériques.

Notre activité principale est la création d’applications et de sites web pour nos clients, il nous semble donc logique d’appliquer avant tout à nous-même cette démarche d’éco-conception. Dans cet article, nous nous concentrons sur l’éco-conception appliquée aux sites web.

Nous vous partagerons les outils pour évaluer l’empreinte d’un site internet, les bonnes pratiques à suivre ainsi que ce que nous mettons actuellement en place sur notre Ouvre une nouvelle fenêtresite ainsi ce qu’il nous reste à faire pour minimiser son impact.

Qu’est-ce que l’éco-conception web ?

Définition de l’éco-conception

Selon le ministère de la Transition énergétique, “l’éco-conception consiste à intégrer la protection de l’environnement dès la conception des biens ou services. Elle a pour objectif de réduire les impacts environnementaux des produits tout au long de leur cycle de vie.”

Dans cet article, on parle de l’écoconception appliquée aux sites internet qui est une démarche initiée par le collectif Green IT en 2009.

Avantages de l’éco-conception web ?

Opter pour l’éco-conception web présente différents avantages :

1. Bien évidemment, un site éco-conçu a une empreinte environnementale plus faible ;
2. Un site éco-conçu est un site plus performant, cela aura un impact positif sur le temps de chargement du site et sur l’expérience utilisateur ;
3. La performance du site va également affecter positivement le positionnement naturel de votre site sur les moteurs de recherche.

Évaluer l’empreinte de son site web

Il est préférable d’intégrer l’éco-conception le plus tôt possible dans la phase de vie de votre projet, en particulier si le site n’existe pas encore. Mieux vaut concevoir un site propre que devoir l'auditer à la fin et tout recommencer.

Pour les sites web déjà existants, il est nécessaire de passer par une phase d’audit pour évaluer l’empreinte du site. Cela permettra d'établir un état des lieux, qui pourra être réitéré à la fin de la démarche pour pouvoir mesurer les changements et valider l’impact des actions effectuées. Cet audit permettra de détecter les points prioritaires sur lesquels travailler.

Il existe de nombreux outils permettant d’évaluer différents aspects, ils ne sont pas tous destinés à réduire l'impact environnemental, mais comme on l’a évoqué plus haut, améliorer la performance va aider à réduire l’empreinte du site.

Les pratiques d’éco-conception pour notre site

Stratégie

La base de l’éco-conception est de limiter les fonctionnalités qui ne sont pas indispensables, sans qu’elles ne manquent aux visiteurs.

Afin de lutter contre l’obsolescence matérielle, on prend en compte l’utilisation sur des équipements plus anciens, mais également sur différents types de terminaux (marque, modèles, etc).

L’éco-conception permet aussi de proposer des services plus légers qui seront accessibles à un plus large public qui n’a pas tout le temps accès à des connexions haut débit.

Design : UX/UI & contenus

Lors de la phase de conception graphique, il est préférable d’opter pour une approche mobile first, c'est-à-dire à penser en premier lieu à une utilisation mobile pour alléger au maximum le site. L’espace disponible étant limité sur mobile, on doit prioriser les contenus qui doivent absolument être visibles.

Bien entendu, le site est ensuite adapté en version desktop. Si ce n’est pas l’approche choisie, le site devra tout de même être responsive pour s’adapter aux différentes tailles d’écran (smartphone, tablette ou ordinateur).

Ce qu’on a fait

Parmi les bonnes pratiques en ce qui concerne le design et le contenu du site, nous avons :

• mis en ligne une seule version éco-conçue et non deux versions (avec un mode d’affichage “économie d’énergie” et un mode classique) ;
• dit non au scroll infini et utilisé un bouton Afficher plus de résultats ;
• dit non au fond vidéo sur la page d’accueil, au carrousel, ou à l’affichage de nos réseaux sociaux (sauf sur le blog) ;
• Ouvre une nouvelle fenêtreprivilégié les typographies écologiques en optant pour des polices système.

Ce qu’il nous reste à faire

Il nous reste aussi à indiquer sur notre formulaire de candidature quels sont les formats et le poids maximum des pièces jointes qui peuvent nous être envoyées.

Gestion de projet / CMS

WordPress est le CMS le plus utilisé. Si c’est votre cas, attention à ne pas multiplier les plugins qui vont charger du code CSS et JavaScript qui ne sera pas tout le temps utile. À noter, vous pouvez aussi vous passer de CMS si votre contenu va peu ou pas changer.

Ce qu’on a fait

• Après nous être posé la question de ne pas installer de CMS, nous avons utilisé un Ouvre une nouvelle fenêtreCMS headless et non WordPress. Cela nous permet de ne déployer sur le serveur que ce dont nous avons vraiment besoin ;
• Nos éditeurs redimensionnent et compressent les images au format WebP avant de les mettre dans le CMS.

Ce qu’il nous reste à faire

Nous devons mieux afficher nos tableaux quand ils sont au format HTML. Actuellement, nous les publions sous forme d’image ce qui n’est ni accessible ni éco-conçu.

Frontend

Parmi les bonnes pratiques au niveau du frontend, on réduit les données téléchargées et on n’utilise que ce qui est nécessaire au fonctionnement du site.

Ce qu’on a fait

• Réduire le poids des ressources : nous utilisons des SVG et non des visuels au format PNG ou JPEG dès que possible, notamment pour les pictos ;
• Le code derrière le site se charge de faire apparaître les images quand le visiteur s’apprête à les voir. C’est très utile pour des pages qui contiennent des listes, comme la page Ouvre une nouvelle fenêtreréalisations de notre site ;
• La taille du code utilisé est aussi réduite en utilisant un processus appelé minification.

Ce qu’il nous reste à faire

Pour réduire la consommation d’électricité sur le terminal de consultation :

• nous allons modifier l’animation de défilement automatique de notre page d’accueil pour qu’elle ne tourne qu’une fois. L’outil Greenspector nous avait fait remonter que cela représentait **la moitié de la consommation électrique **de la page !
• Remplacer nos lecteurs vidéo par une image de couverture : cela représente 1 Mo d’économisé sur cette seule page.

Backend

Parmi les bonnes pratiques à adopter au niveau du backend, on distingue plusieurs grands axes : la conception, le code client et le code serveur. L’objectif est de réduire la consommation de ressources, d’alléger les bases de données et donc les serveurs.

Parmi ces bonnes pratiques, on peut :

• Choisir la technologie selon l’utilisation voulue ;
• Utiliser un système de cache serveur pour les données les plus utilisées ;
• Limiter les durées de conservation des données ;
• Favoriser les pages statiques ;
• Supprimer les animations ou autres ajouts inutiles.

Ce qu’on a fait

Nous utilisons Matomo Analytics plutôt que Google Analytics pour limiter les cookies et le nombre de noms de domaines pour réduire les serveurs utilisés…

Ce qu’il nous reste à faire

Au lieu de générer le contenu à chaque fois qu’un visiteur vient sur notre site, il est généré une seule fois et mis à disposition sur le serveur pour ensuite être envoyé aux visiteurs. Cela nécessite moins de code et consomme moins d’énergie. Techniquement, c’est ce qu’on appelle un site statique et il contient principalement du HTML et du CSS ainsi qu’un peu de JavaScript.

Le fait qu’il soit statique n'empêche pas les interactions avec l’utilisateur mais nécessite un peu d’adaptation. Nous étudions la possibilité de passer notre site en site statique, auquel cas nous perdrions certaines fonctionnalités au passage comme Ouvre une nouvelle fenêtrel'optimisation des images. Cela nécessitera aussi de découper le site actuel en deux parties : la partie statique avec le contenu généré à chaque publication, et la partie dynamique qui serait une API chargée de réceptionner les données du formulaire de contact et envoyer l'email.

Hébergement

Côté hébergement, il faut favoriser les Ouvre une nouvelle fenêtrehébergeurs écologiques et engagés. L’infrastructure logicielle et matérielle doit être optimisée pour être adapté au service tout en en minimisant l'empreinte.

Ce qu’on a fait

L’hébergement est éco-responsable et adapté à notre contexte, on utilise la solution Clever Cloud by Scaleway, les sites sont hébergés dans le DataCenter 5 de Scaleway, qui est alimenté à 100% en énergies renouvelables.

Ce qu’il nous reste à faire

Nous sommes un peu à court d'idées sur ce point mais allons continuer d'auditer le site avec différents outils pour en trouver.

Vous l’aurez compris, nous ne sommes pas parfaits, mais nous continuons d’agir pas-à-pas pour améliorer le site de Troopers. Cela nous a permis d’atteindre un écoindex de A. Si vous vous intéressez à l’éco-conception web pour créer ou améliorer votre site, venez échanger avec nous sur votre projet !

*Étude de Green IT : Ouvre une nouvelle fenêtrehttps://www.greenit.fr/2020/06/23/quels-sont-les-impacts-environnementaux-du-numerique-en-france/