Numérique

🎯 Bienvenue dans l’Écoconception

Cette section rassemble une démarche complète d’écoconception numérique avec:

• ✅ Guide complet 5 étapes
• ✅ 5 cartographies pratiques à chaque phase
• ✅ Outils et sources fiables
• ✅ Pièges courants à éviter

---

📚 Ressources Principales

👉 Guide Complet: Écoconception en 5 Étapes

Le document de référence couvrant:

1. Étape 1: Alignement Valeurs-Fonctionnalités

   • Cartographie: Identifier alignements positifs/négatifs

2. Étape 2: Audit de l’Existant

   • Cartographie: Analyse d’impacts actuels (ACV simplifiée)

3. Étape 3: Cartographie Détaillée (CENTRALE)

🎯 Objectif: Réduire l’Empreinte Numérique du Site

Cet audit vise à identifier les gisements d’économie d’énergie et de ressources sur le site Hugo, en s’appuyant sur les pratiques GR491 de l’Institut du Numérique Responsable (INR).

---

🛠️ Outils d’Audit Utilisés

Outil	Utilité	Points forts
Lighthouse	Performance, accessibilité, bonnes pratiques	Scores détaillés, recommandations prioritaires
Kastor.green	Analyse d’empreinte carbone numérique	Liens direct vers RGESN et GR491 de l’INR
Web Vitals	Métriques Core Web Vitals	Compression, temps de réponse

---

📊 Améliorations Identifiées (Priorisées)

🔴 Critique (Impact > 200 Kib)

Action	Gain Estimé	Pratique GR491	Hugo Implementation
Activer compression Gzip/Brotli	437 Kib	1.1 - Réduire poids transféré	Config output.formats.HTML.mediaTypes
Éliminer CSS inutilisé	260 Kib	4.2 - Optimiser CSS	Utiliser PurgeCSS ou TailwindCSS avec purge
Réduire JavaScript inutilisé	176 Kib	2.1 - Minimiser ressources JS	Lazy loading, code splitting par section

🟡 Important (50-200 Kib)

Action	Gain Estimé	Pratique GR491	Hugo Implementation
Images optimisées (WebP, dimensions)	~150 Kib	3.1 - Images responsives	Hugo image processing + formats multiples
Ajouter attributs width/height images	~50 Kib	3.2 - Éviter CLS	Front-matter YAML ou shortcodes
Diffuser avec cache HTTP efficace	Voir durée	5.1 - Cache statique	Headers Cache-Control: max-age=31536000

🟢 Recommandé (< 50 Kib)

Action	Gain Estimé	Pratique GR491	Hugo Implementation
Ajouter print CSS	~10 Kib	1.3 - Média queries print	assets/css/print.css + @media print
Minifier HTML/JSON	~20 Kib	1.2 - Minification	Config Hugo minify.minifyOutput = true
Lazy loading iframes	~5 Kib	2.3 - Lazy loading	Attribut loading="lazy" sur iframes
Supprimer polyfills inutiles	~15 Kib	2.1 - Code mort	Audit bundle JS, vérifier support navigateurs

---

🗺️ Mini-Guide Opératoire (Basé sur GR491)

Phase 1: Diagnostic Détaillé (GR491 Critère 1-2)

Objectif: Identifier consommation réelle avant/après

J’ai choisi de consulter l’histoire de cette notion de “sustainability” dans le développement logiciel, pour voir si ses racines étaient toujours d’actualité, et si nous n’étions pas passé à côté de quelque chose ou carément à autre chose, à l’heure du Green IT et du numérique éthique ou responsable.

Sustainability dans la culture et littérature agiles

Le Manifeste agile

La première référence qui peut venir à l’esprit est le Manifeste agile et son 8ème principe:

Frago est un outil opensource, fait à l’origine pour faciliter la gestion des audits d’accessibilité.

Il permet notamment la génération automatique des documents officiels comme la déclaration d’accessibilité après ajout d’un simple résultat d’audit au format csv.

Mais Frago c’est bien plus que ça. J’ai tenté d’en savoir plus auprès de Bertrand Keller, auteur et principal contributeur, qui a eu l’amabilité de répondre à mes questions au delà des explications disponibles sur le site.

Force est de constater qu’il existe de plus en plus de référentiels de pratiques d’écoconception numérique. S’ils ont en commun l’intention d’améliorer le numérique en général pour en limiter les impacts sociaux et environnementaux, ils ont chacun leurs spécificités d’approche, de périmètre et de praticité.

Le meilleur est donc … certainement celui qui vous permettra d’atteindre de meilleurs résultats dans votre contexte.

Aussi le référentiel ne fait pas tout. La démarche d’écoconception est prépondérante. Si les référentiels d’origine évoluent peu, la démarche se veut adaptative, et progressive.

Cet article vise à démontrer que des gains rapides peuvent être réalisés pour rendre son site plus vert, en suivant simplement les recommandations d’outils très accessibles du navigateur : EcoIndex et Lighthouse pour n’en citer que 2 directements utilisables dans Chrome.

Bien sûr, il ne s’agit pas de s’arrêter à ces premières actions, mais si tous les sites pouvaient déjà bénéficier de quelques heures d’attention écoresponsable, tout le monde se porterait un peu mieux.

Cet article traite de la stratégie technique par rapport à la diversité des composants, produits, options disponibles et à leur évolution.

Nous avons déjà parlé de l’importance de formaliser et enregistrer les décisions d’architecture avec les ADRs.

Ici, nous allons voir quelques outils stratégiques de représentation des informations qui puissent servir à aligner les moyens techniques aux besoins.

L’intérêt réside dans la dynamique d’utilisation de ces outils. Il ne s’agit pas de créer une photo figée mais bien d’itérer et d’adapter pour

Pourquoi mon intérêt pour ce thème ?

Plusieurs facteurs concordant m’ont incité à m’inscrire à un webinaire ce samedi matin 23/04/2022.

• Les Designers éthiques, Association de recherche-action autour de la conception responsable et durable

• La CNIL

• Les SMACS

Les SMACS

J’étais passé à côté de ces 2 termes SMACS et Métavers jusqu’ici. Hors, j’ai l’opportunité de donner une formation sur le bon usage des données, technologies et outils numériques à des étudiants en mastère communication. Une occasion pour moi de rafraîchir mes connaissances et d’apprendre au contact de nouvelles personnes d’un nouveau domaine pour moi.

J’ai eu mon premier ordinateur personnel à l’entrée au collège, en 1984. Je me suis rapidement passionné par toutes les activités possibles, de l’écriture de programmes à leur usage plus ou moins ludique. Cela m’a conduit naturellement au métier de développeur. Après plus de 20 ans passés en entreprise de services numériques, j’ai connu dans mon parcours professionnel quelques mini-révolutions : la conception objet a déplacé mon attention portée un temps aux schémas de bases de données entité/relations, le Java a remplacé le Pascal, le RAD a limité l’utilisation de l’UML et du RUP, l’agilité enfin a balayé (du moins dans mon état d’esprit) la gestion de projet classique par phases au profit d’une relation plus directe, plus transparente entre les utilisateurs et l’équipe de développement.

La carte de matérialité est un outil stratégique du développement durable (DD), utilisable dans toute démarche RSE, et visant à définir la réponse optimale aux attentes des différentes parties prenantes, en considérant les impacts et enjeux économiques, environnementaux et sociaux.

La carte se présente généralement sous la forme de 2 axes

• les enjeux DD des parties prenantes sur l’axe des ordonnées d’une importance faible à forte en haut
• les enjeux DD de l’organisation / entreprise sur l’axe des absisses, d’une importance faible à forte à droite h=300px >}}

On considère les attentes des parties prenantes internes/externes, faibles à fortes et le potentiel de création de valeur ou enjeux pour l’entreprise, l’organisation.