Le numérique Responsable
#EcoConcevons nos services numériques
![C'est juste la photo de mon profil](https://fr.gravatar.com/userimage/38240130/6ec4fada455b1d6128660c401c40acc6.jpg?size=500)
@doc_roms
Romuald
![C'est juste la photo de mon profil](https://fr.gravatar.com/userimage/38240130/6ec4fada455b1d6128660c401c40acc6.jpg?size=500)
Twitter : @doc_roms
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/8908000/Fichier-4.png)
LeadDev
- Performance
- Qualité (a11y, éthique, sécurité… )
- Eco-conception
- Ecologie
- Numérique Responsable
- Inclusion & Accessibilité
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9840964/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9840969/pasted-from-clipboard.png)
Définitions essentielles
Ecologie et performance : c'est quoi le rapport ?
Ecologie ?
![Logo du magazine "GEO"](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/8588365/pasted-from-clipboard.png)
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](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/8588416/pasted-from-clipboard.png)
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](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/8588416/pasted-from-clipboard.png)
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é)](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/8588432/pasted-from-clipboard.png)
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](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/8588416/pasted-from-clipboard.png)
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](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/8588640/pasted-from-clipboard.png)
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](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/8588649/pasted-from-clipboard.png)
État des lieux du numérique
Consommation de Ressources
![Image représentant la durée de vie des réserves rentables de métaux](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/8589253/pasted-from-clipboard.png)
![Image représentant la multitude de composant d'un téléphone](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/8589256/pasted-from-clipboard.png)
Consommation d'énergie finale
![Représentation des émission de gaz à effet de serre en g/C02 eq par MWh](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/8589267/pasted-from-clipboard.png)
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](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/7701727/pasted-from-clipboard.png)
![Image d'une bouteille d'eau Volvic, l'étiquette est verte](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/7701727/pasted-from-clipboard.png)
![Image d'une bouteille d'eau Volvic, l'étiquette est verte](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/7701727/pasted-from-clipboard.png)
![Image d'une bouteille d'eau Volvic, l'étiquette est verte](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/7701727/pasted-from-clipboard.png)
![Image d'une bouteille d'eau Volvic, l'étiquette est verte](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/7701727/pasted-from-clipboard.png)
![Image d'une bouteille d'eau Volvic, l'étiquette est verte](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/7701727/pasted-from-clipboard.png)
= 1 pack
Un impact réél ...
... 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.](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/8589283/pasted-from-clipboard.png)
... 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://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/8589636/muskBitcoin.jpg)
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](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/8589649/SingleBitcoinFootprint.jpg)
... 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é
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](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/8591038/Throttling.jpg)
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..](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/8590926/AllianzWaterfall.jpg)
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.](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/8591003/pasted-from-clipboard.png)
Valider vos pages auprès du W3C
Bonnes pratiques
Un affiche plus rapide
https://validator.w3.org/
Moins d'erreurs HTML / a11y
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"](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/8591083/pasted-from-clipboard.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/8591232/pasted-from-clipboard.png)
<= Une bonne partie des bonnes pratiques
proviennent d'ici.
Les outils adéquats
EcoIndex.fr
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/8592747/ChromeEcoIndex.jpg)
Tous les outils "d'analyse statique"
Web.dev (lighthouse)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/8591299/pasted-from-clipboard.png)
GTMetrix.com
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/8591306/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/8591307/PerfectGtMetrixScore.jpg)
WebPageTest.org
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/8591312/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/8591316/PerfectWebPagetestScore.jpg)
Dareboost.com
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/8591323/PerfectDareboostScore.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/8591327/pasted-from-clipboard.png)
Tous les outils de "profiling"
Blackfire.io (PHP / Python / GO)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/8592767/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/8592777/pasted-from-clipboard.png)
dotTrace (C / C++ / .net)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/8592835/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/8592838/pasted-from-clipboard.png)
Merci !
![C'est juste la photo de mon profil](https://fr.gravatar.com/userimage/38240130/6ec4fada455b1d6128660c401c40acc6.jpg?size=500)
@doc_roms
Des questions ?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/8908000/Fichier-4.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9840969/pasted-from-clipboard.png)
EcoConcevoir nos services numériques
By Romuald Priol
EcoConcevoir nos services numériques
- 1,016