Le numérique Responsable

#EcoConcevons nos services numériques

C'est juste la photo de mon profil

   @doc_roms

Romuald

C'est juste la photo de mon profil

Twitter : @doc_roms

LeadDev

- Performance

- Qualité (a11y, éthique, sécurité… )

- Eco-conception

- Ecologie

- Numérique Responsable

- Inclusion & Accessibilité

Définitions essentielles

Ecologie et performance : c'est quoi le rapport ?

Ecologie ?

Logo du magazine "GEO"

Le terme « écologie » vient des mots grecs « oikos » (la maison) et « logos » (discours, science, connaissance).
Il désigne la science qui étudie les conditions d’existence et les relations entre les organismes et leur milieu.
L’écologie pose comme principe que chaque être vivant est en relation continuelle avec tout ce qui constitue son environnement.

Dans ce cadre, elle étudie les flux d’énergie et de matières qui circulent dans un écosystème.

Logo de l'organisme ISO

ISO 25010:2002

  Exigences de qualité et évaluation des systèmes et du logiciel (SQuaRE) — Modèles de qualité du système et du logiciel

Performance ?

Logo de l'organisme ISO

ISO 25010:2002

Image présentant les diffents tests de la qualité logicielle (Tests fonctionnels, de performance, de compatibilité, d'utilisabilité, de fiabilité, de sécurité, de maintenabilité et de portabilité)

Performance

Temps de réponse Capacité Utilisation de ressources
Une application qui répond rapidement Une application qui répond tout le temps Une application sobre

Sobriété Numérique

"Une démarche qui vise à concevoir, fabriquer et utiliser le numérique dans le respect des contraintes environnementales et de la santé humaine, sur tout son cycle de vie"

Logo de l'organisme ISO

ISO 14044:2006

Analyse du cycle de vie — Exigences et lignes directrices

Image représentant les différentes étapes du cycle de vie numérique : Conception / Réalisation / Déploiement / Administration / Utilisation / Maintenance et enfin, Fin de vie

L’analyse du cycle de vie est l'outil le plus abouti en matière d’évaluation globale et multicritère des impacts environnementaux.

 

Cette méthode permet de mesurer les effets quantifiables de produits ou de services sur l’environnement.

Logo de l'ADEME

État des lieux du numérique

Consommation de Ressources

Image représentant la durée de vie des réserves rentables de métaux
Image représentant la multitude de composant d'un téléphone

Consommation d'énergie finale

Représentation des émission de gaz à effet de serre en g/C02 eq par MWh

Consommation d'eau

0.2 % d'eau

7.8 Millions de m3

équivalent à 

242 milliards de packs d’eau minérale

Image d'une bouteille d'eau Volvic, l'étiquette est verte
Image d'une bouteille d'eau Volvic, l'étiquette est verte
Image d'une bouteille d'eau Volvic, l'étiquette est verte
Image d'une bouteille d'eau Volvic, l'étiquette est verte
Image d'une bouteille d'eau Volvic, l'étiquette est verte
Image d'une bouteille d'eau Volvic, l'étiquette est verte

  = 1 pack

Un impact réél ...

Représentation des impacts de la tech par secteur (Utilisateurs / réseaux / Centres informatiques) on constate que les principaux impacts sont dûs aux utilisateurs

... dû au renouvellement ...

Réprésentation des impacts par rapport au cycle de vie, on constate que la phase de fabrication est la plus impactante, avant cette du recyclage, et celle de l'utilisation.

... et à notre utilisation ...

Capture d'écran du Tweet D'Elon Musk sur le fait que Tesla n'acceptera plus le BitCoin vu qu'il est bien trop énérgivore ;)

https://digiconomist.net/bitcoin-energy-consumption/

Image du site digiconomist.net qui présente l'impact d'une seule transaction du Bitcoin : 557.40 kg C02eq, 1173,48kWh et 112,20G de déchet éléctronique

... qui ne cesse de croitre !

EcoConcevoir le numérique

Commencer AVANT

Sélectionner son environnement de travail

  • Electricité bas carbone ?
  • Un ou plusieurs écrans ?
  • Un ou plusieurs téléphones ?
  • Occasion / neuf ?

Réfléchir au besoin

  • Est-ce essentiel à mon service ?
  • Est-ce utile à mes clients ?
  • Puis-je faire sans ?
  • Puis-je faire autrement ?

Commencer AVANT

Penser au language utilisé

Image représentant la consommation d'énergie, le temps total d'execution et la mémoire utilisée pour la même fonctionnalité des différents languages informatiques. Le C et le C++ (et le RUST) sont très bien positionnés dans chaque colonne

Les langages bas niveau sont plutôt bien positionnés ( C, C++ )

Certains langages récents sortent aussi du lot (Go, Rust) 

Commencer AVANT

Penser à l'architecture

  • Quel type de base de données ?
  • Est-ce que tout doit être disponible en temps réel ?

Penser à l'intégration continue (CI)

  • Mes serveurs de devs / déploiement doivent-ils être allumé h24 ?
  • Dois-je lancer mes tests automatiquement à chaque push de PR ?

Penser à la fin de vie du service

  • Scalabilité ?

Conseils en codant \o/

Eviter le "+ de serveurs"

  • + de RAM
  • + d'espace disque
  • + de CPU 
  • + d'énergie utilisée
  • + de ressources consommées
  • + d'argent dépensé
  • > de l'obesiciel

Commencer par analyser et optimiser son applicatif 

Faire attention aux nouveautés

  • méta "Prérender"
  • compatibilité des updates

Conseils en codant \o/

  • Soucis de rétrocompatibilité
  • > charge client
  • > de l'obesiciel

Penser à analyser l'incidence des updates Bundles/Frameworks avant d'en faire subir les conséquences à vos client

Conseils en codant \o/

Faire fonctionner les apps en mode "hors ligne"

Tester vos applications en 3G

Valider vos applications sur des outils d'analyses

Image représentant la possibilité d'activer le `Throttling` dans la console de dev (onglet network) des navigateurs internet

Renseignez-vous sur les bonnes pratiques de vos languages / Frameworks

Eviter les "scrolls infinis"

Bonnes pratiques

- de données téléchargées

- de temps passé sur le site

Limiter le recours aux plugins

Bonnes pratiques

- de données téléchargées

+ de contrôle sur le code

- de SPOF potentiel

- de failles

Limiter le nombre de domaines servant les ressources

Bonnes pratiques

- de latence 

Image d'un waterfall nous montrant le fait que chaque domaine différent résoud un DNS, se connecte et résoud le SSL..

Préférer les CSS aux images

Bonnes pratiques

Moins de latence 

Moins de données téléchargées

Optimisez vos images

Réduisez-les dans la taille affichée

Utilisez les formats adéquats

Favoriser les polices standards

Bonnes pratiques

Un affiche + rapide

Moins de données téléchargées

SPOF potentiel en -

Waterfall des ressources utiles aux google fonts, on observe que ça peut prendre du temps pour juste charger une font.

Valider vos pages auprès du W3C

Bonnes pratiques

Un affiche plus rapide

https://validator.w3.org/

Moins d'erreurs HTML / a11y 

Image d'erreurs du validator W3C

Utilisez le "chargement paresseux"

Bonnes pratiques

Moins de données téléchargées

Le "Lazy-laoding"

<!-- LazyLoad de mon image -->
<img src="image.png" loading="lazy" alt="..." width="200" height="200">

Meilleure experience utilisateur

N’utilisez que les portions indispensables des bibliothèques JavaScript et CSS

Bonnes pratiques

Moins de données téléchargées

Éviter d’effectuer des requêtes SQL à l’intérieur d’une boucle 

Bonnes pratiques

Beaucoup moins de traitements

L'image présente Spiderman, citant son oncle , Ben Parker lui ayant dit "Un grand pouvoir implique de grandes responsabilités"

Moins de données téléchargées

Un temps d'execution plus faible

Limiter le nombre de résultats SQL

Adopter une bonne politique de cache

Bonnes pratiques

Beaucoup moins de données téléchargées

Surtout si vos utilisateurs ou utilisatrices sont ammenés à revenir sur votre site ;) 

Ou si vous devez effectuer des traitements similaires régulièrement

Adopter les vidéos aux contextes de visualisation

Bonnes pratiques

Beaucoup moins de données téléchargées

Fort Gain de performance sur différents contextes

Bonnes pratiques

<= Une bonne partie des bonnes pratiques

 proviennent d'ici.

Les outils adéquats

EcoIndex.fr

Tous les outils "d'analyse statique"

Web.dev (lighthouse)

GTMetrix.com

WebPageTest.org

Dareboost.com

Tous les outils de "profiling"

Blackfire.io (PHP / Python / GO)

dotTrace (C / C++ / .net)

Merci !

C'est juste la photo de mon profil

@doc_roms

Des questions ?