L'éco conception | le concept

L'éco conception est une obligation aujourd'hui

Passionné par les questions d'éco conception puis d’upcycling j'en suis venu à découvrir l'éco conception de produits digitaux.

Aujourd’hui, le monde pioche dans des millions de tonnes de réserves non renouvelables et des milliards de litres d’eau douce pour extraire ce qui sert à fabriquer nos terminaux fixes et mobiles. De plus, la France est un pays où le temps industriel est derrière nous et où la création de richesse est surtout tertiaire. L’éco conception existe déjà dans de nombreux secteurs. Il est temps de se pencher sur sa version dématérialisée.

Un site web plus léger, qui fait moins de requêtes à travers la planète ne peut être que bénéfique. Un logiciel de traitement de texte qui n’est pas un obésiciel et qui ne vous apporte que ce dont vous avez besoin est bon pour la planète. Nos terminaux et la charge d’internet ont une consommation de 10% de l’électricité mondiale. 88% de nos téléphones sont dans nos tiroirs et en état de marche. Il est temps.

lifecycle

La problématique

Aujourd'hui l'état des lieux est assez alarmant. Je vais essayer de le découper par problème.

Problème Bon sens résultat
La production d'une simple puce de 1 gramme retire 16kg en moyenne de matériaux du sol Il est urgent de conserver au maximum son terminal pour éviter un prélévement trop répété de matière première ou se fournir d'occasion. Peut être que nous finirons par trouver un terminal issu de matières recyclées On ne change plus son téléphone ou ordinateur aussi souvent
Les déchets occasionnées par la production du numérique Il faudrait lancer une économie de l'occasion et rendre circulaire le cycle de vie de nos produits numériques en les recyclant (après réparation) Recul de l'obsolescence programmée, utilisation au lieu de surconsommation et cercle vertueux.
Ils sont dépassés et retirés de la boucle avant d'être en panne car ils "rament" ou ne sont plus à la mode. Il faut absolument éco concevoir les contenus digitaux pour rendre les logiciels et sites moins gourmands. Il faut restreindre le phénomène de mode. On peut surfer ou travailler sur un ordinateur / smartphone qui dure 10 ans. On arrête les obésiciels et on se rappelle que le premier homme a marché sur la lune avec la puissance de calcul d'une carte SIM.
La consommation d'internet représente 10% de l'électricité et 3% des gaz à effet de serre (comme l'aviation civile) Il faudrait rappatrier les données à proximité des utilisateur, développer les petits datacenters locaux avec une consommation d'électricité renouvelable. Les données ne transitent plus de l'autre côté du monde et par satellite, on économise de la bande passante et de l'électricité. On se chauffe dasn les immeubles avec la chaleur des datacenter et on économise de l'énergie.

Le code

Je commence mes recherches sur la question de l'éco conception web. Aujourd'hui in existe ce libre qui nous donne les bonnes pratiques et par rapport à mes premières expérience, je commence une petite analyse des pratiques

Le HTML
Papy fait de la résistance

Le HTML en soit ne pose pas trop de problèmes. Il faut surtout éviter de recharger la page à chaque click. Deux solutions simples sont soit :

  • avoir un site one page comme celui ci avec des liens entre les éléments
  • utiliser un framework comme Angular ou React qui limite les zones de chargement en ne chargeant que ce qu'on a appelé.

La question est à se poser dès l'architecture car les frameworks emportent beaucoup de fichiers lors de la compilation.

Le CSS
Comme Sa Style :)

Le css est très efficace et couvre quasiment tous les besoins d’un site vitrine. Il est possible d’y insérer des petites animations assez simplement avec du javascript. Evitez au possible de le mêler au Jquery plus gourmand. Il faut faire attention en cas de code “emprunté sur internet”. Ne pas oublier de le nettoyer avant de s’en servir, moins il y a de transitions et d’animation, plus le code est léger et moins la machine ne mange de ressources. Il faut évidemment limiter le nombre de feuilles CSS dans le site. Il faut penser de la même manière à regrouper un maximum les déclarations. De la même manière pour éviter les requêtes inutiles, il vaut mieux utiliser les glyphes 👫 et polices déjà dans l’ordinateur, cela évite du téléchargement.

Bootstrap
Light card title

Bootstrap Bootstrap est un outil formidable et hyper optimisé pour une grosse partie de la mise en page. Développé par tweeter, il est particulièrement ancré dans nos rétines. Il existe plusieures manières d’alléger Bootstrap.

  • Utiliser l'option "Customise" pour customizer et ne télécharger que les “morceaux” dont on a vraiment besoin. C’est un peu plus léger.
  • L’installer en local grâce au .ZIP fourni dans bootstrap “Get Started” ce qui évite à votre navigateur de faire des requêtes en Californie pour de la mise en page.
  • Si vous installez quand même Bootstrap avec les liens “CDN” ne paniquez pas, votre navigateur a surement la moitié du code dans son cache vu le nombre de sites qui l’utilisent.
Et le reste
Sous la surface de l'iceberg

Le reste demeure en réflexion. Aujourd’hui il y a la question de garder un code propre avec une logique avancée. C’est tout à fait possible. Le javascript et le PHP ne posent pas de problèmes mais il faut garder à l’esprit que les fonctionnalités doivent être utiles au fonctionnement et pas uniquement pour faire joli. Il y a le soucis des médias. Les photos doivent être réduites au minimum. Il faut les retoucher avant la mise en ligne et pas dans le CSS. Garder en tête qu’elles seront vues sur les écrans de 1900 pixels en moyenne et des mobiles. L’image que l’utilise en parallax fait 1600 pixels de large pour 400Ko. Les vidéos sont aujourd’hui la bête noire avec 70% du trafic d’internet. Evitons les vraiment si c’est possible. Sinon à minima, il de votre responsabilité de ne pas les lancer automatiquement et de les proposer en qualité standard. Pensez au mobiles qui n’ont pas forcément besoin de 4K. Je vous donne un exemple ci dessous sur une vidéo de mon cru sur al responsabilité en vélo.

Les outils d'analyse du code

L'avantage du monde du code, c'est qu'il y a toujours quelqu'un pour créer de superbes outils en accès libre. En voici quelques un.

nom à quoi ça sert ?
éco index Ce site vous permet de tester le votre sur certain critères et d'en tirer une étiquette énergétique
Ecometer Un autre outil d'analyse qui entre en profondeur et vous donne des clés d'amélioration dans votre code sur la base des 115 bonnes pratiques
Opquast C'est une checklist des éléments qui vous mènerons vers un code plus léger
Green IT Le collectif derrière les 115 bonnes pratiques dont je parle précédemment
Le google groupe Forum de discussion sur l'éco conception avec le collectif greenit
Les 115 bonnes pratiques, le livre Achetez le livre sur les bonnes pratiques

Les rencontres utiles

Le monde de l'éco conception se développe. Il sera vite important de se fédérer et de produire quelque chose d'éfficace

Pour me joindre