E-commerce - L’éco-conception web : l’avenir des sites internet ? - 12 avril 2018

L’éco-conception web : l’avenir des sites internet ?

Jean-Anaël Gobbe Chargé Gestion & Business

L’éco-conception désigne le fait de concevoir des produits respectant les principes du développement durable et de l’environnement, selon l’ADEME, recourant « aussi peu que possible aux ressources non renouvelables en leur préférant l’utilisation de ressources renouvelables […] », dans un contexte qui évoluerait alors vers une économie circulaire.

On peut schématiser le cycle de vie d’un produit avec 6 étapes différentes et distinctes comme ci-dessous :

Job&Co'm
éco-conception web : Aristys-Web
Figure 1 : Schéma du cycle de vie d’un produit

L’éco-conception se doit intervenir dans chaque étape du cycle d’un produit, et non seulement dans quelques étapes.

Définition de l’éco-conception sur un produit

Pour avoir une vision plus concrète du cycle de vie d’un produit, prenons l’exemple d’un objet du quotidien : un jean et de son utilisation pour illustrer les différentes étapes.

Avec les informations fournies par l’ADEME – Agence de l’Environnement et de la Maîtrise de l’Énergie, nous avons retracé la vie d’un jean.

éco-conception web : Aristys-Web
Figure 2: Schéma du cycle de vie d’un jean

L’étape de l’extraction s’incarne dans la culture du coton qui demande une grande consommation d’eau, d’engrais et de pesticides. L’étape de fabrication est la filature du coton, l’assemblage et les traitements éventuels du pantalon (délavages, teintures,…), qui vont consommer des substances chimiques, une grande quantité d’eau et d’énergie. L’étape du transport qui n’est pas représentée ici, correspond à l’acheminement des matières premières vers le lieu de fabrication, mais aussi à l’acheminement des jeans entre l’usine de fabrication et leur lieu de vente, par train ou par bateau ou par camion, qui consomment du carburant et donc augmente l’effet de serre. L’étape d’utilisation est donc le port du jean par l’acheteur, ainsi que les lavages successifs.

Définition de l’éco-conception portée sur le Web

Revenons à présent l’éco-conception web. L’idée est simple : réduire les impacts environnementaux et économiques des logiciels en améliorant leur conception et leur réalisation. Éco-concevoir un service numérique (dont les sites web font partie) consiste, pour un niveau de qualité et de service constant, à réduire la quantité de moyens informatiques et télécoms.

L’éco-conception web se trouve donc dans toutes les étapes du cycle de vie d’un produit, ici un site Web, de sa création à sa suppression. Pour mieux visualiser cette implication, utilisons le schéma précédent mais appliqué à un site Web que l’on veut « éco-concevoir ».

éco-conception web : Aristys-Web
Figure 3 : Schéma d’un cycle de vie d’un site web

 

La première étape consiste à la conception, l’idée du produit, qui va s’incarner dans le Driving, le zoning (aucun outil online) et l’optimisation du besoin client (UX pour User eXperience).

La seconde étape est l’extraction, c’est-à-dire la gestion responsable du matériel. Il s’agit d’optimiser la gestion de l’infrastructure informatique nécessaire, en privilégiant : l’absence de batterie, une consommation réduite par l’usage unique de disque SSD et un matériel de qualité et plus durable car adapté au besoin (par conséquent, évolutif et réparable au lieu de jetable).

La troisième étape est celle de la fabrication, c’est-à-dire la conception du site selon le référentiel de l’Eco-conception Web (« Eco-conception web : Les 115 bonnes pratiques » de Frédéric Bordage).

La quatrième étape est celle du transport, c’est-à-dire l’hébergement éco dans un Data Center « Green » ayant un P.U.E. < 1,5. Le P.U.E. (pour Power Usage Effectiveness) est le ratio entre l’énergie nécessaire à 80% de charge du Data Center et l’énergie consommée. Le but est de réduire l’impact environnemental de façon directe car c’est le point névralgique de la démarche.

La cinquième étape est celle de l’utilisation, c’est-à-dire la navigation. Le but, ici, est de minimiser le nombre de pages afin d’avoir une consultation réduite en terme d’allers-retours serveurs (netlinking réduit…).  Le nombre de pages réduites, un matériel optimisé, le « Green code » et un hébergeur « éco » : toutes ces étapes contribuent à diminuer l’impact environnemental !

La sixième étape est celle de la fin de vie, c’est-à-dire la suppression du site et des données. Le but est qu’un site inutilisé et/ou obsolète ne reste pas sur la toile : on libère de la place et l’énergie nécessaire à son utilisation.

Il est essentiel de comprendre que le travail de conception réalisé en amont (étapes 1 et 2) aura un impact bien supérieur à l’optimisation minutieuse des lignes de codes (étape 3). La règle d’or à retenir est que plus nous intervenons tôt, plus l’effet de levier est fort en termes de réduction de l’empreinte environnementale.

Comment faire de l’éco-conception web dans ses projets ?

L’éco-conception web est applicable aux produits issus de l’industrie du numérique ayant pour finalité la présentation d’un service, d’un produit ou d’une personne par le biais d’internet : c’est-à-dire un site vitrine ! En effet, le terme de site vitrine désigne généralement un site qui a pour seule vocation de présenter l’activité d’une entreprise et qui ne propose donc pas de réaliser des transactions en ligne. La notion de « site vitrine » s’oppose généralement à celle de « site marchand ». Précisons que l’éco-conception web ne s’applique pas aux sites marchands (e-Commerce) même si la démarche évolue dans ce sens (recherche adaptative des critères).

Pour les sites vitrines, nous allons détailler quelques bonnes pratiques pour les étapes du cycle de vie du produit, avec un focus sur le « Green code ».

Quelques bonnes pratiques dans le cycle de vie d’un site web

Pour l’idée du produit (étape 1), on va chercher à utiliser le plus possible des outils offline et réduire le nombre de pages nécessaires, afin de réduire l’impact du site sur les étapes suivantes.

Pour la gestion responsable du matériel (étape 2), il est préférable, autant que possible, de privilégier le matériel de récupération, et quand c’est pertinent et possible minimiser le recours aux produits « jetables » polluants, tels que les tablettes ou PC portables. Cela peut être aussi en limitant la quantité de stockage et le partage des données au sein de l’équipe ou de l’entreprise.

Pour la conception du site (étape 3), il s’agit de mettre en place le plus possible de bonnes pratiques pour avoir un service numérique qui consomme le moins de ressources – puissance du terminal de l’internaute, bande passante, nombre de serveurs, etc. – Nous parlerons ici de trois points principaux : l’utilisation de médias, l’externalisation des fichiers .js et .css et de l’infrastructure logicielle utilisée.

– L’utilisation de médias

Les images utilisées doivent avoir un poids, mais aussi une dimension adaptés. Par exemple, une photographie de dimension 200 par 200 pixels, qui est utilisé dans des dimensions 100 par 100 pixels demande de l’énergie pour être chargée, puis redimensionner par le navigateur. Il vaut donc mieux redimensionner l’image avec des logiciels comme Photoshop pour avoir une taille qui correspond au plus près de son utilisation. De même, les sons et les vidéos doivent être adaptés à leur contexte de visualisation. Certains formats doivent être privilégiés, comme le .JPG pour les images et le .mp4 pour les vidéos.

– L’externalisation des fichiers

Il faut essayer le plus possible de ne pas mettre du code JavaScript dans le fichier .html mais de mettre le corps des fonctions dans un fichier .js à part. De même pour le css, il est recommandé de ne pas mettre de css dans le .html avec les balises <style></style>, mais plutôt de faire un fichier .css qui regrouperait toutes les instructions de mises en forme du fichier. Certaines variables en JavaScript sont toutefois obligées pour leur fonctionnement d’être sur la page .html. En utilisant également des fonctions du cache du navigateur, on peut ainsi gagner en rapidité de chargement.

– L’infrastructure logicielle

Cela peut se concrétiser dans l’absence de redirections entre les pages du site et de la page 404. Un autre critère peut être l’utilisation d’un serveur asynchrone, car les serveurs asynchrones ne font de thread  pour chaque requête, ce qui limite l’utilisation de ressources au niveau du processeur et de la mémoire vive.

Pour l’hébergement éco (étape 4), il est possible de travailler avec des entreprises comme IBO ou iKoula. Ces « data centers » ont des volontés de respecter une politique environnementale en fournissant à ses clients un hébergement dit « vert ». IBO affiche un PUE de 1,2 et est normé Tiers 3+. Ce niveau correspond à un taux de disponibilité de plus de 99.982% avec une indisponibilité statistique de 1.6 heure par an. Ikoula choisit de réduire l’empreinte carbone grâce à une infrastructure de serveurs dédiés et virtuels basse consommation.

Pour la navigation (étape 5), toutes les actions faites dans les étapes précédentes auront des conséquences énergétiques dans cette étape. La page sera plus rapidement chargée en consommant moins d’énergie et de bande passante tout en limitant le nombre d’aller-retours avec le serveur.

Pour la suppression du site et des données (étape 6),  il est possible de supprimer les fichiers contenus dans le domaine lors de l’arrêt d’activité du propriétaire et donc ne plus conserver des fichiers qui ne sont plus utilisés et ne sont plus valables.

Quelques documents de références

Selon le référentiel « Éco-conception web : Les 115 bonnes pratiques » du collectif conception numérique responsable, les bonnes actions correctives peuvent se trouver dans plusieurs items : la conception fonctionnelle, graphique et technique, le contenu, le développement, l’ergonomie et l’hébergement du site Web. Par exemple, au niveau de la conception, il est essentiel d’éliminer les fonctions non essentielles. Plusieurs études (Cast Software et Standish Group, notamment) démontrent que 70 % des fonctionnalités demandées par les utilisateurs ne sont pas essentielles et que 45 % ne sont jamais utilisées.

Le label « Eco-conception » sectoriel national permet de certifier un bon respect des pratiques d’éco-conception en fonction de différents critères de production du site (de A à Z) ou du CMS utilisé (WordPress).

Quelques outils de mesures

Il existe actuellement plusieurs outils : certains pour mesurer uniquement l’empreinte environnementale ou la conception d’une page, et d’autres offrent la possibilité de travailler directement dans un « Framework » d’éco-conception. Citons quatre outils parmi les plus utilisés et les plus reconnus :

 

éco-conception web : Aristys-Web

 

EcoIndex, est développé par GreenIT et nxtweb. L’objectif d’EcoIndex est d’aider le plus grand nombre de personnes à prendre conscience de l’impact environnemental d’Internet et de proposer des solutions concrètes pour réduire cet impact. EcoIndex permet de mesurer l’empreinte applicative et physique qui en découle (consommation RAM et bande passante …).

 

éco-conception web : Aristys-WebPageSpeed, qui présente des rapports sur les performances réelles d’une page, fournit des suggestions sur la façon dont cette page peut être améliorée. Il ​​évalue dans quelle mesure une page web suit les meilleures pratiques de performance courantes et calcule un score de 0 à 100 qui estime sa marge de performance.
éco-conception web : Aristys-WebEcoMeter génère le DOM (Document Object Model) dans un navigateur sans tête (PhantomJS). Ensuite, il analyse les DOM en recherchant des modèles représentatifs des meilleures pratiques. Lorsque l’analyse se termine, Ecometer.org montre un résumé des critères en indiquant s’ils sont respectés ou non et propose quelques points d’améliorations.

 

éco-conception web : Aristys-WebGreenspector est une solution permettant aux développeurs de code de manière plus durable : en optimisant la consommation  en énergie. Il travaille donc sur la qualité durable d’un code informatique et permet de détecter les problèmes et les erreurs avant la mise en ligne.

 

Les trois premiers outils de cette liste permettent de faire des mesures uniquement sur une page déjà codée. Les critères utilisés sont variables d’un outil à l’autre. Greenspector a une approche différente, il permet d’aider lors de la conception.

Avantages et bénéfices

Pour les utilisateurs

En tant qu’utilisateur du web, les impacts positifs sont également pour vous. Concrètement, cela signifie une plus grande vitesse de chargement des pages que vous consultez et une diminution conséquente des risques d’erreurs de chargement de la page. De plus, l’optimisation ergonomique permet un confort d’utilisation du site et une meilleure navigation.

De part cette démarche écologique, il y a donc une réduction des ressources utilisées. Si nous prenons en compte la durée de vie des infrastructures et des équipements, l’empreinte mondiale annuelle est :

  • 1037 Twh d’électricité ;
  • 608 millions de tonnes équivalent de Gaz à effet de serres ;
  • 8,8 milliards de m3 d’eau.

Ces chiffres sont colossaux et peuvent être drastiquement réduits avec l’intervention de l’éco-conception web (source GreenIT.fr, 2015).

Pour les propriétaires de sites web ou les webmasters

Pour les propriétaires de sites web, l’éco-conception web peut apporter de nombreux bénéfices économiques. Par exemple, 68% des internautes quittent un site en raison d’une mauvaise expérience utilisateur et 44% partagent cette mauvaise expérience auprès de leur entourage. Il faut donc chercher à améliorer l’expérience utilisateur, par exemple en ayant un design épuré.

De plus, une bonne vitesse de chargement des pages permet d’augmenter le taux de conversion. Prenons quelques exemples concrets. En 2012, Walmart annonçait un taux de conversion multiplié par 2 entre les visites sur des pages web avec un taux de chargement moyen à 4 secondes et celles à 2 secondes. En 2015, Etam communique un gain de 20% du taux de conversion suite à une baisse du temps moyen de chargement de ses pages de 0.7s.

Votre classement SEO pourra également en tirer quelques bénéfices. En effet, Google recommande un temps de réponse du serveur qui ne doit pas excéder les 0.2s. Ce critère va devenir rapidement stratégique.

A qui d’adresser ?

Dans le domaine de l’éco-conception, certains acteurs sont incontournables. On peut citer notamment le collectif conception numérique responsable qui regroupe tous les outils et acteurs de la communauté francophone.

L’ADEME est un établissement public qui participe à la mise en œuvre des politiques publiques dans les domaines de l’environnement, de l’énergie et du développement durable. Elle met ses capacités d’expertise et de conseil à disposition des entreprises et les aides à financer des projets dans cinq domaines (la gestion des déchets, la préservation des sols, l’efficacité énergétique et les énergies renouvelables, la qualité de l’air et la lutte contre le bruit) et à progresser dans leurs démarches de développement durable.

 

Pour avoir des sites éco-conçus, quelques entreprises proposent leurs services. On peut notamment citer Aristys Web sur Clermont-Ferrand (63 Puy-de-Dôme), Web+ sur Tullins (38 Isère) ou encore Axellescom sur Nantes (44 Loire-Atlantique).

Aristys Web s’appuie sur trois principes fondamentaux en éco-conception : « Simplicité », « Sobriété » et « Pertinence » pour limiter le plus possible l’empreinte environnementale d’un site.

Web+ se veut éco-responsable en utilisant notamment la conception graphique qui tient compte des contraintes de performance.

Pour Axellescom,  l’entreprise qui accompagne déjà ses clients dans leur transformation digitale se devait de leur apporter des solutions d’amélioration de leur empreinte écologique au niveau du web.

Conclusion

L’ensemble des interventions pour éco-concevoir un site web s’appuie sur trois principes fondamentaux : la simplicité, la sobriété et la pertinence. C’est une approche fonctionnelle et intégratrice qui prend en compte tous les impacts au long du cycle de vie du procédé ou du produit, depuis l’extraction des matières premières jusqu’aux déchets issus de la fabrication, ainsi que leur transport et leur utilisation. Le produit éco-conçu vise à remplir une fonction et satisfaire un besoin avec la meilleure éco-efficience possible, c’est-à-dire en utilisant les ressources de façon efficace et en minimisant les impacts environnementaux et sanitaires (1).

Citations et Références