Un site éco-conçu

Le site internet relocalisons.bzh de Bretagne Développement Innovation a été conçu et développé dans une démarche de sobriété numérique.

Car oui, le secteur du numérique a des impacts sur l’environnement !

• 53 millions de tonnes de déchets d’équipements électriques et électroniques ont été générées dans le monde en 2019 (2020, Global E-Waste Monitor – ONU, ITU)
• 849 097 tonnes de déchets d’équipements électriques et électroniques ont été collectées en France pour un taux de recyclage de 77 % en 2020 (ADEME, 2021)
• Un taux de croissance annuel des émissions de gaz à effet de serre est estimé à 6%. Un des plus forts taux de croissance, tous secteurs confondus, qui va continuer d’augmenter et pourrait être amené à doubler d’ici 2025 (Mars 2021, The Shift Project).
• Un taux de collecte pour recyclage très faible — seulement 20% — impliquant des pollutions, des trafics, etc.

Et si le secteur du numérique a autant d’impacts, c’est qu’il repose sur un nombre faramineux d’infrastructures (serveurs, réseaux filaires, antennes et satellites, etc.) et d’équipements (ordinateurs, téléphones, télévision, IOT, etc.) ! Et même si on ne s’en rend pas compte, ces outils consomment énormément de ressources matérielles et énergétiques. (Il faut plus de 800kg d’énergies fossiles et de minéraux pour fabriquer un ordinateur de 2kg ! C’est ce que l’on appelle le sac à dos écologique).

Alors parce que la majeure partie de l’impact provient du matériel, nous ne sauverons pas la planète avec des sites éco-conçus. En revanche, ce que nous pouvons faire, faisons-le. Car toutes les démarches démontrant d’une possibilité de faire autrement encourageront la considération des enjeux environnementaux et sociétaux et inspireront d’autres acteurs dans leurs projets.

Pour en savoir plus > Fresque du numérique / Rapport Shift Project

Éco-concevoir un site internet, c’est notamment réfléchir à sa consommation d’énergie à l’usage et garantir la pérennité des infrastructures et des équipements numériques qui le font fonctionner.

Il s’agit donc de choisir les bonnes méthodes et les bons outils de conception pour limiter :

• Le chargement et le transfert de données : images, contenus, requêtes entre le site et des outils externes, durée d’utilisation du site par un utilisateur, etc.
• L’obsolescence du site : compatibilité des technologies utilisées avec tous les équipements, durabilité des informations qu’il contient, etc.

Mais pas seulement, face au défi écologique se dresse aussi le défi de l’attention et de l’accessibilité : éco-concevoir un site, c’est aussi respecter les individus qui l’utilisent et s’assurer qu’il soit utilisable par le plus grand nombre.

Le site relocalisons.bzh de BDI s’inscrit dans cette démarche de développement web responsable.
Mais l’éco-conception est apparue comme un défi dont l’enjeu a été d’intégrer les contraintes de sobriété numérique à chaque étape de création tout en conservant de nombreux éléments du cahier des charges initial, de la charte graphique et des contenus souhaités.

La structure du site est organisée autour d’un objectif de communication fonctionnel :

• Une page par besoin (car l’impact d’un site se calcule par page).
• Une utilisation limitée des images, des éléments vectoriels au maximum

Le graphisme contribue à l’accessibilité et à la réduction du poids des pages :

• L’utilisation d’illustrations et d’une typographie forte pour créer l’univers de marque. Ces deux éléments permettent d’utiliser peu d’images sur le site.
• Des noms de liens et des boutons explicites
• Des couleurs aux contrastes suffisants pour garantir la lisibilité.

Cet effort de conception a permis d’optimiser la performance technique du site :

• Une seule typographie en deux variantes installée en local = deux fichiers typographiques
• Optimisation du code html, et CSS, utilisation mesurée du JavaScript lors du développement (mais WordPress ajoute ses propres libraries JavaScript et CSS sur laquelle l’intervention est limitée…)
• Un webdesign responsive, c’est-à-dire adapté aux formats mobile et tablette.
• Des images optimisées pour être les plus légères possibles.
• Le thème Underscoretw a été choisi et optimisé pour être le plus léger possible.
• Un tracking limité des utilisateurs permettant à l’équipe de suivre le trafic des pages pour améliorer la navigation en cas de perte d’utilisateurs, est réalisé avec la solution Matomo, dans un soucis de respect des données personnelles.
• L’hébergement est géré par Icodia, entreprise bretonne située dans le bassin rennais. Icodia permet au site d’être hébergé directement en Bretagne, C’est ça aussi la relocalisation !

Différents outils permettent de calculer les performances environnementales du site.
D’un outil à l’autre, des écarts peuvent être constatés car les algorithmes programmés ne prennent pas tous en compte les mêmes paramètres. Par exemple, certains mesurent les données techniques (complexité du DOM, poids de la page et de ses éléments (JS, CSS, Images, etc.), nombres de requêtes), d’autres considèrent le mix énergétique du pays de consultation ou d’hébergement du site, et tout ça, à des stades de chargement différents.
Si l’écart n’est jamais faramineux, la comparaison reste pertinente afin de comprendre les points positifs et les améliorations à apporter au site.

Comprendre la méthode d’analyse

Pour évaluer les performances environnementales de relocalisons.bzh, nous avons retenu un échantillon de 11 pages représentatives du site.

Pour chacune d’entre elles, nous avons mesuré avec l’aide de l’outil Yellow Lab Tools :

• Le poids de la page en Ko
• La complexité du DOM
• Le nombre de requêtes.

Ces trois données sont exploitées dans l’Éco-Index Green-IT, référence sur le secteur.

Nous avons également compilé les notes et les équivalents CO2 par visite obtenus par chaque page de l’échantillon sur les outils suivants :

• WebKarbon
• Website carbon

Des moyennes de tous ces résultats ont finalement été calculées et mises en regard des moyennes mondiales. Cela permet de tirer les conclusions de l’effort d’éco-conception mis en oeuvre.

Les résultats

Ces résultats sont tirés de l’observation réalisée sur le site par Les Raisonné·e·s et LMSYS le 10 septembre 2024 et ne tiennent pas compte des éventuelles modifications apportées par BDI depuis et dans le futur.

• Le poids moyen des pages est de 490 Ko. La plus légère étant de 229 Ko et la plus lourde de 968 Ko (parmi l’échantillon audité).
• Elles comptent en moyenne 18 requêtes.

Pour information, voici les moyennes actuelles du web :

• Poids de page : 2,600 Mo
• Requêtes : 70

Source : https://almanac.httparchive.org/en/2022/page-weight#page-weight-by-the-numbers

Nous aurions pu aller plus loin dans les arbitrages de conception pour obtenir de meilleures performances sur les outils tels que ecoindex.fr, mais cela aurait dégradé l’expérience sur d’autres aspects : prise en mains plus complexe pour l’équipe d’administration, perte de l’univers de marque, pertes de fonctionnalité essentielles au projet, etc.

Nous souhaitons rappeler que le processus d’écoconception est avant tout méthodologique et qu’il est intrinsèquement dépendant des contraintes techniques imposées par le cahier des charges. Aussi, si WordPress est plébiscité par les administrateurs de site pour sa praticité d’usage et notamment l’autonomie qu’il confère en termes de gestion de contenus, il constitue un socle technologique parfois difficilement conciliable avec les principes de l’écoconception. Un certain nombre de composants et de librairies sont chargées par défaut même si elles sont inutiles à la conception du site en question.

On le voit d’ailleurs dans les résultats et notamment le poids des librairies JS qui ne sont pas le fait du développement et du thème utilisé dans le site, mais simplement du fait de l’outil WordPress lui-même. Il faut également rappeler que les outils de notation utilisés pour évaluer la performance d’écoconception du site ont beaucoup évolué ces derniers temps et que l’influence du javascript est aujourd’hui pleinement prise en compte dans la note finale, ce qui n’était pas le cas auparavant ou tout du moins partiellement. Nous considérons que ces nouvelles méthodologies de calcul, si elles sont moins favorables à la notation des sites, permettront de mettre en exergue la nécessité de faire émerger des solutions techniques alternatives à WordPress qui permettront de minimiser l’impact des futurs sites WEB.

Ce qui pourrait être encore optimisé :

• Simplifier les grilles et masonry
• Des images pourraient être supprimées et remplacées par des illustrations intégrées au code.
• Le poids des pages pourrait être abaissé en modifiant la structure de chaque page pour simplifier le design au maximum.
• Le site pourrait être développé à partir d’un CMS moins gourmand en code que WordPress, et allégé en fichier Javascript
• Le site pourrait être passé en mode “statique” pour ne générer des pages que lorsque c’est utile.
• Utilisation de typographies systèmes

Article rédigé par Les Raisonné·e·s & LMSYS