Charte
éco-conception

Rappel sur l’éco-conception digitale  

L'éco-conception digitale consiste à repenser les dispositifs numériques pour limiter leur impact énergétique et environnemental. Ce processus ne se limite pas aux aspects “technique” mais englobe également l'optimisation, voire la disruption, des parcours utilisateurs. Il s'agit de proposer une expérience numérique plus sobre en adoptant une approche mesurée en termes d'interface et de gestion des données. Cette démarche se traduit par la création de produits répondant véritablement aux besoins des utilisateurs, tout en minimisant la complexité technique et l'usage de technologies ou fonctionnalités superflues. L'objectif est de concevoir des architectures numériques efficientes d'un point de vue énergétique. 

Notre rôle en tant qu’Agence 

Qu’on se le dise : notre rôle est crucial dans la mise en œuvre de l'éco-conception. Nous avons la responsabilité de développer des sites web et des applications qui non seulement répondent aux besoins de nos clients mais qui le font de manière écologiquement responsable. Nous avons donc un rôle à jouer en adoptant un ensemble de bonnes pratiques sur toutes les phases du cycle de vie des dispositifs digitaux : de l’avant vente (conseils, sensibilisation, spécifications, chiffrage), en passant évidement par la conception (parcours utilisateurs, direction artistique, code), ainsi que son exploitation (hébergement, dimensionnement des serveurs, maintenance, évolution), ainsi que sur la “fin de vie” (suppression de fonctionnalités, code mort, arrêt des serveurs, et services peu ou pas utile, etc.) . Ces bonnes pratiques, sont le résultat du travail du collectif greenIT (association 1901), regroupant ainsi l’expertise de plus de 40 acteurs du numérique sensibilisés à ces sujets. En les adoptant et en favorisant leur diffusion, nous contribuons donc non seulement à une expérience utilisateur plus épurée, à des dispositifs plus performants, mais surtout à la limitation de leur impact environnemental. 

Nos engagements

Nous sensibilisons nos clients à l’éco-conception.
#Avant vente

• Nos présentations commerciales mettent en avant notre charte d’éco-conception 

• Nous proposons une démarche de co-construction, s’inspirant des méthodologies agiles, permettant d’atteindre les objectifs du client le plus rapidement possible (en limitant donc au maximum le superflu)

Nous envisageons des solutions minimalistes. 
#Conception 

• Principe de parcimonie, “less is more”

• Toutes les fonctionnalités sont questionnées. Seront-elles utilisées ? Peut-on atteindre le même bénéfice utilisateur d’une façon plus simple ? Peut-on tout simplement s’en passer ? 

• Pour les applications existantes, les métriques d’audience sont récoltées et analysées afin d’identifier des fonctionnalités peu ou pas utilisées, et nous questionnons ensuite leur pertinence. 

• Pour les nouveaux projets, nous proposons de faire passer des tests utilisateurs, nous vérifions le non-intérêt des utilisateurs cibles pour une fonctionnalité et accumulons de la donnée qualitative 

• En collaboration avec nos designers, nous essayons de limiter au maximum le choix d’utilisation de composants gourmands (nécessitant souvent une lib externe) et privilégions les solutions simples et efficaces telles que les solutions natives des navigateurs (sliders...) 

• Nous questionnons systématiquement l’utilité de certaines fonctionnalités “lourdes” (slider, carto, composant de formulaire personnalisé, widget réseaux sociaux, video autoplay...) et proposons des alternatives natives ou plus sobres.

Nous auditons régulièrement nos sites pour réduire leur empreinte carbone.
#Conception

• Les pages principales de nos sites sont testées via google page speed

• Chaque projet vise un score minimum de 80 sur le critère “performance”, qui inclus notamment les “core web vitals”

Nous utilisons les formats d’image et video appropriés en exploitant les algorythmes de compression de dernière génération. 
#Code

• Selon le navigateur, le site charge les images les moins lourdes possibles selon ses compatibilités (AVIF, Webp puis JPEG/PNG en dernier recours) 

• Les images sont mises à disposition dans les formats AVIF & Webp 

• Les images sont incluses dans des balises pictures avec des srcset 

• Les images dans le CSS sont incluses avec image-set 

• Les fallback JPEG sont compressés avec jpegoptim ou jpegtran 

• Les fallback PNG sont compressés avec optipng 

• Les SVG sont compressés avec svgo 

• Les polices web embarquent uniquement le jeu de caractères nécessaire (et donc pas tous les caractères accentués inutiles) 

• Les images sont servies au format où elles seront affichées (pas de resize dans/par le navigateur) 

• On utilise le tag picture et les srcset pour envoyer l’image au bon format en fonction de la taille du device

Les différentes techniques de mise en caches sont utilisées dès que possible. 
#Code 

• Les entêtes de cache (Cache-Control, ETag) exploitées par les navigateurs sont définies dès que possible afin de diminuer la bande passante nécessaire. 

• Par défaut, La durée des différentes mises en cache est configurée au plus “haut” possible (par exemple 1 an pour les images), et des techniques de “cache-busting” sont utilisées pour faciliter la mise à jour des contenus. 

• Le serveur met également en cache (mémoire ou fichier) les traitements gourmands (appels API, call BDD, computing complexe) afin de réduire sa consommation de ressource. 

Nous privilégions l’hébergement local et eco-responsable. 
#Hébergement 

• Nous recommendons et travaillons avec des hébergeurs éco-responsables, et labelisés  

• Nous hébergeons nos applicatifs internes avec ces hébergeurs. 

• Nos serveurs de recette interne hébergent plusieurs projets, Nous limitons ainsi le nombre de machine necessaire 

Nous encourageons le télé-travail et la mobilité douce. 
#Quotidien 

Avoir une politique verte, c’est aussi réduire l’empreinte carbone de l’ensemble de l’entreprise. Nous avons fait le choix de travailler principalement à distance. Cela nous permet de réduire les émissions de carbone liées aux déplacements des membres de notre équipe. En cas de déplacement (chez nos clients par exemple,) nous favorisons les déplacements en train et en transports en commun et lorsque ce n’est pas possible nous organisons du covoiturage. Enfin, lorsque nous souhaitons nous retrouver autour d’une même table pour agiter nos neuronnes de façon synchrone, nous sous-louons un espace de travail partagé ! 

Plus globalement, nous essayons d’appliquer toutes les bonnes pratiques du collectif green IT. 
#All-in 

Nous nous engageons à connaitre, comprendre, recommander, et appliquer les bonnes pratiques ci-dessous lorsque cela est possible, a chacune des phases du cycle de vie des dispositifs digitaux sur lesquels nous travaillons. 

Vous pouvez retrouver l’explication détaillée de chaque point sur le référentiel partagé par le collectif greenIT: 

Specifications

1. Ne pas retenir les fonctionnaliés non essentielles 

2. Quantifier précisément le besoin 

3. Supprimer les fonctionnalités non utilisées 

4. Privilégier une approche "mobile first" 

Conception

1. Optimiser le parcours utilisateur

2. Valider le parcours utilisateur

3. Proposer un traitement asynchrone lorsque c'est possible

4. Respecter le principe de navigation rapide dans l’historique

5. Éviter les animations Javascript / CSS

6. Limiter le recours aux carrousels

7. Avoir un titre de page et une metadescription pertinents

8. Favoriser un design simple, épuré, adapté au web

9. Préférer la pagination au défilement infini

10. Préférer la saisie assistée à l'autocomplétion

11. N'utilisez que les portions indispensables des bibliothèques JS et CSS

12. Mettre en cache les données calculées souvent utilisées

13. Éviter le transfert de grandes quantités de données

14. Favoriser les pages statiques

15. Préférer une PWA (site mobile “installable”) à une application mobile native similaire au site web

16. Afficher des pages d'erreur statiques

17. Limiter le nombre d'appels aux API HTTP

18. Favoriser un développement sur-mesure à l'usage d'un CMS

19. Réduire le volume de données stockées au strict nécessaire

20. Ne se connecter à une base de données que si nécessaire

21. Favoriser le "Request collapsing"

22. Mettre en place un "Circuit breaker"

23. Mettre en place une architecture élastique

24. Créer une architecture applicative modulaire

25. Utiliser la version la plus récente du langage

Réalisation

1. Fournir une alternative textuelle aux contenus multimédias 

2. Fournir une CSS print 

3. Favoriser les polices standards 

4. Ne pas afficher les documents à l'intérieur des pages 

5. Utiliser le rechargement partiel d'une zone de contenu 

6. Limiter le nombre de CSS 

7. Découper les CSS 

8. Préférer les CSS aux images 

9. Utiliser les compartiments CSS 

10. Modifier plusieurs propriétés CSS en 1 seule fois 

11. Ecrire des sélecteurs CSS efficaces 

12. Externaliser les CSS et JavaScript 

13. Valider votre code avec un Linter 

14. Ne pas faire de modification du DOM lorsqu’on le traverse 

15. Rendre les éléments du DOM invisibles lors de leur modification 

16. Ne charger des données ou du code que lorsque c'est indispensable 

17. Limiter le nombre de requêtes HTTP 

18. Ne pas redimensionner les images coté navigateur 

19. Optimiser les images 

20. Préférer les glyphs aux images 

21. Utiliser le chargement paresseux 

22. Réduire au maximum le repaint et le reflow 

23. Eviter les blocages dus aux traitements javascript trop longs 

24. Mettre en cache les objets souvent accédés en JavaScript 

25. Limiter le recours aux canvas 

26. Utiliser la délégation d'évènements 

27. Réduire les accès au DOM via JavaScript 

28. Assurer la compatibilité avec les anciens appareils et logiciels 

29. Remplacer les boutons officiels de partage des réseaux sociaux 

30. Économiser la bande passante grâce aux ServiceWorker 

31. Valider les pages auprès du W3C 

32. Optimiser la taille des cookies 

33. Choisir un format de données adapté 

34. Stocker les données statiques localement 

35. Eviter d'effectuer des requêtes SQL à l’intérieur d’une boucle 

36. Optimiser les requêtes aux bases de données 

37. Choisir les technologies les plus adaptées 

38. Utiliser certains forks applicatifs orientés "performance" 

39. Bien choisir son thème et limiter les extensions dans un CMS 

Production / Exploitation

1. Utiliser un CDN 

2. Utiliser tous les niveaux de cache du CMS 

3. Mettre en cache les réponses Ajax 

4. Mettre les caches entièrement en RAM 

5. Utiliser un cache HTTP 

6. Ajouter des entêtes Expires ou Cache-Control 

7. Combiner les fichiers CSS et JavaScript 

8. Compresser les fichiers texte : CSS, JS, HTML et SVG 

9. Minifier les fichiers CSS, JavaScript, HTML et SVG 

10. Définir une politique d'expiration et suppression des données 

11. Stocker les données dans le cloud 

12. Héberger les ressources statiques sur un domaine sans cookie 

13. Limiter le nombre de domaine servant les ressources 

14. Privilégier HTTP/2 à HTTP/1 

15. Favoriser HSTS Preload list aux redirections 301 

16. Désactiver le DNS lookup d’Apache 

17. Utiliser un serveur asynchrone 

18. Réduire au nécessaire les logs des serveurs 

19. Supprimer tous les warning et toutes les notices 

20. Apache Vhost : désactiver le AllowOverride 

21. Mettre en place un sitemap efficient 

22. Adapter la qualité de service et le niveau de disponibilité 

23. Utiliser des serveurs virtualisés 

24. Optimiser l'efficacité énergétique des serveurs 

25. Installer le minimum requis sur le serveur 

26. Privilégier une électricité à plus faibles impacts environnementaux 

27. Choisir un hébergeur éco-responsable 

28. S’appuyer sur les services managés 

29. Optimiser et générer les médias avant importation sur un CMS 

30. Limiter l'utilisation des GIFs animés 

31. Optimiser les images vectorielles 

32. Eviter d'utiliser des images matricielles pour l'interface 

33. N'utiliser que des fichiers double opt-in 

34. Limiter la taille des emails envoyés 

35. Limiter les emails lourds et redondants 

36. Encoder les sons en dehors du CMS 

37. Adapter les sons aux contextes d'écoute 

38. Éviter la lecture et le chargement automatique des vidéos et des sons 

39. Adapter les vidéos aux contextes de visualisation 

40. Compresser les documents 

41. Optimiser les PDF 

42. Adapter les textes au web 

43. Limiter les outils d'analytics et les données collectées 

Support / Fin de vie

1. Eviter les redirections 

2. Désactiver les logs binaires 

3. Avoir une stratégie de fin de vie des contenus 

4. Mettre en place un plan de fin de vie du site