Christophe Clouzeau

Christophe Clouzeau - TEMESIS - WAQ2021 - 1
GreenIT, sobriété, low-tech, bonnes pratiques du web,
inclusion, accessibilité, GreenUX, ...
#WAQ21 @webaquebec
NUMÉRIQUE RESPONSABLE
Vers une démarche d’éco-conception numérique

• Tombé dans la marmite du web dès 1996
• Ex-directeur d’agence numérique à Paris (FRANCE)
• Blog et conférences sur l’impact du numérique depuis 2011
• Expert UX et Éco-conception chez
• Membre contributeur
Qui suis-je ?
Groupe
Christophe_Cl

Christophe Clouzeau - TEMESIS - WAQ2021 -
Le modèle actuel dans un monde fini
3
consommation des énergies + émissions CO2 + GES =
RÉCHAUFFEMENT CLIMATIQUE.
population + surproduction + surconsommation =
ÉPUISEMENT DES RESSOURCES NATURELLES
& EXTINCTION MASSIVE DES ESPÈCES.

L’IMPACT
du numérique

Sources : WWF et https://www.greenit.fr/empreinte-environnementale-du-numerique-mondial/
Si le numérique était un pays, il aurait environ 2 à 3 fois l’empreinte de la France.
Or, si l'humanité vivait comme les français, il faudrait 2,7 Terre !
L’empreinte environnementale mondiale (oct. 2019)
5

L’empreinte
environnementale
en augmentation
6
Le poids de cette empreinte va doubler en 15 ans !
⚡ La consommation des énergies double tous les 8 ans.
💨 En 2030 le numérique représentera + de 10 % des GES mondiaux
et 20% de la consommation d’électricité
● 1,5 milliard de tonnes eqCO2
● 3 à 4 % des GES mondiaux
(plus que l’aéronautique civile)
2030 :
Blockchain
Cloud
Objets
connectés
Écran TV
Streaming
AI - intelligence
artificielle

Le poids
des pages web
explose
https://httparchive.org/reports/page-weight#bytesTotal
140:1
7
GRAS NUMÉRIQUE
1995 : 14 Ko
2010 : 470 Ko
2019 : 2.000 Ko
🚀 pour poser le pied sur la Lune,
70 ko furent nécessaires !

Impact de la Stratégie et UX → GREEN-UX
Le numérique est obèse dès la conception

AirBnB
3 Mo /page
174 requêtes
OBÉSICIEL
pour 4
champs de
formulaire !
GIEC
7,5 Mo /page
100 requêtes

Source : blog.octo.com, Greenit.fr
Énergies
GES
Ressources
Déchets
Eau
60 %
63 %
75 %
50 %
83 %
507:1
L’utilisateur est
responsable
Les 3 tiers techniques

ACV du numérique
11
FABRICATION
USAGE
FIN DE VIE

Sources : Ademe, The Shift Project, WWF France, Greenit.fr, Université des Nations Unies
FABRICATION USAGE FIN DE VIE
60 à 80 %
des impacts
• Ressources (eau, élect.)
• Minerais (qui se raréfient)
• Métaux rares (qui se raréfient)
• Contaminations chimiques
• GES
Répartis et assemblés
aux 4 coins du globe !
⚡ Fabrication + Usages :
3 à 5 % de la conso. d’
énergies monde
dont moitié que pour Usages en :
💨 Fabrication + Usages :
3 à 4 % des GES mondiaux
(plus que l’aéronautique civile)
• 21 kg DEEE /français/an
• Déchets traités par
le ⅓ monde
• Pollution des sols, eaux et air
par les produits chimiques
• Peu de recyclage, filière DEEE
insuffisamment développée
70 à 90 % des déchets sont hors
circuit des filières de recyclage
réglementées au niveau mondial
⅓
Data
Centers
⅓
Réseaux
⅓
Terminaux

Asie, unsustainablemagazine.com
13
GHANA, FranceTV
GHANA, RFI

LES USAGES
du numérique

Le COVID
La crise sanitaire a amplifié la démocratisation du numérique
à travers l’accélération des usages :
• streaming
• échanges visio/vidéo
• collaboration à distance
• cloud
• réseaux sociaux
15

Obsolescence programmée de nos appareils :
● matériel : cassé ou ne tient plus la charge
● logiciels obèse = OBÉSICIEL
- ‘ma batterie ne tient pas longtemps’
- ‘ça rame’
• Nous chargeons des contenus et des applications
de plus en plus LOURDS avec plein de fonctionnalités non utilisées
• Connexion partout : 4G, 5G, Wiﬁ public + Data facile : forfaits illimités
16
80 % des équipements
qui quittent l’entreprise est
parfaitement fonctionnel !
Pourquoi changeons-nous d’équipement ?

http://www.internetlivestats.com/
Nos usages permanents de la toile
17
le spam représente entre
55 et 95 % du trafic total e-mail

Streaming & vidéo
18
🚀 40 à 80 % de la bande passante
internet consommée selon le pays
Sources : Ademe, The Shift Project, Greenit.fr
VoD : Netﬂix, Disney+, Amazon Prime, Hulu, etc.
Tubes : Youtube, Dailymotion, Vimeo, Youku Tudou, etc.
Autres : Réseaux sociaux, Messageries, sites web, etc.

Sources : https://greenspector.com/fr/quelle-application-mobile-de-visioconference-pour-reduire-votre-impact/
À mettre à jour car Jitsi a évolué

Le covoiturage permet de réduire le nombre de personnes qui réaliseraient un
même trajet chacune de leur côté (= auto-stop).
MAIS sans covoiturage, 69% des passagers de Blablacar auraient pris le
train. S'ils ne le font pas, c'est parce que le train est plus cher.
+ l'appât du gain incite 21% de plus les conducteurs à proposer leur service.
économies d’énergie et d’argent
mais augmentation des déplacements
20
Sources : https://www.ademe.fr/sites/default/files/assets/documents/covoiturage_longue_distance-synthese.pdf
Attention aux effets rebond (1)

Moins d'un tiers des achats sur Leboncoin se substituent à des achats neufs.
Le reste relève plus du plaisir de saisir l'occasion d'une bonne affaire.
Leboncoin contribue même à l'hyperconsommation : certains utilisateurs
reconnaissent une pratique compulsive d'achat.
économies d’énergie et d’argent
mais augmentation des achats et de la consommation
21
Sources : http://www.iddri.org/Themes/02-PicoPaper_STUDY.pdf
Attention aux effets rebond (2)

Christophe Clouzeau - TEMESIS - WAQ2021 -22
Place à la sobriété
et à la responsabilité

Sobriété numérique
Forgée en 2008 par l’association GreenIT,
l'expression « sobriété numérique » désigne la démarche qui
consiste à concevoir des services numériques plus sobres
et à modérer ses usages numériques quotidiens.
23
conception / usages

Low-Tech
Pour répondre au secteur High-Tech,
l’expression « low-tech », ou « basse technologie »,
désigne avant tout un ensemble d’outils,
d’équipements, de démarches intellectuelles,
orientées vers l’économie réelle de ressources.
24
conception / usages ressources ⇊⇊
+

Low-Tech
25
LOW←TECH MAGAZINE
Ce site fonctionne à l’énergie solaire,
et se retrouve parfois hors-ligne
L’ÂGE DES LOW TECH
Vers une civilisation techniquement
soutenable
Philippe Bihouix

Green IT
L’éco-TIC, l'informatique durable, l'informatique verte,
est un ensemble de techniques visant à réduire l’empreinte
sociale, économique et environnementale du numérique.
26
tech / IT / infra

IT 4 Green
L’utilisation du numérique et des nouvelles technologies
au service de la réduction de l’empreinte environnementale
27
solutions numériques

IT 4 Green
#Tech4Good
#GoodTech
#GoodTech4Good
...
28
GREENLY
application qui calcule votre empreinte
carbone en fonction de vos achats
GEEV
site+app de dons d’objets et de nourriture
entre particuliers
(prix Tech for Good Awards nov. 2020)

IT 4 Green
#Tech4Good
#GoodTech
#GoodTech4Good
...
29
QARNOT
radiateur-ordinateur dont les sources
de chaleur sont des microprocesseurs
informatiques
STIMERGY
les 2 bassins de la piscine de la
Butte-aux-Cailles sont chauffés par des
serveurs informatiques

Permettre à toute personne, quelle que soit sa déficience
(visuelle, auditive, cognitive, etc.),
d’accéder aux services et aux contenus numériques.
Aujourd’hui, peu de services numériques sont accessibles.
(12 millions de personnes déficientes en France, de handicap lourd au mineur)
(1 million au QUÉBEC, soit 16% de la population)
https://www.numerique.gouv.fr/publications/rgaa-accessibilite/
30
handicap’
Accessibilité numérique

Inclusivité
L’inclusion est l’antonyme d’exclusion et vise à lutter
contre la « vulnérabilité » de certaines catégories de la population
à être en marge du secteur numérique, comme par exemple :
les handicapés, les personnes en illectronismes, les femmes, etc.
Femmes :
env. 30% des effectifs du secteur numérique
- de 8% de femmes diplômées dans la tech/IT
31

L’illettrisme numérique, ou encore l’illettrisme électronique :
la difficulté, voire l'incapacité, d’une personne
à utiliser les appareils et les services numériques
pour des raisons matérielles ou par manque de compétences.
Les services de la vie sont devenus numériques :
il faut posséder un ordinateur ou un smartphone (récent !).
32
fracture numérique
Illectronisme - “inhabileté numérique” (QC)

Inhabileté
numérique
20 %
des Français
(de + de 15 ans)
Amplification par fragilité :
-> plus l’âge est avancé
-> plus le niveau de
diplôme est bas
33

Éco-conception numérique
Conception d’un projet numérique
dans le but de
réduire son impact environnemental
34
conception / dev / usages environnement
+

NUMÉRIQUE RESPONSABLE
Le numérique responsable est
une démarche d’amélioration continue
qui vise à réduire l’empreinte écologique, économique et sociale
des technologies de l’information et de la communication.
35
conception / dev / usages DD : éco, env, soc
+

NUMÉRIQUE
RESPONSABLE
ÉCO-CONCEPTION
Bénéfices DD :
économiques
sociétaux
environnementaux
tient
compte
de
au
service
de
durable sobre inclusif éthique
(RGPD)
perform. access.

La démarche d’une IT plus “verte / vertueuse” est souvent inscrite au
programme RSE d’un organisme ou d’une entreprise.
La politique de Numérique Responsable permet :
● une attractivité employeur via son image de marque
● une économie énergétique et matérielle
● une économie de consommables (papier, encres, câbles, backup, etc.)
● une source de revenus possible via la revente à des reconditionneurs
● un levier d’innovations potentielles
37
Les bénéfices de la démarche Numérique Responsable

Comment je fais,
moi ?

Réfléchir en responsables
39
Fairphone (néerlandais)
Smartphone modulable
+ Shiftphone (DE), Iodé (FR), PinePhone (USA)
engagés dans les conditions sociales et la
provenance des ressources
Forfait Telecoop
Facture selon votre consommation réelle
1er opérateur Télécom coopératif engagé dans la
transition écologique et solidaire

• Moins d’emails pour aller dans la conception asynchrone,
qu’aux personnes principalement concernées OU parlez-vous !
• Former ses équipes en amont du projet et sensibiliser sans contraindre
• Lutter contre la multiplication des outils
• Centraliser les documents partagés à 1 seul endroit (iCloud local)
• Choisir des appareils sobres en consommation d’énergie, prolonger leur
durée de vie, réparer, donner, ou jeter dans une filière DEEE
• Pas de veille : couper les alimentations (y compris la box)
S’organiser en numérique responsable
40
Utilisation
raisonnée

Les piliers des éco-concepteurs du numérique
41
Source : APIdays juin 2020

Réflexions sur :
● les fonctionnalités et les contenus réellement utiles (‘Green UX’)
● le gras numérique, le superflu, la complexité, la lourdeur
● les interactions/animations nécessaires au sein des pages
● l’optimisation des parcours de navigation
● la sobriété esthétique et fonctionnelle
● le développement compatible bas débit et anciennes générations
● le choix d’un hébergeur “écologique”
42
Les bonnes pratiques de l’éco-conception numérique

• Réduire les requêtes, les fichiers CSS, le poids des images et médias
• Pas de lancement automatique de sons+vidéos
• Adapter la taille des contenus aux devices
• Limiter les scripts, les appels de services externes, les trackers, les fonts
• Arrêter les traitements si l’utilisateur ne le visualise pas
• Adapter les couleurs (23% de gain énergie en mode nuit/sombre)
• Code qui respecte les bonnes pratiques web et de performances CPU
Quelques pistes
43

Back / Front
44
plus de complexité = plus d’énergie consommée
(de points de vigilance, de maintenance, etc.)
comparatif LampStack VS JamStack
De Mathias Biilmann :
https://vimeo.com/163522126
C’est quoi la Jamstack ? https://jamstatic.fr/2019/02/07/c-est-quoi-la-jamstack/

Pour débuter et s’améliorer
45
● Écoconception web : les 115 bonnes pratiques,
par le Collectif GreenIT (3e éd.)
● Référentiel GREEN-IT, par l’Institut du Numérique
Responsable (INR) (v. 3)
● Déployer la sobriété numérique, par The Shift Project
● QUALITÉ WEB, 240 règles de références pour les
professionnels du web, par OPQUAST (v. 4)

La démarche de
l’éco-conception numérique
46

La démarche de l’éco-conception numérique
47
Mesurer Éco-concevoir
Mesurer
les gains
projet existant nouveau projet
Réaliser RUN
Mesurer pour améliorer : un enjeu vital
1. avoir un état des lieux
2. progresser sur les éléments les plus impactants

Mesurer la performance d’affichage
• Navigateur : Console/ Network/
• Google PageSpeeds Insight
• DareBoost
• GTmetrix
• Webtest.app
• WebPageTest.org
• Lighthouse + plugin GreenHouse
• ...
48

● QualScan
mesurer la qualité/sobriété des librairies JS (taille, dépendances, licence, etc.)
https://www.npmjs.com/package/qualscan#purpose
● Easyvirt.com : DC Scope® pour infrastructure vSphere
outil des Administrateurs système et des CTO, avec mesure GreenIT
49
Mesurer

Mesurer la consommation électrique
50
● Greenspector
● Scaphandre (Benoit Petit - Hubblo)
mesure la consommation d’énergie d’un
serveur et des services (logiciels, app, site)
https://github.com/hubblo-org/scaphandre

Mesurer la performance environnementale
• EcoIndex.fr (GreenIT)
+ extension GreenIT-Analysis (Firefox & Chrome)
https://github.com/cnumr/GreenIT-Analysis
• Carbonalyser (TheShiftProject : FF + Chr)
• EcoMeter.org (Ademe) fonctionne 1 x/… ?
• WebSiteCarbon.com (GB)
• EcoGrader.com (USA)
• ...
51

Évaluer l’accessibilité
• W3C Nu DOM Validator (bookmarklet) https://dequeuniversity.com/validator
• WCAG contrast checker (ext. nav.) Firefox + Chrome
• Web Developer (ext. nav.) https://chrispederick.com/work/web-developer/
• Color Contrast Analyser (app. bureau)
https://developer.paciellogroup.com/resources/contrastanalyser/
• NVDA (lecteur d’écran Win gratuit) https://www.nvda-fr.org/cat.php?id=2
• JAWS (lecteur d’écran Win démo gratuite) http://freedomsci.de/serv01fra.htm
• VoiceOver (lecteur d’écran Mac préinstallé)
+ Test manuels et des outils de Tests automatique (intégration continue)
52

Constater l’amélioration SEO
• Google Search Console
• OnCrawl (SaaS, payant)
• Cocolyze (essai gratuit)
• SEMRush (SaaS, payant)
• Yooda Insight (français, essai gratuit)
• ...
53

Extra
54

Sur son lit de mort, personne ne se dit :
« J’aurais aimé passer plus de temps sur Facebook »

Christophe CLOUZEAU - @Christophe_Cl
christophe.clouzeau@temesis.com
MERCI
de votre attention

Christophe Clouzeau

More Related Content

Similar to Christophe Clouzeau (20)

More from Web à Québec (20)

Recently uploaded (20)

Christophe Clouzeau