Le numérique Responsable
#Création d'un site EcoConçu
![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)
EcoResponsable ?
«Intégrer l'environnement dès la conception des produits et des services» ISO 14062
Conception Responsable
Dès la conception…
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/8588640/pasted-from-clipboard.png)
... Jusqu'en fin de vie du produit.
Analyse de cycle de vie (ACV)
ISO 14040/44
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éel 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 !
Sobriété
Nouveau meilleur pote ❤
Moins de fonctionnalités
A quoi va-t-elle me servir ?
Puis-je faire autrement ?
N'ai je pas déjà une fonctionnalité similaire ?
Est-elle essentielle pour mes utilisateurs ?
Moins de dépendances
Puis-je faire sans ?
Quel est son poids ?
Avec une dépendance que je possède déjà ?
En natif, sans utiliser de dépendance ?
Est-ce que ça ne va pénaliser mes utilisateurs ?
Même avec un débit réduit ?
Moins de ressources
Une iframe gMap ?
Une font custo ?
Une gallerie d'images ?
Une image ?
Et pourquoi pas :
Une image cliquable
Une font existante
Une seule image
Pas d'image
Une connaissance de mes utilisateurs et utilisatrices
Quel est le parcours ?
Que font-ils ?
Pourquoi sont-ils là ?
Peut-il être optimisé ?
Utilisent-ils toutes les fonctions?
Ils se sont peut-être planté ^^
Ok, j'ai compris, j'agis avec sobriété ! Mais pourquoi ?
Pour réduire l'impact de notre applicatif !
Coté Back
Moins de charge serveur
Moins de CPU utilisé
Moins de mémoire allouée
Moins de stockage utilisé
Sur le réseau
Moins de données transmises
Coté Front
Moins de données stockées
Un applicatif plus léger
Des téléchargements plus rapide
Il faut absolument éviter l'obsolescence logicielle de nos applicatifs
OK ! mais dans la pratique ?
1/ Commencer par comprendre OÙ est le PLUS GROS impact :
2/ Choisir son hébergeur
Energie bas carbone
Réutilise les anciens composants
Evite de refroidir les serveurs avec une clim
Utilise la chaleur générée pour autre chose
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/8908427/logo_infomaniak_environnement.png)
Fait des achats durables
3/ Choisir son language
/!\ Ce n'est pas ULTRA impactant :)
!= Energie finale consommé
!= Temps d'execution
!= mémoire utilisée
3/ Connaitre la qualité logicielle
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/8588432/pasted-from-clipboard.png)
ISO 25010
4/ Mettre en place des bonnes pratiques de dev
Les bonnes pratiques de vos langages / Framework
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9894558/pasted-from-clipboard.png)
4.1 / Exemples
#1 Éliminer les fonctionnalités non essentielles
#2 Quantifier précisément le besoin
#5 Favoriser un design simple
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/8591232/pasted-from-clipboard.png)
#85 Mettre en place un plan de “fin de vie”
4.1 / Exemples
#9 Limiter le nombre de requêtes HTTP
#18 Limiter le nombre de domaines servant les ressources.
#34 Redimensionner les images en dehors du navigateur
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/8591232/pasted-from-clipboard.png)
#37 Utiliser le chargement paresseux (lazy-loading)
4.1 / Exemples
#40 N’utilisez que les portions indispensables des bibliothèques JavaScript et CSS
#56 Mettre en cache les données calculées souvent utilisées
#72 Éviter d’effectuer des requêtes SQL à l’intérieur d’une boucle
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/8591232/pasted-from-clipboard.png)
#114 Adopter les vidéos aux contextes de visualisation
5/Conseils \o/
Faire fonctionner les apps en mode "hors ligne"
Tester vos applications en 3G
![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)
Monitorer tout ça !
Tous les outils "d'analyse statique"
Ecoindex.fr (GreenIt.fr)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/8908702/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/8908707/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/8908714/pasted-from-clipboard.png)
GreenIt Analysis
(Chromium et Firefox)
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)
La console de dev
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)
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)
Création d'un site internet EcoResponsable
By Romuald Priol
Création d'un site internet EcoResponsable
- 833