Eco-conception web
Impact écologique du numérique
Internet consomme 10 à 15% de l'électricité mondiale... et cette consommation double tous les 4 ans!
Nos usages numériques produisent plus de GES (gaz à effet de serre) que l'aviation civile.
+ la pub
+ le streaming
Empreinte moyenne par internaute et par an :
- 396 kWh d’énergie
- 375 kg de gaz à effet de serre
- 2 000 litres d’eau.
Combien de personnes dans le monde n'ont pas toujours pas accès à l'eau potable?
Quelques exemples
Un mail de 1 Mb = 1 ampoule de 200W allumée pendant une heure.
1 recherche dans google = 20 mg d'équivalent CO2
A mettre en perspective
La fabrication d’un ordinateur de 2 kg :
800 kg de matières premières mobilisés
124 kg de CO2 générés, sur les 169 kg émis sur l’ensemble de son cycle de vie
Et les équipements?
▶ 9 milliards d’appareils
• 2 milliards de smartphones
• 1 milliard d’ordinateurs
• 5 à 7 milliards d’objets connectés
▶ 45 millions de serveurs
▶ 800 millions d’équipements réseaux (routeurs, box ADSL...)
=> coût d'utilisation
=> que deviennent-ils après utilisation?
Combien avez-vous d'équipements connectés?
Depuis combien de temps?
Pourquoi changer ses équipements?
Désenchantement logiciel
Windows 95 = 30 MB
Windows 10 = 4 GB
Appli clavier google = 150 MB
Et maintenant, on fait quoi?
Quelques pistes
- Changer ses habitudes (d'utilisateur et de dev)
- Former et se former
- Informer
- ...
- Changer la réglementation
- Mettre en place un label
Soyons précis sur les termes
IT for Green = solution numérique visant à résoudre/atténuer un problème environnemental
Exemple : le thermostat connecté
GreenIT = démarche d'amélioration continue qui vise à réduire les impacts environnementaux d'un système d'information
Exemple : achat d'appareils reconditionnés pour l'entreprise
Eco-conception = intégrer la réduction des impacts environnementaux dès la conception d'un service numérique avec une vision globale sur l'ensemble du cycle de vie.
Exemple : choisir des outils plus appropriés, éliminer les fonctionnalités non-utilisées
Exemples et cas d'étude
Learning by doing
Mise en oeuvre
Projet : audit du site de Simplon Saint-Gaudens
=> quelles sont les actions à prioriser?
Eco-conception de service numérique
Cycle de vie d'un service numérique
Les différentes étapes de la démarche
- Sobriété numérique
- Architecture de service et choix de techno
- Optimisation technique
- Utilisation
- (Hébergeur)
Sobriété numérique
Toutes les fonctionnalités sont-elles indispensables?
Exemples
Un forum, suivre en direct la météo ou le cours de la bourse, etc.
Une appli mobile quand un site ou une PWA peuvent suffire.
Architecture technique
Choisir la techno la plus adaptée, en se basant sur les fonctionnalités nécessaires.
Se renseigner sur l'impact écologique des technos + optimisations possibles (ex: Wordpress, Pressflow, jekyll, etc).
Optimisation technique
Bien mais pas suffisant (60-70% des impacts liés à la conception et au choix des technos)
Les 115 bonnes pratiques fournissent beaucoup d'éléments.
Les plugins Firefox et Chrome aussi.
=> veilles techno à réaliser : minifier, le cache, les images
Utilisation
Le site qui propose le service est-il facile à trouver? (référencement)
Le service est-il utilisable par tous ? (accessibilité mais aussi performance)
Hébergeur
Compliqué d'avoir des éléments concrets pour le choix d'un hébergeur.
- portion d'électricité sert à alimenter les serveurs (PUE),
- la quantité d'eau pour les refroidir,
- d'où vient l'électricité (énergies renouvelables),
- que deviennent les équipements après utilisation (encore fonctionnels)
Innovation
Se poser toutes ces contraintes est l'occasion d'innover!
Mise en pratique
Etape 1
Réserver un billet de train : départ demain avant 10h de Carbonne vers Toulouse. Retour après 16h.
Mise en pratique
Etape 2
Comment savoir si mon train a du retard?
Les bénéfices de l'éco-conception
A votre avis?
Finalités
Améliorer l'expérience utilisateur
Diminuer l'impact écologique
Cercle vertueux
Pour améliorer l'UX, on améliore l'accessibilité (=> SEO).
En allégeant l'outil, on améliore la performance (efficience).
En augmentant la perfomance, on améliore l'UX et le référencement.
=> démarche d'éco-conception a un impact social mais aussi "commercial"!
Performance
53% des utilisateurs quittent le site s'il met plus de 3 secondes à charger.
Pour remédier à cela, on parle d'efficience (faire mieux avec moins) plutôt que d'efficacité (faire mieux, avec plus si besoin).
Communication
Il est indispensable de communiquer autour des démarches d'éco-conception :
=> utile pour ceux qui voudraient faire pareil
=> sensibiliser/convertir
=> donner une meilleure image de sa structure
Mener un audit
Pourquoi un audit?
Pour intervenir sur une ressource existante :
- site web
- service numérique
=> savoir de quoi on part pour estimer le besoin mais aussi l'efficacité de la démarche
Audit de service numérique
Identifier le parcours utilisateur concerné
Le décrire étape par étape (en faisant)
Evaluer l'impact du parcours dans son ensemble (fonctionnel)
Evaluer l'impact de chaque étape (fonctionnel + technique)
=> plugins d'évaluation de l'impact (eco-index)
Audit de site
Plugin pour vision globale (GreenIT Analysis) voire très globale (Eco-index).
Checklist pour vérifier l'application des bonnes pratiques.
Une refonte (archi/techno/fonctionnelle) est-elle envisageable?
Quelle finalité?
Souligner ce qui va bien mais aussi ce qui peut être amélioré.
Fournir des préconisations.
Savoir évaluer ce qui doit être fait, ce qui peut l'être et ce qu'on peut retirer de ces process (=> efficacité).
Posture : faire la différence entre ce que disent les référentiels/outils et ce que pense l'auditeur!
Exemples d'outils
Ecoindex
GreenIT Analysis (plugin chrome)
aXe: Accessibility for Development Teams
GTmetrix
UnusedCSS
The W3C Markup Validation Service
Screaming Frog SEO
Dareboost
Sucuri SiteCheck
web.dev
Les outils proposés dans les DevTools des navigateurs (chrome : lighthouse et autres, firefox : accessibilité)
D'autres ressources utiles
On s'y met!
Simplon4all
Sourcing
Mesurer la performance de la démarche
Principe
Identifier les indicateurs pertinents.
Effectuer une mesure avant et après la démarche d'éco-conception pour comparer.
Vision globale
Utiliser un plugin EcoIndex/GreenIT Analysis.
=> pas forcément assez précis, manque d'impact concret
Vision par bonne pratique
Si l'audit se base sur la checklist des 115 bonnes pratiques, plus facile à détailler.
=> impact technique mais pas métier.
Mesure de l'impact
Se baser sur des critères "techniques" : taille de la page, temps de chargement, nombre de requêtes, etc.
L'angle commercial
Identifier avec le client des critères métier : nombre de visiteurs, taux de rebond, taux de conversion, panier moyen, etc.
=> à cadrer en amont avec le client
=> dépend de ses priorités
Efficacité de la démarche
Attention : pour une démarche vraiment efficace, il faut au préalable prioriser les actions en fonction de :
- difficulté pour les mettre en oeuvre,
- impact potentiel
Créer un site (ou un service numérique) éco-conçu
Avantages/désavantages
Les + :
- pouvoir intervenir plus facilement sur le fonctionnel et la stack technique
- pouvoir aborder l'éco-conception dans sa globalité
Les - :
- plus difficile de mesurer les gains (pas d'élément de comparaison)
Expression du besoin
Repenser le périmètre fonctionnel :
- fonctionnalités inutiles (gras bio)?
- fonctionnalités réalisables autrement (mail/SMS)?
Permettre au client d'être acteur de cette démarche
=> bien garder en tête le découpage en services numériques
Architecture
Une fois le fonctionnel défini, déterminer l'architecture/stack technique la plus pertinente.
=> Efficience.
Faire ces choix en accord avec le choix de l'hébergeur.
Réalisation
Respecter les bonnes pratiques techniques.
Préférer un mode Agile (affiner les fonctionnalités avec le client, amélioration continue) => continuer à impliquer le client dans cette démarche.
Tout est bien qui finit bien
Documenter le process d'éco-conception.
=> rédiger un REX.
Communiquer autour de la démarche (et de ses résultats).
Mise en pratique
[CdC Barquette & Cie]
Quelques tips
Trackers
Google Analytics est-il utilisé?
Quelles sont les données vraiment pertinentes parmi celles collectées?
=> si possible, préférer Matomo.
Pistes en vrac
iframes, images, éviter les slideshows, remplacer les cartes (google maps) par des images...
=> petit à petit, constituer un catalogue d'astuces concrètes.
Ressources
Etat des lieux
Ils le font, ils en parlent
Autres acteurs
Des bouquins en arbre mort
Les événements
Des questions?
Eco-conception
By LauDev
