Numérique Responsable
Comment lier performance et écologie ?
DocRoms.com
Romuald
Bluesky : docroms.com
LeadDev
- Performance
- Qualité (éthique, sécurité… )
- Eco-conception
- Ecologie
- Numérique Responsable
- Inclusion & Accessibilité
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 ?
Qu'est-ce qui se passe ?
Ce n'est PAS "immatériel"
Ex : le Bitcoin
Digiconomist
(link, 2.4mo)
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 !
Petit(s) rappel(s) sur les métaux :
Il y en a beaucoup... partout !
l'extraction pollue énormément
L'impact n'est PAS qu'environemental
40 000 enfants travaillent dans des mines
d'extraction de métaux.
Petit(s) rappel(s) sur l'ACV :
ACV
FairPhone 4
(pdf, 1.2mo)
Petit(s) rappel(s) sur le numérique :
L'impact c'est principalement NOUS
Petit(s) rappel(s) sur le numérique :
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://donnees.banquemondiale.org/
(link, 1.8mo)
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">
Le fameux "plus de serveurs"
Le LazyLoading
Les CDNs
ISO 25010:2023 - qualité logicielle
Performance?
Norme ISO ? International Standard Organisation
Tests de performance
Temps de réponse
Capacité
Utilisation de Ressource
https://www.iso.org/standard/78176.html
(link, 1.1mo)
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é
Nouveaux meilleurs potes ❤
Qualité
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é ^^
+ de qualité !
Sécurité
Performance
A11Y ( Accessibilité )
Architecture
UI / UX
- d'inutile
Ok, j'ai compris, j'agis avec Qualité ! Mais pourquoi ?
Pour réduire l'impact de notre applicatif !
Yep avec Sobriété !
La sobriété c'est de la qualité Mr JeSaisTout !
Ok, j'ai compris, j'agis avec Qualité ! Mais pourquoi ?
Sur le réseau
Moins d'échanges !
Moins de données transmises !
Coté Back
Moins de charge serveur
Moins de CPU utilisé
Moins de mémoire allouée
Moins de stockage
Coté Front
Moins de données téléchargées
Un applicatif plus léger
Metrics UX et Core Web Vitals au top
Il faut absolument éviter l'obsolescence logicielle de nos applicatifs
Des données téléchargées utiles
Bonus : l'impact Social
Une réduction de la fracture numérique
Le biais des dev ?
une app plus inclusive
OK ! Et concrètement ?
1/ Ecoconception
«Intégrer l'environnement dès la conception des produits et des services» ISO 14062
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
/!\ Impact /!\
!= Energie finale consommé
!= Temps d'execution
!= mémoire utilisée
!= Complexité cyclomatique
4/ Repartir des fondamentaux
HTML - CSS - JS / SDK natif
HTTP & DNS
Headers (cache, sécurité, perf)
Stockage local
La documentation de vos languages !
La documentation de vos frameworks, de vos SDK !
5/ Mettre en place des pratiques "responsables"
OPQUAST
https://checklists.opquast.com/fr/qualite-numerique/
W3C
https://w3c.github.io/sustainableweb-wsg
DINum (MiNumEco) - RGESN
https://ecoresponsable.numerique.gouv.fr/publications/bonnes-pratiques/
Le Collectif GreenIT
https://rweb.greenit.fr/
RGAA
RGPD
RGS
RGESN
5.1 / Exemples
Éliminer les fonctionnalités non essentielles
Quantifier précisément le besoin
Favoriser un design simple
Mettre en place un plan de “fin de vie”
Limiter le nombre de requêtes HTTP
Limiter le nombre de domaines servant les ressources.
Redimensionner les images en dehors du navigateur
Utiliser le chargement paresseux (lazy-loading)
5.1 / Exemples
N’utilisez que les portions indispensables des bibliothèques JavaScript et CSS
Mettre en cache les données calculées souvent utilisées
Éviter d’effectuer des requêtes SQL à l’intérieur d’une boucle
Adopter les vidéos aux contextes de visualisation
Utiliser un cache HTTP
Utiliser des "façades"
6/Conseils \o/
Tester vos applications en mode "dégradé"
Brider le réseau
Brider le CPU
10kb Challenge ?
Analyser et Monitorer tout ça !
If you can’t measure it, you can’t improve it.
Lord Kelvin
(William Thomson)
La console de dev
https://pagespeed.web.dev
Informations d'amélioration
Metrics WebPerf
Grades (0 - 100)
TreeMap
https://pagespeed.web.dev
TreeMap
https://webpagetest.org
Informations d'amélioration
Metrics WebPerf
Paramètres
- Repeat
- Limitation du réseau
Coup de ❤️
Sélecteur d'infos
https://webpagetest.org
Coup de ❤️
RequestMap (béta)
https://ecoIndex.fr
Empreinte environnementale
Poids et complexité
Grade (A - G)
https://validator.w3.org
Et beaucoup d'autres...
Outils "d'analyse statique"
Outils de "profilage"
http://validator.w3.org/
Petite mise en perspective
2T CO2eq (GIEC)
#ShowYourStripes Merci le Numérique ❤️
Petite mise en perspective
Le Numérique est utile !
Il n'est pas indispensable.
Don
TOUT le monde peut changer les choses !
Merci !
Des questions ?
Bluesky : docroms.com
