Numérique Responsable
Comment lier performance et écologie ?
@doc_roms
![C'est juste la photo de mon profil](https://fr.gravatar.com/userimage/38240130/6ec4fada455b1d6128660c401c40acc6.jpg?size=500)
Romuald
![C'est juste la photo de mon profil](https://fr.gravatar.com/userimage/38240130/6ec4fada455b1d6128660c401c40acc6.jpg?size=500)
Twitter : @doc_roms
![Logo de The Green Compagnon](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/8908000/Fichier-4.png)
LeadDev
- Performance
- Qualité (éthique, sécurité… )
- Eco-conception
- Ecologie
- Numérique Responsable
- Inclusion & Accessibilité
![Logo d'Euronews](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9840964/pasted-from-clipboard.png)
![Logo de l'association Green IT](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9840969/pasted-from-clipboard.png)
Etat des lieux du numérique
Un service numérique est constitué d’un ensemble de logiciels, matériels, réseaux et infrastructures, et d’autres services numériques.
Le numérique ?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9407878/pasted-from-clipboard.png)
![Photi d'une console de jeux vidéos (c'est une xbox series X de mircosoft)](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9407882/pasted-from-clipboard.png)
![Photo d'un écran de TV relativement grand et légèrement incurvé](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9407885/pasted-from-clipboard.png)
![Photo d'une montre connectée](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9407893/pasted-from-clipboard.png)
![Photo d'une carte Graphique](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9407897/pasted-from-clipboard.png)
![Photo d'une partie d'une antenne 5G](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9407900/pasted-from-clipboard.png)
![Photo de 3 gros emplacements de serveurs](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9407905/pasted-from-clipboard.png)
![Photos de plusieurs smartphones](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9407912/pasted-from-clipboard.png)
Qu'est-ce qui se passe ?
![Photo du logo de Netflix](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9407878/pasted-from-clipboard.png)
![Photo d'une télévision relativement grande et légèrement incurvée](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9407885/pasted-from-clipboard.png)
![Photo d'une partie d'une antenne 5G](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9407900/pasted-from-clipboard.png)
![Photo de 3 gros emplacements de serveurs](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9407905/pasted-from-clipboard.png)
Ce n'est PAS "immatériel"
Ex : le Bitcoin
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9408007/BitcoinConsumption.jpg)
![Graphique ou l'on observe les différents mix énergétiques de plusieurs payes Européens. On constate que sur le rapport Quantité d'énérgie produite et impact en g/CO2 eq , la France et la suède sont bien placés, contrairement à la Pologne et l'Allemagne.](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9408043/EuropeanEnergyProduction.jpg)
Electriquement, une même fonctionnalité n'aura pas le même impact d'un pays à l'autre !
Et le problème n'est PAS qu'éléctrique !
![Photo d'un minerai d'Antimoine](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9408060/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/8589253/pasted-from-clipboard.png)
Petit(s) rappel(s) sur les métaux :
![Graphique d'une vue coupé d'un téléphone avec les différents métaux composants la batterie, l'éléctronique, l'écran et la coque.](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/8589256/pasted-from-clipboard.png)
Il y en a beaucoup... partout !
l'extraction pollue énormément
L'impact n'est PAS qu'environemental
Petit(s) rappel(s) sur l'ACV :
![Graphique ou l'on remarque les différents impacts lors de la vie d'un produit : ceux-ci sont de très loin dû à la l'extraction des ressources pour sa fabrication.](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/8589283/pasted-from-clipboard.png)
Petit(s) rappel(s) sur le numérique :
L'impact c'est principalement NOUS
Petit(s) rappel(s) sur le numérique :
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9898568/pasted-from-clipboard.png)
La caméra connectée – Le thermostat connecté - Le climatiseur connecté –Les prises électriques connectées - La montre connectée - La poubelle connectée - Le système d’éclairage connecté - La balance connectée - La boîte à œufs connectée - La brosse à dents connectée - Le porte papier toilette connecté…
Trop de numérique ?
Petit(s) rappel(s) sur le numérique :
![](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.
Ecologie ?
Performance?
Une application rapide !
Une application qui ne rame pas !
Une application qui ne plante pas !
?
>>> FOCUS Vitesse <<<
Performance?
Pourquoi c'est pas forcément "GREEN" ?
<link rel="prerender" href="https://example.com/next-page.html">
Scalabilité
Le fameux "plus de serveurs"
Le LazyLoading
ISO 25010 - qualité logicielle
Performance?
Norme ISO ? International Standard Organisation
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/8588432/pasted-from-clipboard.png)
Tests de performance
Temps de réponse
Capacité
Utilisation de Ressource
Rafale
Consomme 185,2 l /min
Réservoir de 5875 litres
2222Km/h (1200 nœuds)
3700 Kms de rayon d'action
une Clio à un réservoir de 45 l
Qu'est-ce qu'on fait ?
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 système
Une seule image
Une icône
Une icône ?
Pas d'icône
Moins de ressources
3 écrans / 4 téléphones de tests / 2 PCs
Et pourquoi pas :
1 écran (ou 0) / 1 abonnement BrowserStack / 1 PC
Sur nos envs aussi !!
Moins de ressources
Moins de ressources
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 ! Et concrètement ?
1/ Ecoconception
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/8588640/pasted-from-clipboard.png)
«Intégrer l'environnement dès la conception des produits et des services» ISO 14062
OK ! Et concrètement ?
Ecoconception
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/8588640/pasted-from-clipboard.png)
« De la conception à la fin de vie du produit ! »
Analyse de cycle de vie (ACV)
ISO 14040/44
Multicritères
Conséquentiel?
2/ Choisir son hébergeur
Energie bas carbone
Réutilise les anciens composants
Utilise la chaleur générée pour autre chose
Fait des achats durables
Evite le Greenwashing en se disant "neutre en carbone" ;)
+ Bonne gestion de l'énergie (ISO 50001)
Prise en compte des problématique écologique (ISO 14001 / BC ?)
Bonus : Sécurité des donnés (ISO 27001)
Bonus : Sécurité des donnés (ISO 27001)
3/ Choisir son language
/!\ Ce n'est pas ULTRA impactant :)
!= Energie finale consommé
!= Temps d'execution
!= mémoire utilisée
4/ Mettre en place des bonnes pratiques
Les bonnes pratiques de vos langages / Frameworks
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9894558/pasted-from-clipboard.png)
Vous pouvez contribuer !
https://github.com/cnumr/best-practices
4.1 / Exemples
#1 Éliminer les fonctionnalités non essentielles
#2 Quantifier précisément le besoin
#5 Favoriser un design simple
#85 Mettre en place un plan de “fin de vie”
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9894558/pasted-from-clipboard.png)
4.1 / Exemples
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9894558/pasted-from-clipboard.png)
#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
#37 Utiliser le chargement paresseux (lazy-loading)
4.1 / Exemples
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9894558/pasted-from-clipboard.png)
#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
#114 Adopter les vidéos aux contextes de visualisation
#99 Utiliser un cache HTTP
5/Conseils \o/
Tester vos applications en bridant votre connexion
![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 !
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9894590/EcoIndex_v2.png)
https://ecoIndex.fr
Empreinte environnementale
Poids et complexité
Grade (A - G)
https://web.dev/measure
Informations d'amélioration
Metrics WebPerf
Grades (0 - 100)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9895639/Lighthouse.png)
https://webpagetest.org
Informations d'amélioration
Metrics WebPerf
Paramètres
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9895710/WebPageTest.png)
- Repeat
- Limitation du réseau
- N°1 infos WebPerf
https://dareboost.com
Informations d'amélioration
Metrics WebPerf
Infos Technologies
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9895740/DareBoost.png)
Grade (0 - 100%)
Coup de ❤️ Qualité
Et beaucoup d'autres...
Outils "d'analyse statique"
Outils de "profilage"
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/8591299/pasted-from-clipboard.png)
![](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/8591312/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/8591327/pasted-from-clipboard.png)
![](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/8592838/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9894593/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9895821/pasted-from-clipboard.png)
http://validator.w3.org/
Petite mise en perspective
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9895673/BilanCarboneSoutenable.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/9895685/pasted-from-clipboard.png)
2T CO2eq (GIEC)
#ShowYourStripes Merci le Numérique ❤️
Petite mise en perspective
Le Numérique est utile !
Il n'est pas indispensable.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/7702029/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1373846/images/7702033/pasted-from-clipboard.png)
TOUT le monde peut changer les choses !
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)
Comment lier performance et écologie ?
By Romuald Priol
Comment lier performance et écologie ?
- 823