## Objectif

Quand nous développons des sites Web, nous avons à cœur de les rendre les plus légers possibles afin d’améliorer les performances pour les utilisat⋅eurs⋅rices, et aussi de réduire l'utilisation de la bande-passante pour diminuer l’énergie nécessaire à fournir ces services.

Néanmoins, il n’est pas toujours facile d’identifier quelles sont les parties à améliorer. Il existe plusieurs outils ([EcoIndex](https://www.ecoindex.fr/) ou [Greenspector](https://greenspector.com/) pour l’impact environnemental), et nous avons retenu Lighthouse qui mesure les performances comme l'accessibilité, et que nous avons pu intégrer facilement à notre CI.

## Lighthouse

[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview?hl=fr) est un outil de mesure des performances d’une page Web développé par Google. Il évalue notamment : la vitesse d’affichage et de poids de page, le référencement (SEO), ainsi que l’accessibilité. Il simule la navigation comme le ferait un humain, et calcule le temps passé entre la demande du navigateur et la fin de l’affichage. Tout en évaluant le temps passé à télécharger les scripts et feuilles de style, et à exécuter le code Javascript.

On peut l’utiliser pour générer un rapport de la page que l’on souhaite (par exemple, [notre site](https://pagespeed.web.dev/analysis/https-www-troopers-coop/lz3s7730k4?form_factor=mobile)) : 

![performances.png](https://strapi.troopers.coop/uploads/performances_d4cdbbf7cf.png)

On souhaitait mesurer régulièrement les performances d’un projet afin de vérifier qu’elles ne s’éloignent pas de notre objectif, mais cela nous aurait demandé de lancer des analyses manuellement à intervalles réguliers.

Heureusement, il est possible d'automatiser ces analyses, nous allons vous présenter comment.

## Intégration continue

Grâce à notre [expérience avec GitLab CI](https://www.troopers.coop/blog/donnez-des-ailes-a-votre-gitlab-ci), nous avons pu facilement mettre en place une tâche automatique qui lance Lighthouse : 

1. un⋅e développeu⋅r⋅se modifie le code du projet
2. la personne pousse ses changements sur GitLab ouvre une demande de fusion
3. GitLab CI lance automatiquement la compilation du projet
4. ensuite, GitLab CI va faire tourner [Lighthouse](https://github.com/GoogleChrome/lighthouse-ci/blob/main/docs/getting-started.md) (via Docker) sur cette version du code, puis les envoyer à Google
5. les résultats du rapport sont visibles via un lien généré par Lighthouse

## Confidentialité des données et évolution dans le temps

Ces mesures sont très intéressantes, mais nous voulions améliorer 2 points : 
- stocker les données dans notre infrastructure au lieu d’envoyer les données à Google
- avoir un historique pour pouvoir comparer les rapports avant et après un changement

Fort heureusement, Google fournit également le[ côté serveur de Lighthouse](https://github.com/GoogleChrome/lighthouse-ci/blob/main/docs/server.md). Nous avons ainsi pu configurer notre propre instance (également via Docker).

Ainsi, GitLab CI envoie les résultats des analyses sur notre Lighthouse, ce qui ouvre de nouvelles possibilités :
- confronter les notes et mesures pour vérifier qu’une évolution ne dégrade pas les performances du site, pour ensuite faire des corrections adéquates ou expliquer au client si une diminution des performances est inévitable (par exemple, l’ajout d’une image, même optimisée, aura forcément un coût)
- constater l’évolution au fur et à mesure du temps, afin d'avoir une vue d’ensemble des performances
- les données ne sont pas transmises à Google, nous gardons le contrôle des résultats

Exemple : 
![exemple.png](https://strapi.troopers.coop/uploads/exemple_e08f69e31a.png)

Il faut prendre en compte qu’il y a une variabilité entre les résultats due aux serveurs de CI :
- Lighthouse peut être lancé par des serveurs différents, qui n’ont pas les mêmes performances
- ces serveurs peuvent être plus ou moins occupés en fonction des autres tests en cours
- il peut y avoir une congestion sur le réseau à ce moment-là (pour les appels à Strapi, qui héberge le contenu des pages)

Pour pallier cela, nous sommes en train de tester différentes solutions : restreindre Lighthouse à un seul serveur, mettre en cache les données de Strapi avant de lancer les tests pour éliminer la variabilité du réseau, etc
.
## Configuration de Lighthouse
### Côté serveur
docker-compose.yml


```yaml
services:
 lighthouse-ci-server:
 lighthouse-ci-server:
 image: 'patrickhulce/lhci-server'
 restart: always
 ports:
   - '127.0.0.1:9001:9001'
 volumes:
   - '/var/docker/lighthouse/:/data'
```

On peut alors interroger ce serveur pour [créer un projet](https://github.com/GoogleChrome/lighthouse-ci/blob/main/docs/getting-started.md#project-creation).
### Dans le projet
On utilise les règles recommandées par Lighthouse et on définit quelle(s) URL(s) on souhaite utiliser : 

 .lighthouserc.js 

```javascript
module.exports = {
 ci: {
   assert: {
     preset: 'lighthouse:recommended',
   },
   collect: {
     url: ['http://localhost:3000/fr'],
   },
   upload: {
     target: 'temporary-public-storage',
   },
 },
}
```

### Dans GitLab CI
On définit 3 valeurs de configuration via les variables de GitLab CI : 
- LIGHTHOUSE_USER : utilisateur HTTP
- LIGHTHOUSE_PASSWORD : mot de passe HTTP
- LIGHTHOUSE_BUILD_TOKEN : généré quand on a créé un projet


.gitlab-ci.yml

```yaml
.lighthouse-ci: &lighthouse-ci
 image: cypress/browsers:node-20.17.0-chrome-128.0.6613.119-1-ff-130.0-edge-128.0.2739.63-1
 stage: tests
 tags:
   - yarn-cache
 before_script:
   - yarn global add @lhci/cli@0.14.x
 only:
   - merge_requests
   # this is required to provide a base build to Lighthouse
   - develop


tests-lighthouse-ci:
 <<: *lighthouse-ci
 script:
   - yarn install


   - yarn build-web


   - nohup yarn start-web &
   - .ci/wait-for-it.sh localhost:3000 --timeout=120 # Donne du temps au serveur pour démarrer


   - lhci collect --numberOfRuns 1 --collect.settings.chromeFlags="--no-sandbox"
   # Supprimer les résultats du « pré-chauffage »
   - rm -rfv .lighthouseci/


   - lhci collect --collect.settings.chromeFlags="--no-sandbox"


   - lhci assert
 artifacts:
   paths:
     - .lighthouseci/
   expire_in: 24 hrs
   when: always
 allow_failure: true


lighthouse-ci:upload:
 <<: *lighthouse-ci
 stage: lighthouse
 needs: ['tests-lighthouse-ci']
 dependencies: ['tests-lighthouse-ci']
 variables:
   LHCI_SERVER_BASE_URL: https://lighthouse.troopers.agency
   LHCI_BASIC_AUTH__USERNAME: ${LIGHTHOUSE_USER}
   LHCI_BASIC_AUTH__PASSWORD: ${LIGHTHOUSE_PASSWORD}
   LHCI_TARGET: lhci
   LHCI_TOKEN: ${LIGHTHOUSE_BUILD_TOKEN}
 script:
   # the directory must exist
   - ls -lh ${PWD}/.lighthouseci/
   - lhci upload
```

## Conculsion
L’ajout de Lighthouse à nos processus qualité nous offre un nouveau regard quantitatif sur les performances de nos projets web. C’est rapidement devenu un des indicateurs qui nous aide à améliorer nos développements au quotidien, et par conséquent les projets de nos clients.

![meme.png](https://strapi.troopers.coop/uploads/meme_57e739fc67.png)

Mesurer les performances de nos sites web avec LightHouse, côté client et serveur

En avril dernier, nous vous avions proposé un petit quiz du Numérique Responsable, et vous avez été nombreux⋅se⋅s a y participer, avec une moyenne générale de 7.36/10 ; Félicitations !

Pour celles et ceux qui n'ont pas eu l'occasion de participer, ne vous inquiétez pas, il reste en ligne à l'adresse suivante : https://quizz.troopers.coop/

Voici les réponses à toutes les questions, avec un lien vers le post LinkedIn du mardi NR lié :

## Quels sont les trois piliers du Numérique Responsable ?

Réponse : Planète, Personnes, Prospérité


https://www.linkedin.com/feed/update/urn:li:activity:7158036208969744384


## Comment s'appelle le référentiel pour l'écoconception des services numériques ?

Réponse : Le RGESN


## Que signifie le sigle RGAA ?

Réponse : Référentiel Général d’Amélioration de l’Accessibilité

https://www.linkedin.com/feed/update/urn:li:activity:7160580387822297089


## Parmi ces éléments, laquelle est une bonne pratique d'éco conception ?

Réponse : Mise en place d’une police système

https://www.linkedin.com/feed/update/urn:li:activity:7163109551653789697


## À quoi sert un élément HTML avec l'attribut "lang" ?

Réponse : À signifier un changement de langue au lecteur d'écran

https://www.linkedin.com/feed/update/urn:li:activity:7165653862257803265


## Où se situent les deux tiers de l'impact environnemental numérique ?

Réponse : Dans les équipements utilisateurs

https://www.linkedin.com/feed/update/urn:li:activity:7168183020137492480


## Comment faire pour que les notifications soient bien restituées au lecteur d'écran ?

Réponse : Ajouter le role "alert"

https://www.linkedin.com/feed/update/urn:li:activity:7170726690736828416



## Quelle est la phase la plus importante du projet pour l'éco-conception ?

Réponse : La conception

https://www.linkedin.com/feed/update/urn:li:activity:7168183020137492480



## En 2020, quel est le pourcentage des sites publics qui ont respecté l'obligation de publier leur attestation de conformité au Référentiel Général d'Amélioration de l'Accessibilité (RGAA) ?

Réponse : 4%


## J'ai mis une image de plante verte pour décorer mon article sur l'éco-conception. Que dois-je mettre dans l'alternative textuelle de l'image ?

Réponse : Rien du tout (alt="")

https://www.linkedin.com/feed/update/urn:li:activity:7183388288316014592


Pour appronfondir vos connaissance en numérique responsable, n'hésitez pas à consulter les documents de référence que sont le [RGAA](https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/) et le [RGESN](https://ecoresponsable.numerique.gouv.fr/publications/referentiel-general-ecoconception/).

Alors, sur quelle(s) question(s) avez-vous répondu faux ? Dites-le nous sur les réseaux ! 


Quiz Numérique Responsable : les réponses aux questions !

Nous l’avons vu dans l’[article précédent](https://www.troopers.coop/blog/pourquoi-devons-nous-tendre-vers-un-numerique-plus-responsable), il est urgent de mettre en place une démarche responsable dans le numérique. Le numérique joue un rôle crucial dans nos métiers, que l’on soit client ou prestataire, que l’on soit développeuse, développeur, designer ou chef·fes de projet, il est impératif de réévaluer nos méthodes. 
 
**Mais par où commencer ? Comment ? Que puis-je faire à mon échelle ?**

**Nous allons ici vous donner les clés pour vous lancer efficacement !**

## Étape 1 : prendre conscience et sensibiliser

Avoir conscience du problème est un début, mais seul, on ne peut pas faire grand-chose et nous ne sommes pas forcément décisionnaires. Il est donc important d’être en mesure de sensibiliser les différentes parties prenantes d’un projet. Nous vous avons concocté une sélection d’outils pour sensibiliser autour de vous.

 
 


  
  


  
  


  
  






### MOOC Institut Numérique Responsable
Une bonne première étape serait de proposer le [MOOC INR](https://www.academie-nr.org/) à votre équipe, il existe une version sensibilisation très courte de 30 min et une autre plus complète d’environ 4h. 
À l’issue du MOOC, vous avez la possibilité de passer le [Certificat de connaissance NR](https://institutnr.org/certificat-de-connaissance-nr) !

### Fresques
Pour aller plus loin, la [Fresque du numérique](https://www.fresquedunumerique.org/) propose des sessions de sensibilisation qui peuvent même être accueillies dans votre entreprise.  Elle permet d’avoir une bonne vision globale des enjeux grâce à des activités ludiques.

### Atalan
Le site d’[Atalan](https://www.atalan.fr/agissons/fr/), nous offre une première base assez parlante et visuelle grâce à une simulation nous montrant les difficultés qu’une personne en situation de handicap (trouble de la vue, de l’audition,  handicap moteur…) peut rencontrer lors de sa navigation.

### Associations
Pour continuer sur cette lancée, les associations [Latitudes](https://www.latitudes.cc/) et [Make Sense](https://makesense.org/) organisent de nombreuses actions de sensibilisation, suivez-les sur les réseaux sociaux pour participer aux événements près de chez vous.

## Étape 2 : avoir envie et se former

Comment ne pas avoir envie de faire évoluer nos pratiques quand on a découvert l’envers du décor ?  Voici une sélection de formations, la plupart sont payantes sauf les guides de la (génialissime) association Designer Éthiques qui sont en accès libre ! Comment ne pas en profiter pour s’autoformer ?




### Opquast
Éligible au CPF, la formation certifiante [Opquast](https://www.opquast.com/) est un bon début. Conçue pour tous les professionnels du Web, elle est basée sur les bonnes pratiques à adopter et centrée sur la diversité des utilisateurs et utilisatrices. 


### GreenIT
Plus centré sur l’éco-conception, [GreenIT](https://www.greenit.fr/formations/) propose des formations et certifications. Frédéric Bordage a d'ailleurs écrit de nombreux livres sur le sujet. 


### Access42
Concernant l’accessibilité, Access42 est un organisme de référence. Ils proposent notamment la formation “[Développer et coder des sites accessibles](https://formations.access42.net/formations/developper-et-coder-des-sites-accessibles/)“ qui est également éligible au CPF.


### Designers Éthiques
Pour les designers, l’association Designers Éthiques a créé un super [guide d’éco-conception de services numériques ](https://eco-conception.designersethiques.org/guide/fr/) et propose régulièrement des formations et ateliers.  Nous vous recommandons aussi leur guide “[Concevoir sans Dark Pattern](https://beta.designersethiques.org/thematique-design-persuasif/concevoir-sans-dark-patterns)”

## Etape 3 : mettre en pratique et vérifier

Une fois nos méthodes de travail repensées, il est temps de se lancer, mais les différents référentiels et checklist qui existent sont plutôt conséquents et cela peut faire peur. 
L’idéal est vraiment de les prendre en compte dès le début, dès l’idée même du service numérique. 

Ensuite, il suffira de bien vérifier les points à chaque étape de conception et vous verrez, ça se fera (presque) tout seul. 😀




### Les référentiels généraux
Ces deux référentiels sont pilotés par la Direction Interministérielle du Numérique (DINUM), le Ministère de la Transition Écologique en collaboration avec l’ADEME et l’Institut du Numérique Responsable pour le RGESN.
Ce sont des référentiels à destination des professionnels, ils nécessitent donc d’avoir un niveau plutôt avancé sur les sujets de l’éco-conception et l’accessibilité.



#### RGESN - Référentiel Général d'Écoconception de Services Numériques
Le [RGESN](https://ecoresponsable.numerique.gouv.fr/publications/referentiel-general-ecoconception/) est composé de 79 critères segmentés en 8 grandes thématiques, ainsi chaque partie prenante peut consulter le sujet qui la concerne.  
_A noter qu’un nouveau référentiel, celui de l’Arcep (Autorité de régulation des communications électroniques, des postes et de la distribution de la presse) devrait voir le jour début 2024._

**Le plus :** le plugin [NumEcoDiag](https://ecoresponsable.numerique.gouv.fr/publications/referentiel-general-ecoconception/numecodiag/) basé sur le RGESN vous aide à évaluer votre service !

#### RGAA - Référentiel Général d’Amélioration d’Accessibilité
Le [RGAA](https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/) permet de rendre les sites et services numériques accessibles à toutes et à tous. 

**Le plus :**  [ara.gouv.fr ](https://ara.numerique.gouv.fr/) est un outil en ligne qui vous permet d’auditer votre service. Vous pouvez commencer par l’audit rapide de 25 critères qui donne un bon aperçu.  Attention, il nécessite une bonne connaissance de la méthode technique du RGAA.
Le plugin [Assistant RGAA](https://assistant-rgaa.empreintedigitale.fr/) peut vous aider à mieux visualiser certains critères.


### Autres checklist et référentiels
Il existe de nombreuses checklist et référentiels, à vous de choisir l’outil qui vous convient et qui répond le mieux à votre besoin ! En voici une sélection.

**Le référentiel des [115 bonnes pratiques](https://collectif.greenit.fr/ecoconception-web/) d'écoconception web de GreenIT.**

Une référence en la matière si ce n’est LA référence. Ce référentiel est très bien construit avec des règles de tests claires qui permettent de pointer la mise en œuvre (ou pas) des bonnes pratiques et ainsi d’évaluer votre score de maturité. Celui-ci est plutôt à destination des profils techniques.

**La [checklist Opquast](https://checklists.opquast.com/fr/assurance-qualite-web/)** avec ses 240 règles et bonnes pratiques, est toujours une bonne base pour la qualité Web et intègre des points concernant l’accessibilité.

**La [checklist pour designer un web accessible et inclusif](https://design-accessible.fr/checklist)** est vraiment top pour les designer (et pas que), très claire et visuelle, vraiment un super boulot d’Anne-Sophie Tranchet.

**[GR491, Le guide de Référence de Conception Responsable de Services Numériques](https://gr491.isit-europe.org/)**, créé par l’INR, il est très complet et composé de 516 critères, également répartis en 8 grandes thématiques axées conception responsable. Bon par contre, bon courage pour appliquer 516 règles…


## Outils pour un départ réussi 

Pour finir, parce que vous êtes arrivés jusqu’ici, vous l’avez bien mérité, voici quelques outils bien pratiques au quotidien  !

### Audits d’écoconception en ligne
Le **[site Eco-index](http://www.ecoindex.fr/)** permet d’évaluer l’impact environnemental de votre site Web. Vous pouvez même installer le [badge](https://github.com/cnumr/ecoindex_badge) sur votre site ! L’extension GreenIT-Analysis fournit aussi l’Eco-index d’une page mais permet en plus d'avoir une première analyse basée sur les 115 bonnes pratiques, disponible sur [Chrome](https://chromewebstore.google.com/detail/greenit-analysis/mofbfhffeklkbebfclfaiifefjflcpad?hl=fr&pli=1) et [Firefox](https://addons.mozilla.org/fr/firefox/addon/greenit-analysis/).

**[Ecograder](https://ecograder.com/)** vous fournira un score sur 100 avec le détail des points, assez visuel pour identifier facilement les points d’amélioration.

**[Kastor](https://kastor.green/)** outil d’audit en ligne basé sur le référentiel GR491 de l’INR, dorénavant il permet aussi de tester l’accessibilité du service. Attention le nombre de tests gratuits est limité !

### Extensions pour vérifier certains critères d’accessibilité
**Heading Maps** est très utile car elle permet de vérifier la bonne structuration des titres d’une page, chose très importante en accessibilité, disponible sur [Chrome](https://chrome.google.com/webstore/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi) et [Firefox](https://addons.mozilla.org/fr/firefox/addon/headingsmap/).

**Wave** disponible sur[ Firefox, Chrome et Edge](https://wave.webaim.org/extension/) permet de faire une première évaluation d’accessibilité de votre site.

**WCAG Color contrast checker** disponible sur [Chrome](https://chrome.google.com/webstore/detail/wcag-color-contrast-check/plnahcmalebffmaghcpcmpaciebdhgdf) et [Firefox](https://addons.mozilla.org/en-US/firefox/addon/wcag-contrast-checker/) vous permet de vérifier les contrastes de couleur de votre page. A savoir qu’il existe des plugins de ce type aussi pour [Figma comme A11y - Color Contrast Checker](https://www.figma.com/community/plugin/733159460536249875/A11y---Color-Contrast-Checker)

_NB : ce sont des aides mais ces audits en ligne ne valent pas une vraie évaluation par des professionnel·les._

## Mettez vous en action pour un Numérique Responsable !

Pour l’instant, il n’existe aucun label ou loi obligeant à éco-concevoir les services numériques mais bientôt certainement alors autant s’y mettre dès maintenant non ?
Quant à elle, la loi concernant l’accessibilité existe depuis un moment, il serait grand temps de la mettre en application !

**Nous sommes convaincu·es que l’on peut chacun·e faire notre part en fonction de notre expertise et sensibilité 💪.**

**Donc maintenant, à vous de jouer !**


Comment passer au numérique responsable en 3 étapes ?


Bien plus qu'une simple tendance, le numérique responsable est une nécessité, nous devons repenser le numérique pour un avenir plus respectueux de l'environnement et des personnes. 

Trop souvent négligée, l’empreinte environnementale et sociale du numérique doit nous alarmer sur nos pratiques et habitudes. 

**Mais peut-on vraiment associer les mots numérique et responsable ?**

**Que peut-on faire pour tendre vers un numérique plus responsable ?**

## Un numérique irresponsable
Le numérique, souvent considéré comme immatériel, cache en réalité une empreinte écologique et humaine significative.


### Les impacts du numérique sur la planète 
Chaque étape du cycle de vie d’un appareil numérique a un impact sur l’environnement de sa fabrication jusqu’à sa fin de vie, en passant par son usage évidemment.

#### L'émission de gaz à effet de serre
Le numérique contribue à environ 4% des émissions mondiales de gaz à effet de serre et ce chiffre est en augmentation de 8% par an. Pour mettre en perspective, le transport aérien représente 2,5 % et le transport automobile 6%*, le numérique pollue donc plus que nos voyages en avion.

#### L’énergie utilisée
Nos usages numériques, incluant data centers, terminaux et infrastructures, représentent 7,5% de notre consommation d'électricité. La vidéo en ligne correspond à 60 % des flux de données mondiaux et la production des terminaux représente presque 50% de la consommation énergétique du numérique !*

#### L’exploitation des ressources en matière première et eau
La fabrication de nos outils numériques a un impact majeur, à titre d’exemple : 200 kg de matière première sont nécessaires pour fabriquer un smartphone de 200 g et chaque tonne de terre nécessite l’utilisation d’au moins 200m3 d’eau* N’oublions pas que l’eau est également utilisée pour refroidir les data centers qui hébergent nos données. En tout, le numérique consomme 7,8 millions de m3 d’eau douce par an.




### Les impacts du numérique sur les humains
Exploitation des biais cognitifs, manipulation des algorithmes, économie de l’attention, désinformation, le numérique a un grand pouvoir sur la société...

#### Besoins vitaux et sociaux 
80% des adultes passent plus de 3 h par jour devant un écran avec pour conséquences : la perturbation des rythmes biologiques, l’augmentation de la sédentarité et de l’inactivité, troubles de l'apprentissage ou encore cyber-harcèlement.

#### Libertés
Les fake news se répandent 6 fois plus vite que les vraies informations qui favorisent de plus en plus la polarisation des idées et la désinformation. Par ailleurs, certains services numériques exploitent les dark patterns (design trompeurs en français) et jouent avec nos biais cognitifs pour nous manipuler. Snapchat, en encourageant les interactions quotidiennes avec des récompenses (les flammes), en est un parfait exemple, nous rendant volontairement dépendants. 

#### Inclusion et diversité
24% des 15-64 ans sont en situation de handicap au sens large pourtant seulement 5% des sites internet sont accessibles et 1 personne sur 6 en France n'a pas utilisé internet au cours de l'année 2019. Sans commentaire…

### Mais ça s’améliore non ?
Non, pas vraiment. 😅

Le nombre d’internautes est en constante augmentation et ils ont de plus en plus d'équipements. Le poids des pages web suit le même chemin, entre 1995 et 2022 il a été multiplié par 155 et ne cesse d’augmenter*. Pour faire simple : réserver un billet de train transporte au moins 3 fois plus d’octets qu’il y a 10 ans pour faire exactement la même chose ! 

Cette augmentation du poids des pages web s'accompagne d'une exigence croissante de puissance des terminaux, raccourcissant leur durée de vie "en bonnes conditions" et incitant les utilisateurs à les remplacer plus fréquemment. D’autant que **c’est la fabrication du matériel lui-même qui représente le plus d’impact.**

La fabrication des outils numériques a également des répercussions humaines. La fabrication nécessitant des minerais rares comme le cobalt et le coltan, leur exploitation dans les mines génère des conflits politiques et des conditions de travail inhumaines impliquant des enfants.

Le numérique a permis de grandes avancées mais a aussi des conséquences beaucoup moins souhaitables : un impact environnemental massif et grandissant, des inégalités entre utilisateurs ainsi qu’un problème d’éthique évident. 

**Heureusement, des solutions existent pour tendre vers un numérique plus responsable !**

## Qu’est-ce que la conception de services numériques responsables ?
Frédéric Bordage de l’association Green IT, la définit ainsi « la conception de services numériques plus performants d'un point de vue environnemental, économique et social ». Le Numérique Responsable vise à concevoir  un service numérique guidé par les 3P : People, Planet, Prosperity (personnes, planète, prospérité), ils font écho aux 3P du développement durable People, Profit, Planet.

### Personnes
Prendre en compte l’aspect social du numérique, l’impact qu’il peut avoir sur les personnes. Il est question ici d’éthique et de respect des utilisateurs mais également de diminution de la fracture sociale par, entre autres, l’accessibilité des services.

### Planète 
Créer un service numérique le plus sobre possible afin de réduire l’empreinte environnementale du numérique. Pour cela, il est nécessaire d’éco-concevoir nos produits et services numériques ainsi que nos infrastructures.

### Prospérité
Penser un service au-delà de sa valeur économique, mais bien en considérant la valeur que celui-ci apporte aux personnes et à la planète. Cela passe par la prise en compte des leviers du développement durable lors de la conception du service.


## Quels sont nos leviers d’action ?
Le Numérique Responsable intervient à chaque étape du cycle de vie d’un service numérique, de sa conception jusqu’à la gestion de sa fin de vie. Nous avons de nombreux leviers d’action, en voici quelques-uns.

### Penser inclusion et accessibilité
Sur le web, nous ne partons pas tous avec les mêmes facilités. C’est pourquoi il est essentiel de comprendre et de répondre aux besoins de tous les utilisateurs, quel que soit leur âge, leur niveau de compétence technologique, leurs capacités physiques ou leur équipement. Souvent réduite à des contraintes légales liées au handicap, l’accessibilité n’est que rarement respectée, cela est certainement dû à des préjugés et à un manque de sensibilisation parmi les professionnels du web et les porteurs et porteuses de projet.

**L'accessibilité et l'inclusion numériques ont pour but de garantir à chaque utilisateur une expérience web optimale.**

### Éco-concevoir nos services numériques
Afin de minimiser l'impact environnemental des sites et applications web à toutes les étapes de leur existence, ces derniers peuvent être éco-conçus. 
Il faut savoir qu’environ 45% des fonctionnalités demandées ne sont jamais utilisées, et 70% ne sont pas essentielles. La définition du besoin et des fonctionnalités est donc une étape essentielle avec un impact fort. L'éco-conception nécessite également des choix judicieux en matière de design, d'interface, de code, d'infrastructure et d'hébergement. 

**Cette approche permet de créer des interfaces plus légères, efficaces et performantes, tout en prolongeant la durée de vie des appareils utilisateurs.**

### Proposer un service éthique
Tout simplement en concevant des interfaces respectueuses des utilisateurs et de leur vie privée, sans essayer de les manipuler en exploitant leurs biais cognitifs pour répondre à des objectifs commerciaux. Nous pouvons concevoir en veillant à minimiser les intrusions et en évitant de renforcer leur dépendance à nos applications. Et bien évidemment respecter leurs données personnelles. 

**En bref, en concevant POUR nos utilisateurs et utilisatrices et non contre eux et elles.**


## Engagez-vous pour un numérique plus responsable avec Troopers !
En tant qu'agence web et professionnel·les du numérique, nous avons la possibilité, et la responsabilité, de contribuer au développement d’un numérique plus responsable. 
Chez Troopers, nous défendons le numérique responsable aussi bien dans nos métiers que dans nos engagements et notre environnement de travail.



**Prêt·es à vous engager aussi ?**

**Nous vous donnerons, dans un prochain article, les clés pour vous aussi amorcer cette démarche.**

**Ensemble, construisons un numérique plus responsable !**




_*Sources : INR, GreenIT, Shifters, Latitudes, Amnesty International, Ademe._

Pourquoi devons-nous tendre vers un numérique plus responsable ?

Il y a quelques semaines, l'un de nos clients nous a remis les résultats d'un audit d'éco-conception. L’audit a montré que l'une des pages auditées pesait 20 Mo, dont 9,7 Mo étaient attribuables aux lecteurs intégrés de YouTube !  De plus, 51 requêtes de cette page sur 221 concernaient uniquement YouTube.com, alors que la page ne comportait que 4 vidéos intégrées. 

Pour remédier à cela, nous avons décidé d'intégrer une petite action rapide lors de notre sprint : **réduire le poids de la page en diminuant la taille des vidéos YouTube.**





## Réduire la taille de votre page web en affichant des vignettes pour les vidéos YouTube.

Les vidéos en ligne, et surtout celles de YouTube, sont connues pour être de vrais ogres énergétiques. En fait, elles représentent environ 20 % du total des émissions de gaz à effet de serre (GES) dues au numérique, **soit 1 % des émissions mondiales de gaz à effet de serre**, d'après une étude menée par The Shift Project en 2019. 

Une des solutions pour réduire cet impact est de **remplacer le lecteur YouTube par une vignette.** Cette vignette peut ressembler au lecteur et inciter l’utilisateur à cliquer pour lancer la lecture. Cela évite de charger le lecteur vidéo au chargement de la page pour rien si le visiteur décide de ne pas lire la vidéo.

Avec cette méthode, la page web sera plus légère et moins énergivore. En effet, les vignettes sont des images statiques qui sont généralement assez petites en taille, ce qui signifie qu'elles ne nécessitent pas beaucoup de bande passante pour être téléchargées. De plus, les vignettes sont souvent mises en cache sur les navigateurs des utilisateurs, ce qui signifie que si une vignette a déjà été téléchargée pour une vidéo particulière, elle ne sera pas téléchargée à nouveau lorsque l'utilisateur visite une autre page qui contient la même vignette.

En revanche, **les players vidéo, comme celui de YouTube, nécessitent une grande quantité de bande passante et de temps de chargement**. Ils doivent non seulement télécharger la vidéo elle-même, mais également charger tous les éléments nécessaires pour lire et contrôler la vidéo, tels que les boutons de lecture/pause, les barres de progression, les options de qualité vidéo, etc. En conséquence, les vignettes sont une alternative efficace aux players vidéo pour réduire la consommation de bande passante et le temps de chargement des pages web.

En plus d'être plus respectueux de l'environnement, remplacer le player YouTube par une vignette de la vidéo permettra à vos utilisateurs de **ne pas être embêtés par des lectures automatiques de vidéos** qui peuvent vite devenir agaçants. 

Et pour vous, pas de souci : vous n'aurez qu'à veiller à la taille des vignettes pour garantir une expérience utilisateur optimale. Tout le monde y gagne !

## Comment remplacer le player YouTube par une vignette ?


### Récupération du code embed depuis le CMS Headless Prismic

Dans le cas de ce client, nous récupérons un code embed depuis le [CMS Headless](https://troopers.coop/expertises/cms-headless) Prismic.

Nous avons donc les données nécessaires de la vignette. Si ce n'est pas le cas dans votre projet, vous pouvez récupérer l'URL de la vignette comme ceci pour YouTube : `https://img.youtube.com/vi/${videoId}/0.jpg`. (0.jpg est la taille de la vignette que vous voulez récupérer).

### Étape 1 : modification du composant `YoutubePlayer`

Nous allons modifier le composant `YoutubePlayer` pour qu'il affiche soit la vignette, soit la vidéo au clic. Dans ce projet, nous utilisons la librairie react-youtube pour afficher la vidéo, mais vous pouvez, en fonction de votre projet, simplement faire un `<iframe>` en HTML.


```jsx
import React, { useState } from 'react'
import YouTube from 'react-youtube'

import Thumbnail from './Thumbnail'

const YoutubePlayer = ({
  videoId,
  autoplay,
  subtitles = 0,
  thumbnailUrl,
  thumbnailHeight,
  title,
  ...props
}) => {
  const [showVideo, setShowVideo] = useState(false)

  const handleClick = () => {
    setShowVideo(true)
  }

  if (showVideo) {
    return (
      <YouTube
        key={videoId}
        videoId={videoId}
        opts={{
          playerVars: {
            autoplay: true,
            cc_load_policy: subtitles,
            cc_lang_pref: 'fr',
            rel: '0',
          },
        }}
        style={{ minHeight: thumbnailHeight }}
        {...props}
      />
    )
  }

  return (
    // Ici on affiche la vignette : Étape 3 
  )
}
```



### Étape 2 : Créer un composant `Thumbnail`

La deuxième étape consiste à créer un composant `Thumbnail` pour afficher la vignette de la vidéo et charger la vidéo uniquement lorsque l'utilisateur clique sur play. 

Nous avons également ajouté un icône player pour donner à la vignette l'apparence d'une vidéo. Personnalisez le svg comme vous voulez !


```jsx
import React from 'react'
import styles from './YoutubePlayer.scss'
import cn from 'classnames'

const Thumbnail = ({ handleClick, thumbnailUrl, videoId, thumbnailHeight, title, ...props }) => {
  return (
    <button onClick={handleClick} {...props}>
      <img
        src={thumbnailUrl || `https://i.ytimg.com/vi/${videoId}/hqdefault.jpg`}
        alt={title}
        height={thumbnailHeight}
        className={styles.Thumbnail}
      />
        <div className={styles.playButton} title="Lire la vidéo">
          <svg
            version="1.1"
            id="play"
            x="0px"
            y="0px"
            height="70px"
            width="70px"
            viewBox="0 0 100 100"
            enable-background="new 0 0 100 100"
          >
            <path
              fill="black"
              d="M38,69c-1,0.5-1.8,0-1.8-1.1V32.1c0-1.1,0.8-1.6,1.8-1.1l34,18c1,0.5,1,1.4,0,1.9L38,69z"
            />
          </svg>
        </div>
    </button>
  )
}

export default Thumbnail
```



### Etape 3 : Utiliser le composant `Thumbnail`

Pour finir, nous utilisons le composant `Thumbnail` que nous venons de créer dans notre composant `YoutubePlayer`.


```jsx
import React, { useState } from 'react'
import YouTube from 'react-youtube'

import Thumbnail from './Thumbnail'

const YoutubePlayer = ({
  videoId,
  autoplay,
  subtitles = 0,
  thumbnailUrl,
  thumbnailHeight,
  title,
  ...props
}) => {
  const [showVideo, setShowVideo] = useState(false)

  const handleClick = () => {
    setShowVideo(true)
  }

  if (showVideo) {
    return (
      <YouTube
        key={videoId}
        videoId={videoId}
        opts={{
          playerVars: {
            autoplay: true,
            cc_load_policy: subtitles,
            cc_lang_pref: 'fr',
            rel: '0',
          },
        }}
        style={{ minHeight: thumbnailHeight }}
        {...props}
      />
    )
  }

  return (
    <Thumbnail
      handleClick={handleClick}
      thumbnailUrl={thumbnailUrl}
      thumbnailHeight={thumbnailHeight}
      title={title}
      videoId={videoId}
      {...props}
    />
  )
}
```

### Le résultat




Et voilà ! Le composant `Thumbnail` charge la vignette de la vidéo et ne charge la vidéo que lorsque l'utilisateur clique sur play.  
 
Voici à quoi ça ressemble :



Vous vous souvenez de cette fameuse page dont l’audit a montré qu’elle pesait 20 Mo ? A présent elle pèse 12 Mo. **Nous avons donc gagné 8 Mo sur cette page** ! De plus, **on a réduit le nombre de requêtes de la page.** Précédemment, le navigateur faisait 221 requêtes pour charger tous les contenus de la page, aujourd'hui il n’y a plus que 136 requêtes ! 

## Des astuces supplémentaires pour réduire l'impact environnemental de vos vidéos

Tout d'abord, essayez d'utiliser un lecteur vidéo optimisé pour la consommation d'énergie, comme le lecteur [Plyr](https://github.com/sampotts/plyr). En réduisant la quantité d'énergie nécessaire pour diffuser des vidéos, vous pouvez considérablement réduire l'impact environnemental de votre application.

De plus, si vous le pouvez, utilisez des **plateformes alternatives à YouTube**, comme Peertube. PeerTube est une plateforme décentralisée et open-source qui permet aux utilisateurs de créer et de gérer leur propre serveur PeerTube, créant ainsi un réseau de serveurs autonomes qui partagent du contenu vidéo via un protocole peer-to-peer (P2P). Contrairement à YouTube, où chaque vidéo est stockée sur les serveurs de Google et diffusée directement aux utilisateurs, PeerTube permet aux utilisateurs de **télécharger des vidéos sur des serveurs locaux** et de les diffuser en utilisant le protocole P2P, ce qui réduit la charge sur les serveurs centraux et la consommation d'énergie associée.

Si vous utilisez des vidéos YouTube, il est également possible de limiter la consommation énergétique en n'affichant pas l'iframe de la vidéo sur votre page. À la place, vous pouvez simplement afficher une vignette qui, lorsqu'elle est cliquée, **ouvrira une nouvelle fenêtre avec la vidéo YouTube**. [Sur notre site pour nos vidéos Peertube](https://troopers.coop/cooperative), nous avons opté pour cette solution.

De plus, au lieu de charger directement la vidéo, vous pouvez utiliser l'API Youtube (ou Peertube dans notre cas) pour récupérer les informations sur la vidéo, telles que le titre, la description et le nombre de vues. **Cela vous permettra d'afficher ces informations sans avoir besoin de charger la vidéo elle-même**. Astuce que l’on a aussi utilisé pour notre site !


## Conclusion

En utilisant des vignettes et en chargeant les vidéos seulement lorsque l'utilisateur en a besoin, vous pouvez non seulement réduire la taille de votre page, mais aussi réduire la consommation d'énergie nécessaire pour charger votre site. 

En utilisant ces bonnes pratiques, vous pouvez contribuer à la préservation de l'environnement tout en offrant **une expérience utilisateur optimale à vos visiteurs et conforme au numérique responsable.**

Réduisez l'impact environnemental des vidéos YouTube sur votre site web avec des vignettes

Chez Troopers, nous modifions notre site web pour limiter son impact environnemental. Pourquoi ? Le numérique est responsable de 3,2 %* des émissions de gaz à effet de serre (GES) en France. Le moyen d’y remédier ? L’écoconception est une des recommandations des experts pour réduire l'empreinte des services numériques.

Notre activité principale est la création d’applications et de sites web pour nos clients, il nous semble donc logique d’**appliquer avant tout à nous-même cette démarche d’éco-conception**. Dans cet article, nous nous concentrons sur l’éco-conception appliquée aux sites web.

Nous vous partagerons les outils pour **évaluer l’empreinte d’un site internet**, les bonnes pratiques à suivre ainsi que ce que nous mettons actuellement en place sur notre [site](https://troopers.coop/)  ainsi **ce qu’il nous reste à faire** pour minimiser son impact.

## Qu’est-ce que l’éco-conception web ?
### Définition de l’éco-conception
Selon le ministère de la Transition énergétique, “l’éco-conception consiste à intégrer la protection de l’environnement dès la conception des biens ou services. Elle a pour objectif de réduire les impacts environnementaux des produits tout au long de leur cycle de vie.”

Dans cet article, on parle de l’écoconception appliquée aux sites internet qui est une démarche initiée par le collectif Green IT en 2009. 

### Avantages de l’éco-conception web ?

Opter pour l’éco-conception web présente différents avantages :

1. Bien évidemment, un site éco-conçu a une **empreinte environnementale plus faible** ;
2. Un site éco-conçu est un site plus performant, cela aura un **impact positif sur le temps de chargement du site** et sur l’expérience utilisateur ;
3. La performance du site va également affecter positivement le **positionnement naturel** de votre site sur les moteurs de recherche.

## Évaluer l’empreinte de son site web

Il est préférable d’intégrer l’éco-conception **le plus tôt possible dans la phase de vie de votre projet**, en particulier si le site n’existe pas encore. Mieux vaut concevoir un site propre que devoir l'auditer à la fin et tout recommencer.


Pour les sites web déjà existants, il est nécessaire de passer par une phase d’audit pour évaluer l’empreinte du site. Cela permettra d'établir un **état des lieux**, qui pourra être réitéré à la fin de la démarche pour pouvoir mesurer les changements et valider l’**impact des actions effectuées**. Cet audit permettra de détecter les points prioritaires sur lesquels travailler.

Il existe de nombreux outils permettant d’évaluer différents aspects, ils ne sont pas tous destinés à réduire l'impact environnemental, mais comme on l’a évoqué plus haut, améliorer la performance va aider à réduire l’empreinte du site.


## Les pratiques d’éco-conception pour notre site

### Stratégie
La base de l’éco-conception est de limiter les fonctionnalités qui ne sont pas indispensables, sans qu’elles ne manquent aux visiteurs. 

Afin de lutter contre l’obsolescence matérielle, on prend en compte l’utilisation sur des **équipements plus anciens**, mais également sur différents types de terminaux (marque, modèles, etc). 

L’éco-conception permet aussi de proposer des services plus légers qui seront accessibles à un plus large public qui n’a **pas tout le temps accès à des connexions haut débit**.

### Design : UX/UI & contenus 
Lors de la phase de conception graphique, il est préférable d’opter pour une approche mobile first, c'est-à-dire à penser en premier lieu à une utilisation mobile pour alléger au maximum le site. L’espace disponible étant limité sur mobile, on doit prioriser les contenus qui doivent absolument être visibles.

Bien entendu, le site est ensuite adapté en version desktop. Si ce n’est pas l’approche choisie, le site devra tout de même être responsive pour s’adapter aux différentes tailles d’écran (smartphone, tablette ou ordinateur).

#### Ce qu’on a fait 
Parmi les bonnes pratiques en ce qui concerne le design et le contenu du site, nous avons :
- mis en ligne une seule version éco-conçue et non deux versions (avec un mode d’affichage “économie d’énergie” et un mode classique) ;
- dit non au scroll infini et utilisé un bouton *Afficher plus de résultats* ;
- dit non au fond vidéo sur la page d’accueil, au carrousel, ou à l’affichage de nos réseaux sociaux (sauf sur le blog) ;
- [privilégié les typographies écologiques](https://slash.troopers.coop/article/typographies-ecologiques-du-bureau-a-la-conception-un-panel-de-pratiques-a-encourager) en optant pour des polices système.

#### Ce qu’il nous reste à faire
Il nous reste aussi à indiquer sur notre formulaire de candidature quels sont les formats et le poids maximum des pièces jointes qui peuvent nous être envoyées.

### Gestion de projet / CMS
WordPress est le CMS le plus utilisé. Si c’est votre cas, attention à ne pas multiplier les plugins qui vont charger du code CSS et JavaScript qui ne sera pas tout le temps utile.  À noter, vous pouvez aussi vous passer de CMS si votre contenu va peu ou pas changer.

#### Ce qu’on a fait 
- Après nous être posé la question de ne pas installer de CMS, nous avons utilisé un [CMS headless](https://troopers.coop/expertises/cms-headless) et non WordPress. Cela nous permet de ne déployer sur le serveur que ce dont nous avons vraiment besoin ;
- Nos éditeurs redimensionnent et compressent les images au format WebP avant de les mettre dans le CMS.

#### Ce qu’il nous reste à faire
Nous devons mieux afficher nos tableaux quand ils sont au format HTML. Actuellement, nous les publions sous forme d’image ce qui n’est ni accessible ni éco-conçu.

### Frontend
Parmi les bonnes pratiques au niveau du frontend, on **réduit les données téléchargées** et on n’utilise que ce qui est nécessaire au fonctionnement du site.

#### Ce qu’on a fait 
- Réduire le poids des ressources : nous utilisons des SVG et non des visuels au format PNG ou JPEG dès que possible, notamment pour les pictos ;
- Le code derrière le site se charge de faire apparaître les images quand le visiteur s’apprête à les voir. C’est très utile pour des pages qui contiennent des listes, comme la page [réalisations](https://troopers.coop/realisations) de notre site ; 
- La taille du code utilisé est aussi réduite en utilisant un processus appelé *minification*. 

#### Ce qu’il nous reste à faire
Pour réduire la consommation d’électricité sur le terminal de consultation : 
- nous allons modifier l’animation de défilement automatique de notre page d’accueil pour qu’elle ne tourne qu’une fois. L’outil Greenspector nous avait fait remonter que cela représentait **la moitié de la consommation électrique **de la page !
- Remplacer nos lecteurs vidéo par une image de couverture : cela représente 1 Mo d’économisé sur cette seule page.



### Backend
Parmi les bonnes pratiques à adopter au niveau du backend, on distingue plusieurs grands axes : la conception, le code client et le code serveur. L’objectif est de réduire la consommation de ressources, d’**alléger les bases de données et donc les serveurs**.

Parmi ces bonnes pratiques, on peut : 
- Choisir la technologie selon l’utilisation voulue ;
- Utiliser un système de cache serveur pour les données les plus utilisées ;
- Limiter les durées de conservation des données ;
- Favoriser les pages statiques ;
- Supprimer les animations ou autres ajouts inutiles.

#### Ce qu’on a fait 
Nous utilisons Matomo Analytics plutôt que Google Analytics pour limiter les cookies et le nombre de noms de domaines pour réduire les serveurs utilisés…

#### Ce qu’il nous reste à faire
Au lieu de générer le contenu à chaque fois qu’un visiteur vient sur notre site, il est généré une seule fois et mis à disposition sur le serveur pour ensuite être envoyé aux visiteurs. Cela nécessite moins de code et consomme moins d’énergie. Techniquement, c’est ce qu’on appelle **un site statique** et il contient principalement du HTML et du CSS ainsi qu’un peu de JavaScript.

Le fait qu’il soit statique n'empêche pas les interactions avec l’utilisateur mais nécessite un peu d’adaptation. Nous étudions la possibilité de passer notre site en site statique, auquel cas nous perdrions certaines fonctionnalités au passage comme [l'optimisation des images](https://nextjs.org/docs/advanced-features/static-html-export#unsupported-features ). Cela nécessitera aussi de découper le site actuel en deux parties : la partie statique avec le contenu généré à chaque publication, et la partie dynamique qui serait une API chargée de réceptionner les données du formulaire de contact et envoyer l'email. 

### Hébergement
Côté hébergement, il faut favoriser les [hébergeurs écologiques](https://slash.troopers.coop/article/comparatif-hebergeurs-web-ecologique) et engagés. L’infrastructure logicielle et matérielle doit être optimisée pour être adapté au service tout en en minimisant l'empreinte.

#### Ce qu’on a fait 
L’hébergement est **éco-responsable et adapté à notre contexte**, on utilise la solution Clever Cloud by Scaleway, les sites sont hébergés dans le DataCenter 5 de Scaleway, qui est alimenté à 100% en énergies renouvelables.

#### Ce qu’il nous reste à faire

Nous sommes un peu à court d'idées sur ce point mais allons continuer d'auditer le site avec différents outils pour en trouver.

Vous l’aurez compris, nous ne sommes pas parfaits, mais nous continuons d’agir pas-à-pas pour améliorer le site de Troopers. Cela nous a permis d’atteindre un écoindex de A. Si vous vous intéressez à l’éco-conception web pour créer ou améliorer votre site, venez échanger avec nous sur votre projet !

*Étude de Green IT : https://www.greenit.fr/2020/06/23/quels-sont-les-impacts-environnementaux-du-numerique-en-france/

Le blog de Troopers

Mesurer les performances de nos sites web avec LightHouse, côté client et serveur

Quiz Numérique Responsable : les réponses aux questions !

Comment passer au numérique responsable en 3 étapes ?

Pourquoi devons-nous tendre vers un numérique plus responsable ?

Réduisez l'impact environnemental des vidéos YouTube sur votre site web avec des vignettes

Nos bonnes pratiques pour l'éco-conception de notre site web