Définition
Définition de l'ADEME (Agence de la transition écologique): l'éco-conception est une démarche préventive et innovante qui permet de réduire les impacts négatifs du produit, service ou bâtiment sur l’environnement sur l’ensemble de son cycle de vie (ACV), tout en conservant ses qualités d’usage.
Chantiers futurs
Nous précisons que la commission a choisit de se concentrer dans un premier temps sur l'éco-conception des produits numériques (que nous sommes amenés a développer pour nos clients) qui est un sujet parmi d'autres regroupés sous la bannière du numérique responsable. Nous n'oublions donc pas les volets suivants qui, pour nous, restent indiscociables des bonnes pratiques écologiques :
- 🙆🏽♀️ Accessibilité
- 👩🏽 Inclusivité
- 👌 Bonnes pratiques internes
Ainsi la page pourra par exemple être renommée dans un futur proche "charte/checklist des bonnes pratiques du numérique responsable chez Troopers."
Checklist
⚙️ Conception
- Privilégier les fonctionnalité réellement utiles aux utilisateurs-trices
- Utiliser les méthodes de co-création pour cadrer le besoin et fluidifier les processus
- Penser agilité
- Travailler en atomic design et fournir un design systeme
- Mettre en place un plan de fin de vie du site
✨ Ergonomie
- Préférer la saisie assistée à l'autocompletion
- Favoriser un design simple, épuré, adapté au web
- Penser responsive et/ou mobile first
- Privilégier les fonctionnalités réellement utiles aux utilisateurs-trices
🖼️ Dev front
- Compresser les images au format Webp
- Minifier et optimiser les svg. Outils : Compressor.io, SVG minify, SVGO
- Fournir une CSS pour l'impression
- Eviter les animations CSS/Javascript coûteuses
- Utiliser le lazy loading
- Éviter les framework lourds donc la plupart des fonctionnalités ne seront pas utilisées
- Éviter les mises à jour via des boucles infinies en Javascript
- Si le temps réel est nécessaire, utiliser des technologies comme les web sockets
- Favoriser la configuration d'un thème sombre
- Privilégier les polices système à la place des fichiers de police (exemples : GitHub, Stack Exchange)
⚒️ Dev back
- Mettre en place des caches :
- Stocker les données statiques localement
- Bytecode
- données calculées souvent utilisées
- Mettre les caches entièrement en RAM (opcode et kvs)
- Limiter le nombre de requêtes HTTP
- Choisir les technologies les plus adaptées
- Favoriser les pages statiques
- Créer une architecture applicative modulaire
- Choisir un format de données adapté
- Limiter le nombre de domaines servant les ressources, à l'exception d'un domaine sans cookies pour héberger les ressources (CSS/JS)
- Utiliser un système de templating (Smarty, Twig)
- Redimensionner les images en dehors du CMS
- Favoriser HSTS Preload list aux redirections 301
- Utiliser des serveurs virtualisés
- Installer le minimum requis sur le serveur, limiter le recours aux plugins et API, à l'exception des forks applicatifs orientés "performance"
- Stocker les données dans le cloud
- Ne pas générer de page 404
🏡 Hébergement
- Minifier les fichiers css et javascript
- Optimiser la taille des cookies
- Favoriser les hébergeurs verts
Source