<style> .reveal.reveal img, .reveal.reveal .graphviz { border: none; box-shadow: none; overflow: hidden; max-height: 60vh; } .reveal h1 {font-size: 200%} .reveal h2 {font-size: 150%} .reveal h3 {font-size: 130%} .reveal h1, .reveal h2, .reveal h3, .reveal h4 { color: #18457B; font-family: 'Montserrat', serif; font-weight: semi-bold; } .reveal p, .reveal ul, .reveal li, .reveal body { color: #18457B; font-size: 3rem; font-family: 'Roboto', sans-serif; } .reveal a { color: #2975D1; } .reveal em { font-size: 85%; font-style: normal; color: #18457Baa; } </style> # Écoconcevoir un service public Web ? Retours d'expérience sur nosgestesclimat.fr. note: - [x] d'abord montrer les efforts faits sur le build, puis donner le contexte pour montrer les ordres de grandeur ? Mhhh ça demande de trop revoir la prez - [ ] publier ça sous forme d'article sur datagir/blog Parmi les résultas google "guide écoconception", la plupart sont des PDF, le premier ADEME de 6Mo (et n'est pas spécifique au numérique). Adoptez un esprit (très) critique. --- # Le problème ---- Le numérique consomme une quantité croissante d'électricité, et de ressources matérielles. L'une des conséquences est la participation accrue au réchauffement climatique. ----  ---- 1) Que pouvons-nous faire globalement ? 2) ... en France ? 3) ... en tant que **concepteurs de services (publics) numériques** 👈 ? ---- ➡️ Mon retour d'expérience complémentaire aux guides tels que - le référentiel général d'écoconception https://ecoresponsable.numerique.gouv.fr/publications/referentiel-general-ecoconception) - plus simple (moins complet) https://eco-conception.designersethiques.org/guide/fr/index.html <!-- .slide: data-transition="fade-out" --> ---- ## Qui suis-je ? Maël THOMAS Developpeur datagir.ademe.fr via BetaGouv Dev nosgestesclimat.fr, ex. mon-entreprise.fr 🐦 @maeool ---- ## Nosgestesclimat.fr ? 🎯 Estimer en 10 minutes son empreinte climat. Savoir comment la réduire. 📈 *400k simulations terminées.* ----  <!-- .slide: data-transition="fade-in" --> --- ## Numérique * 🌍️ #### Traitement médiatique et populaire ---- ### florilège > Empreinte du visionnage d'une vidéo Surestimation d'un facteur 10 par le Shift project. ---- > Article publié en 2016 "La 4G est-elle une abomination énergétique" https://www.greenit.fr/2016/03/15/internet-mobile-la-4g-est-elle-une-abomination-energetique/ Cité des centaines de fois, corrigé 5 ans après pour préciser qu'il ne considérait que la consommation du smartphone (personne n'avait lu l'étude source). ---- > Rapport du HCC (Haut conseil pour le climat) sur la 5G. Très contestable : [critique](https://twitter.com/maeool/status/1373743644319096833). - 1 To/mois de conso mobile en 2030 - 1 adolescent sur 2 aura des Google glass. - Aucune évaluation de l'empreinte d'une antenne 5G. -> l'empreinte n'est souvent pas où on croit ---- > Comparaison régulière 💻️ vs ✈️ - *périmètre limité* (uniquement CO2, pas GES) - *oubli du dénominateur* (démocratisation) note: Le sujet de l'empreinte du numérique est miné par les infox, erreurs ou les projections arbitraires, faisant des désirs des industriels une fatalité. ---- "On va mettre des couleurs beiges, pastel pour que le site donne une impression de légèreté" 🎻 ----  ---- Biais : on s'emploie à parler beaucoup du numérique, car c'est *facile* de trier ses mails ou de choisir un hébergeur "vert", par rapport à ne plus prendre l'avion. Mais ça sert (presque) à rien. ---- Pas encore le *framework* chiffré pour évaluer l'éco-conception d'un service numérique => bcp d'écoblanchiment. --- ## Concrètement ! 1) Conception vs conséquences de l'utilisation 2) Matériel ou données ? 3) Conseils pratiques note: Mise en situation : membre d'une équipe qui développe un site Web pour le service public. Conscient de l'empreinte croissante du numérique, je veux réduire la mienne en tant qu'organisation. Que faire ? Par quoi commencer ? Je vais parler empreinte climat, car c'est ce que je connais, et qu'accessoirement c'est une urgence. ---- ### Conception vs conséquences de l'utilisation ---- C'est la consommation de masse qui fait l'essentiel de l'empreinte, pas la conception des services qui scalent massivement. > Une équipe de 4 👤 pour servir 100k 👤 ? > Dans ce cas, évaluer surtout la conso induite par le service. note: S'interroger sur la taille de l'équipe vs son audience. Si l'équipe ne prend pas l'avion régulièrement pour le boulot, ou la voiture mensuellement, ou n'achète pas un nouvel ordinateur tous les 3 mois, peu d'intérêt de se pencher sur la conso interne. ---- Il faut bien faire la différence entre les consommations **individuels** vs **communs**. Box foyer vs antenne 5G. Installation de la fibre chez moi vs dans la rue. Serveur nosgestesclimat.fr vs mon ordinateur. Voiture vs tram. note: Idéalement, on va donc viser **une double économie** : 1) les conséquences du service qu'on propose sur la masse 2) et les besoins pour construire et opérer notre service. --- ### Matériel ou données ? ---- Si l'on ne devait retenir qu'une chose : **produire moins de terminaux**. ---- #### L'octet est bien ~ immatériel Focalisation données, qui seraient non immatérielles. Cette clef faisait la taille d'un doigt pour 4Go. Quelques années après, toujours un doigt, mais 500 Go.  note: Le sujet du numérique dans le débat public s'est énormémént focalisé sur les données, avec le célèbre "le numérique n'est pas immatériel". Eh bien si, il l'est. ---- #### ...sans compter l'effet rebond En même temps que cette clef a fait x100, les vidéos qu'on regarde en streaming sont passées de 480p à 4k et même 8k. ➡️ Relative stabilité de la conso d'NRJ de l'utilisation ---- #### Le matériel Deuxième facteur : nous (les citoyens plutôt riches mondialement) achetons de plus en plus d'objets numériques. ---- Mais attention : quand certains choix crééent une inflation du matériel,  ---- d'autres choix sobres *en remplacent* d'autres.  ---- [Il y a un ordinateur dans votre poche](https://medium.com/@l4em/il-y-a-un-ordinateur-dans-votre-poche-4fcc0146ff11)  ---- Il **ne faut pas diaboliser le 📱smartphone et ✉️ les mails** tant que **des TV individuelles 8k se vendent**.  ---- 1000 emails simples = visiter la page Web d’un journal en ligne. 1000 emails simples = 1 seconde d’une vidéo de haute qualité (streaming ou TV) Trier ses emails ? Pourquoi pas. Le faire en priorité pour l’urgence environnementale ? Absolument pas. ---- Vous êtes-vous déjà demandé d’ailleurs : pourquoi cette injonction répétée à trier ses mails, et pas les messages des innombrables autres messageries que nous utilisons ? Les SMS, Whatsapp, Telegram, Facebook, etc. **Absence de rationnalité** de cette injonction email propreté email. ---- Ni oublier les ordres de grandeur hors numérique. *Un an de smartphone vs un an de voiture :*  --- ## Conseils pour une équipe Web 1) Ayez les ordres de grandeur en tête 🧮 2) Suivant les bonnes pratiques : 90% du boulot est fait ✅ 3) Hébergez français 🐔 4) Développez pour mobile 📱 5) Sortez de votre cadre / militez --- ## Ordres de grandeur N'essayez pas de calculer l'empreinte climat de votre site, **nous n'y sommes pas encore** (facteur 100 ?). Évaluez la métrique objective octets transmis. Comptez en unité ~~Netflix~~ Orange TV. ``` 20Mbit/s pour une vidéo HD 1h = 3600 s = 72 Go 1 an = 100j * 2h * 72 Go = 14 To ``` ---- nosgestesclimat.fr fait ~ 1mo à chaque visite (+ illustrations SVG)  Sujet d'amélioration continue : https://github.com/datagir/nosgestesclimat-site/issues/220 ---- 2j de travail = 10% de gain 100ko * 10 000 visites / jour = 1Go / jour = **300 Go / an** <br/><br/> = 2% des octets d'1 foyer 👥 TV pour ~ 1 million de visiteurs 👥👥👥 ---- # 😵 ---- 100ko, c'est : - des milliers de lignes de javascript. - 2% d'une photo prise sur un mobile récent ---- Gain facile ? Allons-y. Gain non trivial ? Probablement d'autres priorités. --- ### Respectez les bonnes pratiques ---- Comme toujours, c'est pas si simple, la mesure des octets est faussée : [ ](https://web.dev/reduce-javascript-payloads-with-tree-shaking/) ---- La consommation (réseau inter/national - réseau local - appareil) n'est **pas linéaire** en fonction des octets, contrairement à la consommation d'une voiture. Quelques réfléxions : https://signal.eu.org/blog/2021/03/09/limpact-environnemental-du-volume-de-donnees-une-arnaque-intellectuelle/ ---- Utiliser nombreuses évaluations plus nuancées de la performance des sites. - https://web.dev/measure - tools.pingdom.com ----  ----  ---- Stack nosgestesclimat.fr ? - Site statique servi par Netlify en CDN (depuis l'Allemagne 😒 ) - SPA - gros fichier JS initial, navigation immédiate côté client - JS - React - Publicodes ---- SPA = pas bien ? Pas forcément. - Si 1 ou 2 pages visitées (blog), ça semble rentable. - Si 20 pages, probablement pas. - Faible connexion -> initialisation de 10 secondes plutôt que délai sur chaque clic - UX : les gens sont habitués à une expérience immédiate sur mobile (Mobile qui installe des 100 Mo...) - Pas de pb pour Google - Du temps gagné pour l'équipe dev ---- Réduire "la charge" d'1 site Web, on le fait surtout pour le climat ? # 🙅 ---- 1. Pour l'expérience utilisateur 1. Temps de téléchargement 2. Temps d'éxécution sur vieux matos 3. Facture mensuelle ---- 2. Pour le dieu Google ---- 3. Parce que c'est un *bon investissement* 1. Dette technique 2. Principes et motivation des développeurs (!!) 3. Passation ---- Écologie : juste une bonne raison en plus parmi des dizaines deja existantes. --- ### Hébergez français ----  ----  ----  ---- Pression sur l'hébergeur : https://answers.netlify.com/t/low-carbon-european-cdn/48784/3 --- ### Développez mobile ---- nosgestesclimat.fr : 60% bureau, 40% mobile.  ---- Ne participez pas à donner envie à vos utilisateurs d'acheter un nouvel ordinateur, et même un premier ordinateur. N'oubliez pas qu'ils sont sûrement coincés sur un ordinateur d'il y a 5 ans moins puissant que votre iPhone X 12, qui lance 3 virus et 1 mineur de bitcoin au demarrage. ---- Commencez le dev de vos nouvelles fonctionnalités pour iPhone 5S.  ---- - https://www.browserstack.com (gratuit si open source) - https://responsively.app  ---- Ne tombez pas dans le piège IE : vous y perdrez du temps et votre courage. ---- Faut-il s'imposer de faire un site performant sur Galaxy S4 ? - sorti en 2014, il y a **8 ans** - 🚀 6 secondes pour afficher un site pur HTML très simple (news.ycombinator.com) Bon investissement ou casse-tête ? --- ## Sortez de votre cadre Au-delà du super critique, que faire ? - Passer une semaine sur de l'écoconception ? - Prioriser une nouvelle fonctionnalité qui va dans le bon sens 🌍️ ? ---- ### Exemple pratique 1 #### investissement du temps Au choix : - 1 semaine pour passer de 500ko (compressés) à 300ko - 1 semaine pour designer une page de fin + impactante ?  (qui sera vue et partagée par 1000 personnes par jour) ---- ### Exemple pratique 2 #### sobriété vs fonctionnalité  ---- On ajoute des animations via "grosse" bibliothèque facile (framer-motion). ➕ : compétition avec les applis modernes / gains réels d'UX ➖ : des octets et de la complexité en + ---- ### Exemple pratique 2 #### sobriété vs fonctionnalité On charge le calculateur en Javascript côté client. ➕ : vie privée (pas de serveur !), intéractivité, transparence ➖ : des octets et du temps de parsing en + --- - reconsidérer la stratégie ? - reconsidérer son métier ? ---- [Point 1.1 du guide numérique.gouv](https://ecoresponsable.numerique.gouv.fr/publications/referentiel-general-ecoconception/critere/1.1/) >Le service numérique répond-il à un besoin qui s’inscrit dans au moins un des objectifs de développement durable ? --- ## Militez ---- Votre marge de manœuvre est faible dans la *conception* d'un service numérique. ---- - faites le test ➡️ nosgestesclimat.fr - vous travailler au sein de l'État ? Influencez la Fabrique de la loi. - vous travaillez dans une entreprise ? Influencez-là, organisez-vous. - militez ---- **Pas que sur le numérique.** ---- [ ](https://twitter.com/SergeZaka/status/1521231593049927680/photo/1)