
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/

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

Troopers héberge des sites Web depuis plus de 10 ans, nous avons donc eu l’occasion de tester de nombreuses solutions. Dans le but de limiter l’empreinte carbone de nos serveurs, ceux de nos clients, ainsi que d’assurer la souveraineté des données, nous avons dernièrement ré-étudié les différentes offres d’hébergement. On vous partage nos critères, quelques indicateurs pour vous y retrouver ainsi que notre **sélection d’hébergeurs web écologiques**.

## Pourquoi opter pour un hébergeur web écologique ?
En plus de mettre à disposition de ses clients de l'espace sur ses serveurs pour que ces derniers puissent héberger leur site internet, un hébergeur web écologique s'engage à utiliser des technologies et des pratiques plus respectueuses de l'environnement dans son activité.

Cela peut inclure l'utilisation de serveurs **énergétiquement efficaces**, l'utilisation d’**énergies renouvelables** pour alimenter ses centres de données, ou encore la mise en place de programmes de compensation carbone pour neutraliser les émissions de gaz à effet de serre (GES) générées par son activité.

Il est important de noter que l'hébergement de sites web peut avoir un impact significatif sur l'environnement en raison de la consommation d'énergie nécessaire pour faire fonctionner les serveurs et les centres de données.

[Selon le rapport de GreenIt](https://www.greenit.fr/wp-content/uploads/2019/10/2019-10-GREENIT-etude_EENM-rapport-accessible.VF_.pdf), le numérique mondial serait responsable de 3,8 % des émissions de gaz à effet de serre (GES) à l’échelle mondiale. **Les centres de données représentent 15 % de ce total**.
Choisir un hébergeur web écologique contribue à réduire cet impact. Favoriser et financer ces structures plus vertueuses leur permet également de se développer davantage.

## Nos critères pour sélectionner un hébergeur web écologique
Nous avons comparé plusieurs hébergeurs afin de trouver ceux qui répondent le mieux à nos besoins et critères.
 
Nos critères ne se limitent pas à l’aspect écologique, nous souhaitons en effet travailler avec des hébergeurs **sécurisés, fiables, performants** et dont le **service client est efficace et réactif**.
 
### Localisation des serveurs
Il est important pour nous que les serveurs soient localisés en France. Ainsi les données sont proches de nos clients, l’hébergeur est soumis aux lois françaises et au RGPD (Règlement Général sur la Protection des Données) qui s’applique pour les résidents de l’Union Européenne. Cela permet de garantir la confidentialité des données et de faciliter les échanges avec le service client si nécessaire.

### Utilisation d’énergies renouvelables et engagement de l’entreprise
Nous favorisons les hébergeurs web dont les serveurs sont alimentés en énergies renouvelables : solaire, éolienne, hydraulique…
 
À savoir : il faut comprendre que tous les fournisseurs d’électricité utilisent le même réseau de distribution. Lorsqu’une entreprise ou un particulier souscrit à un contrat d’électricité verte, le fournisseur injecte celle-ci dans le réseau de distribution global en fonction des différentes énergies renouvelables utilisées. Il n’y a donc **pas de risque de coupure** si les panneaux solaires ou les éoliennes ont moins fourni d’électricité à un certain moment en fonction des conditions météo.
 
Au-delà de l’alimentation en énergie, se pose également le choix du système pour le refroidissement des serveurs qui peut largement affecter la consommation d’énergie.
 
### Gestion du matériel
L’alimentation en énergie verte est importante, mais il est également important de regarder l’efficacité énergétique du matériel utilisé. Des équipements efficaces et économes permettent de moins consommer.
 
On regarde également leur gestion et leur cycle de vie. Les hébergeurs responsables allongent la durée de vie des serveurs au maximum afin de **réduire la quantité de déchets électroniques**. Il est également important de prendre en compte la politique de recyclage des équipements et des déchets électriques ou électroniques pour ne pas tomber dans le greenwashing.
 
### Aspects techniques
En tant qu’agence web, nous avons besoin de serveurs qui hébergent du contenu statique ou dynamique. Le **contenu dynamique évolue en fonction du temps**, des utilisateurs et de leurs actions. Par exemple, les boutiques e-commerce sont des sites dynamiques. Les serveurs utilisés devront prendre cela en compte.

Le contenu statique, lui, est composé des pages HTML, des fichiers de style et des images, ce sont des **ressources faciles à héberger**, nous privilégions les sites statiques afin de limiter les ressources serveurs.

Dans le cas du contenu dynamique, il est nécessaire d’avoir un serveur capable d’exécuter du code écrit en PHP ou node, ainsi qu’une base de données, ce qui nécessite davantage de ressources que pour servir du contenu statique. Nous favorisons :
- Les **serveurs virtuels** : nous avons accès à un système d’exploitation complet, mais qui ne repose pas sur un serveur physique dédié ;
- Les **hébergements de type PaaS** (Platform as a Service) qui nous demandent moins de maintenance : chaque projet a un environnement et une configuration dédiés.


 
## Les indicateurs de mesure pour analyser les hébergeurs verts
 
Différents indicateurs permettent de mesurer objectivement l’efficacité des mesures mises en oeuvre et mettent en valeur les engagements environnementaux pris : 

Le PUE (Power Usage Effectiveness) est un indice permettant de **mesurer l’efficacité énergétique d’un datacenter**. Il correspond au ratio entre l’énergie totale (équipements, éclairage, refroidissement…) utilisée par le datacenter sur celle dédiée uniquement aux serveurs. L’idéal est qu’il soit égal à 1. Pour cela, le refroidissement des serveurs doit se faire de manière naturelle comme avec le free cooling qui n’utilise pas de système de refroidissement. La source d’énergie utilisée, renouvelable ou non, n’est cependant pas prise en compte dans cet indice.

Le DCEM (Data Center Efficiency Management) est un indicateur qui mesure l’e**fficacité énergétique en fonction de la consommation d’énergie globale**, l’efficacité énergétique des **équipements**, l’**énergie réutilisée** et les **énergies renouvelables**. Cet indicateur se veut plus complet que le PUE et permet de définir une classe de performance allant de A à I.

Les normes ISO comme l’ISO 50001 sur la performance énergétique et l’ISO 14001 sur la réduction de l’impact environnemental d’une entreprise peuvent également être utilisées. À noter que ces normes ne sont pas spécifiques aux datacenters.
 
Ces différents indices permettent d’évaluer objectivement l’engagement des hébergeurs web qui se disent écologiques. Comme beaucoup de domaines, attention au greenwashing de certains acteurs. Il peut être difficile de s’y retrouver, surtout lorsque certaines entreprises ne communiquent pas sur ces indicateurs malgré leurs engagements.

## Notre sélection d’hébergeurs web écologiques

| **Nom***     | **Localisation***              | **Énergies renouvelables*** | **Indicateur d'efficacité énergétique**                 | **Durée de vie des serveurs** |
|--------------|--------------------------------|-----------------------------|---------------------------------------------------------|-------------------------------|
| Infomaniak   | Suisse                         | 100%                        | 1,11                                                    | 7 à 10 ans                    |
| Ikoula       | France                         | 100%                        | -                                                       | -                             |
| Scaleway     | France (région parisienne)     | 100%                        | 1,3 et 1,15 pour les datacenters construits depuis 2018 | jusqu'à 10 ans                |
| OVH          | France (Roubaix et Strasbourg) | 78% en 2021, 100% en 2025   | 1,28                                                    | jusqu'à 10 ans                |
| Clever Cloud | France                         | 0%                          | -                                                       | -                             |

### Infomaniak
Infomaniak est un hébergeur web suisse fondé en 2000. Les serveurs sont eux aussi basés en Suisse. On peut le qualifier comme l’un des leaders de l’hébergement web vert. En effet, il a de nombreux engagements écologiques : l’électricité achetée est composée de 100% d’énergies renouvelables, les serveurs sont refroidis naturellement, sans climatisation. L’entreprise est engagée et [communique sur ses démarches](lihttps://www.infomaniak.com/fr/ecologienk), ses engagements ainsi que sur les certificats ou récompenses qu’elle a obtenus.

La communication et les démarches réalisées par Infomaniak nous ont beaucoup plu, mais nous avons exclu ce choix, car cela aurait obligé la majorité de nos clients — basés en France ​​— à faire transiter leurs données jusqu’en Suisse. Nous avons préféré nous concentrer sur les hébergeurs basés en France.

### Ikoula
Fondé en 1998, Ikoula est un hébergeur web français qui utilise 100% d’énergie renouvelable pour ses datacenters. L’entreprise privilégie des équipements à faible consommation électrique et recycle ses déchets informatiques. Les serveurs sont basés en France.

Nous n’avons pas testé leurs offres, néanmoins les serveurs privés virtuels semblent intéressants, car ils offrent une grande granularité : on peut ajuster le nombre de cœurs disponibles, la quantité de RAM ou l’espace disque de façon indépendante. De plus, cet hébergeur a l’originalité de proposer un [hébergement sur Raspberry Pi](https://www.ikoula.com/fr/serveur-dedie/raspberry-pi-4-micro-serveur) qui n’existe pas chez les autres hébergeurs.

### Scaleway
 
Scaleway est un hébergeur français dont une grande partie des datacenters, alimentés en énergie renouvelable, sont basés dans la région parisienne. L’entreprise est [très transparente sur les sources d’énergies](https://www.scaleway.com/fr/leadership-environnemental/) et les systèmes de refroidissement utilisés. Elle communique également sur les certifications et les indicateurs de ses différents datacenters.
 
Scaleway répond totalement à nos critères, néanmoins le peu de serveurs virtuels disponibles et l’obligation de devoir payer des frais d’installation sont des freins à l’installation de nouveaux serveurs. On peut voir par exemple une page récapitulative montrant entre autres le PUE et la consommation électrique du Datacenter 5.

### OVH
OVH est un hébergeur français fondé en 1999. L’entreprise dispose de datacenters dans différents pays (France, Canada, Royaume -Uni, Australie, Allemagne…) et laisse la possibilité de choisir la localisation de son serveur. L’entreprise [communique sur ses engagements](https://corporate.ovhcloud.com/fr/sustainability/environment/) et sur ses différents indicateurs environnementaux. Bien qu’ils n’utilisent pas encore 100 % d’énergie renouvelable, ils se rapprochent de cet objectif année après année. L’entreprise vise les 100 % d’énergie renouvelable d’ici 2025.

Nous avons fait le choix d’héberger nos futurs projets sur des serveurs privés virtuels hébergés par OVH. Nous sommes très satisfaits des hébergements qu’ils proposent sans frais d’installation et évolutifs en quelques clics (par exemple, pour doubler le nombre de cœurs du processeur ou l’espace disque).

### Clever Cloud
Clever Cloud a un modèle différent des hébergeurs présentés précédemment. Leur solution de PaaS proposée nous a plu, car elle facilite et réduit le temps des déploiements. En effet, elle permet de ne pas se soucier de toute la partie infrastructure et elle s’occupe de lancer et de faire tourner les applications.

Clever Cloud a pour but de limiter les consommations inutiles tout en gardant un niveau de service identique en optimisant l’utilisation des serveurs. Leur démarche est différente, mais ils ont également la volonté de réduire leur empreinte environnementale et celle de leurs clients. 

L’entreprise n’a malheureusement pas encore d’engagement en termes d’utilisation d’énergies renouvelables. Cependant leur nouvelle offre en collaboration avec Scaleway nous offre le meilleur des 2 mondes : la flexibilité et le confort de Clever Cloud et les performances environnementales de Scaleway.


### Le cas de l’hébergement vert de contenu statique
Pour le contenu statique, nous avons commencé par nous orienter vers la solution Cloudflare Pages qui est [alimentée à 100 % en énergies renouvelables](https://blog.cloudflare.com/fr-fr/green-hosting-with-cloudflare-pages-fr-fr/) et qui dispose d’un réseau mondial.

Cependant nous avons abandonné cette solution, car nous n’avions plus la souveraineté des fichiers, nous avons préféré revenir à une architecture 100 % gérée par Troopers.


## Hébergement web et impact du numérique
Comme mentionné au début de cet article, le numérique mondial serait responsable de 3,8% des émissions de gaz à effet de serre (GES) à l’échelle mondiale. Ce chiffre est estimé à 5,5% d’ici 2025 d’après l’étude de GreenIt. 
Dans ce rapport, on constate que la consommation électrique des datacenters ne se trouve qu’à la 4e place quand on analyse les différents impacts environnementaux du numérique. Voici le classement, en partant du plus important en termes d’impact :

1. Fabrication des équipements destinés aux utilisateurs (smartphones, ordinateurs, télévision, écrans, objets connectés, etc.) ;
2. Consommation électrique des équipements des utilisateurs ;
3. Consommation électrique du réseau informatique ;
4. Consommation électrique des centres informatiques (datacenters) ;
5. Fabrication des équipements réseau ;
6. Fabrication des équipements hébergés par les centres informatiques (serveurs, etc).

Parmi ce classement, on distingue les utilisateurs, les centres informatiques et les réseaux. Les réseaux sont ce qui relie les utilisateurs et les datacenters.

_Source : [Étude "Empreinte environnementale du numérique mondial"](https://www.greenit.fr/wp-content/uploads/2019/10/2019-10-GREENIT-etude_EENM-rapport-accessible.VF_.pdf), Frédéric Bordage_

Si le choix de l’hébergeur web est un des leviers pour limiter son impact environnemental, ce n’est pas le seul à prendre en compte pour réduire l’impact du numérique. En effet, on constate que les **centres informatiques sont responsables de 15% des émissions de GES** alors que **les utilisateurs sont à l’origine de 66% de ces émissions**, dont 40% dues à la production de matériel.

C’est pourquoi la gestion et le renouvellement des équipements électroniques au sein de l’entreprise, mais également au niveau personnel n’est pas à négliger. Pensez également à d’autres leviers comme l’**éco-conception pour rendre les sites web et les applications moins énergivores ** et ainsi limiter leur impact environnemental.  

Chez Troopers, nous avons choisi d’héberger nos futurs projets chez OVH et chez Scaleway grâce à Clever Cloud. L’offre d’OVH n’utilise pas (encore) 100% d’énergies renouvelables comme les autres hébergeurs de ce comparatif mais elle correspond à nos besoins en termes de performance et de fonctionnalités techniques. Et la solution PaaS fournie par Clever Cloud et hébergée par Scaleway s'aligne avec nos attentes en terme de facilité d’utilisation et de haute performance environnementale.

N’hésitez pas à nous contacter, que ce soit pour concevoir votre [application web](https://troopers.coop/expertises/application-web) ou pour nous confier la gestion de votre [hébergement](https://troopers.coop/expertises/hebergement).

Comment choisir son hébergeur web écologique ?

Il est temps de faire le bilan de l'année pour Troopers. Nous avons vécu une belle année, riche et bien remplie, avec de nombreux événements et réalisations marquantes. Nous tenons à remercier nos clients, partenaires et toutes les personnes avec qui nous avons partagé ces moments forts et avec qui nous avons avancé dans notre quête d'une tech plus durable. Rejoignez-nous pour un voyage dans le temps et revivez avec nous les temps forts de cette année 2022.


## Des escales passionnantes

En 2022, nous avons eu l'opportunité de participer à de nombreux événements qui nous ont permis de mettre en avant notre modèle coopératif et nos engagements en faveur d'une tech responsable. Chacun de ces événements nous a permis de partager notre vision avec un public large et d’entrevoir de nouvelles perspectives.


### Le Web2day, une destination incontournable

Nous avons fait un arrêt  au Web2day, un événement incontournable pour les entreprises qui innovent et s'intéressent aux technologies de demain. Nous avons été présents au **Marché de l'Impact**, une zone regroupant 12 acteurs ([Toovalu](https://toovalu.com/), [Greenspector](https://greenspector.com/fr/accueil/), [Empreinte Digitale](https://empreintedigitale.fr/) … ) qui s'engagent en faveur d'une sobriété numérique. Nous avons animé au côté de [Lonestone](https://lonestone.io/), [Externatic](https://www.externatic.fr/) et [Open Opale](https://openopale.notion.site/Open-Opale-Do-with-open-heart-e06ab3e49df740738d5f7ee70ff16e52), une table ronde sur le thème de **l'entreprise agile et sans chef**. 

[La vidéo de Cécile et Godefroy sur l’entreprise agile et sans chef·fe au web2day](https://www.youtube.com/watch?v=BuJ456nXm-E&feature=youtu.be) 


Nous avons également proposé un quiz sur le numérique responsable avec une corbeille de fruits à gagner en partenariat avec [Graines d’ici](https://www.grainesdici.fr/), et avons discuté avec les visiteurs de notre stand sur les enjeux environnementaux et sociaux liés au **développement de solutions numériques éco-conçues**. 






### La conférence API Platform, une occasion de partager notre vision

En septembre 2022, nous avons fait un détour par Lille pour assister à la **conférence API Platform.** Lors de cet événement, notre coopérateur Paul a participé à une table ronde sur le thème **"Comment (re)mettre la tech au service du bien commun ?"**. Il a discuté du rôle des communs et de leur place en péril dans l'espace numérique avec Kévin Dunglas de [Les-Tilleuls.coop](https://les-tilleuls.coop/) et Hélène Maître-Marchois de [Fairness](https://fairness.coop/). Paul a par ailleurs eu l'occasion de présenter la vision de Troopers en tant que coopérative et les liens entre le logiciel libre, l'agilité et nos modèles d'entreprises.  
 
Cette table ronde visait à appeler les travailleurs de la tech à imaginer d'autres manières de travailler et d'autres usages de la technologie, plus responsables et éthiques, et à remettre la technologie au service du bien commun. 
 
Lien vers le replay de la conférence : [https://tube.troopers.agency/w/pNuA43c2G1V2zHZnZi6zDE](https://tube.troopers.agency/w/pNuA43c2G1V2zHZnZi6zDE) 


### Escales captivantes aux APIDays

Nous avons passé deux jours aux APIDays à la cité des sciences à Paris. Cécile a présenté notre modèle coopératif avec Marion Agé de la coopérative [Les-Tilleuls.coop](https://les-tilleuls.coop/) et expliqué les avantages de notre fonctionnement, comme la participation aux décisions stratégiques de l'entreprise, le partage des bénéfices, la gestion de l'entreprise par mandat et les élections lors des assemblées générales. 




### Arrêt au Devfest de GDG Nantes

Le Devfest de GDG Nantes a été l'occasion pour notre coopératrice Cécile d’animer l'atelier **"Entreprise agile et sans chef",** aux côtés de Godefroy de Compreignac de Lonestone et Benjamin Casseron d'Externatic. Ils ont partagé leur expertise sur la manière d'intégrer les équipes dans une entreprise collaborative en gouvernance partagée, et nous avons également pu présenter notre modèle coopératif et notre engagement en faveur d'une tech plus responsable et durable.


## Les missions Tech for Good, une aventure palpitante

###  Le Tech for Good Tour 
Leticia a participé au [Tech for good tour](https://techforgoodtour.com/edition-2022/), organisé par Latitudes et [makesense](https://france.makesense.org/). Le "Tech for good tour" est un tour de France visant à accélérer les réflexions et actions pour construire une **tech plus engagée et responsable** !   
 
Dans le cadre de ce tour, Leticia a animé un atelier de sensibilisation aux enjeux du numérique pour les étudiants du Wagon aux côtés de Rose, une autre bénévole du tour.


### Le Tech for Good Challenge

En 2022, l'équipe de Troopers a participé au **Tech for Good Challenge** organisé par [Latitudes](https://www.latitudes.cc/), une association qui vise à promouvoir une **technologie plus responsable**. Pendant un mois, nous avons relevé 30 défis en 30 jours afin de sensibiliser 300 personnes de la tech à l'importance de la technologie pour le bien commun. 

Notre équipe, "Troopers, République de l'Impact", composée de Cindy, Marie, Leticia, Yves et Alexis, s'est battue pour promouvoir une **technologie plus sobre, éthique, accessible, engageante, diverse et citoyenne**. Nous avons même remporté le prix de l'équipe ayant obtenu le plus grand nombre de points pendant ce challenge. 





Parmi nos défis préférés, Marie a adoré découvrir la plateforme de [ViensVoirMonTaf](https://www.viensvoirmontaf.fr/), qui permet aux collégiens sans réseau de l'éducation prioritaire de faire des stages de qualité. Leticia a été dans son élément lors de l'événement Ethics by Design par [Designers Éthiques](https://designersethiques.org/), où elle a participé à un atelier d'éco-conception. Alexis a aimé découvrir [hérétique](https://heretique.fr/) et sa conférence sur les modèles alternatifs au GAFAM. Cindy a appris à tester l'accessibilité d'un site et n'a plus arrêté depuis. Yves s'est abonné à [TeleCoop France](https://telecoop.fr/) pour prendre en main sa consommation de données. 

Pour découvrir tous les défis du Tech For Good Challenge : [https://challenge.latitudes.cc/tous-les-defis](https://challenge.latitudes.cc/tous-les-defis) 


## Des escales enrichissantes chez nous

Au cours des derniers mois, nous avons organisé et accueilli de nombreux événements dans nos locaux.  
 
Nous avons accueilli le meet up du **collectif [OnEstLaTech](https://onestla.tech/)**, qui vise à sensibiliser sur les limites du modèle technologique actuel et à proposer des alternatives plus durables.  
 
Nous avons également organisé des **Lunch & Learn sur l'Holacracy**, où nous avons discuté de notre expérience de gouvernance partagée et échangé avec d'autres personnes ayant mis en place cette pratique. Les 3 sujets abordés : 

- Cercle d’ancrage ou super cercle : comment motiver et impliquer les membres de l’organisation dans les réunions tactiques ?
- Leader de cercle : Il ou elle accompagne les membres de son cercle au self-management, est-ce que ça fait de lui un manager ?
- Les stratégies de cercles : est-ce utile et pertinent ? Comment les définir et les mettre en œuvre ? 

Cécile a animé une formation solidaire pour la Cantine Numérique, afin de sensibiliser sur l'importance de la **communication bienveillante dans les équipes de travail** et de partager des techniques pour améliorer les relations au sein de l'entreprise. 
 
Nous avons accueilli l'équipe RH [d'Evaneos](https://www.evaneos.fr/) pour une learning expédition pour présenter nos pratiques de **gouvernance partagée**, notamment l'holacracy et la **société coopérative (SCOP)**. Nous avons également échangé sur nos cultures d'entreprise et nos projets internes tels que la semaine de 4 jours, le **Parental Challenge** et le travail à distance complet. Cette expérience nous a permis de conforter nos convictions et nos choix en faveur d'une culture d'entreprise unique. 





## Décollage de la SCOP

Au cours de cette année, nous avons eu la chance de renforcer notre modèle coopératif. **2022 signe notre première année en tant que SCOP**.  
 
Nous avons découvert et approfondi les joies de ce modèle tout en renforçant notre volonté de favoriser l'implication de tous nos membres dans la vie de l'agence. Nous avons tenu **notre première assemblée générale** en compagnie de Guillaume Quéguiner de [l’URSCOP](https://www.les-scop-ouest.coop/). Nous avons pris nos premières décisions collectives en tant que SCOP et Leticia nous a rejoint comme sociétaire-coopératrice. 
 
Nous avons aussi accueilli de nouveaux membres à bord, qui ont apporté leur expertise et leur engagement au collectif. L’équipe a également félicité mon passage en CDI après mes deux années d’alternance.





### Une journée stratégique pour naviguer vers l'avenir

 
L'ensemble de l'équipe s'est réunie pour sa **traditionnelle journée stratégique**. L'objectif de cette journée est de faire un point sur l'année écoulée, afin de réaligner l'équipe lors d’un état des lieux de nos projets et fonctionnement, mais également en apportant nos envies et idées pour la suite  le tout en  renforçant le sentiment d'appartenance au collectif.  
 
Nous avons aussi pris le temps de nous projeter et d'imaginer le futur en définissant un plan d'action stratégique commun. Grâce à cette journée, nous sommes maintenant prêts à naviguer vers 2023 avec des nouveaux projets plein la tête.





### Expédition team building avec SENSAS

Nous avons participé à une expérience de team building inédite avec [SENSAS Nantes](https://nantes.sensas.top/).  
 
Durant 1 h 30, en équipe, nous avons mis nos cinq sens à l'épreuve en réalisant une série d'épreuves dans la quasi-obscurité. L'objectif était de mieux comprendre les enjeux et les ressentis des personnes mal ou non voyantes dans la vie quotidienne.  
 
Cette expérience nous a permis de resserrer les liens et de passer un moment agréable tout en faisant une belle action, puisque chaque épreuve validée a permis de reverser un don à [HTS - Handicap Travail Solidarité](https://hts-france.org/). Nous sommes ravis d'avoir pu contribuer à cette cause grâce aux 10 amulettes gagnées sur les 14 possibles. Nous recommandons vivement cette expérience pour renforcer la cohésion d'équipe tout en faisant une action solidaire. 
 



## Des actions en faveur de l’inclusion, la diversité et l'éthique.


### Engagement pour la parentalité en entreprise 


Chez Troopers, nous avons signé la charte du **Parental Challenge**, un engagement en faveur de la mise en place de mesures facilitant ou encourageant la parentalité au sein de notre entreprise. Nous sommes convaincus que cela contribue à créer un environnement de travail respectueux et inclusif pour tous nos collaborateurs. 
 
Concrètement, par le biais de cette charte, nous avons mis en place :  
 




- les conditions d’ancienneté : nous avons modifié les conditions d’ancienneté liées à la parentalité en réduisant l’ancienneté nécessaire de 12 mois au premier jour qui suit la fin de la période d’essai. 
- le congé enfant malade rémunéré :  nous offrons  jusqu'à 3 jours d’absence par année civile à chaque salarié parent d’enfant de moins de 13 ans. 
- le congé exceptionnel pour deuil : nous proposons un congé rémunéré de 3 jours pour deuil en cas de fausse couche pour la mère biologique, mais également pour le second parent.
- les absences pour les rendez-vous médicaux : nous offrons la possibilité au second parent de s’absenter sans perte de salaire pour les 7 RDV obligatoires du parcours de grossesse.  


Deux nouveaux accords sont en cours et seront signés tout début 2023 ! Nous aurons ainsi finalisé l’ensemble des points de cette [charte](https://parentalchallenge.com/). 


### Adhésion à Femmes du Digital Ouest 

En 2022, nous avons adhéré à [Femmes du Digital Ouest](https://www.femmes-digital-ouest.fr/), un réseau qui s'engage pour la mixité dans le secteur du numérique. Cette adhésion reflète notre engagement en faveur de la diversité et de l'égalité des chances au sein de notre entreprise.


###  Partage de notre expérience de transformation en SCOP et de la gouvernance partagée

Cécile et Sébastien ont eu l’honneur de participer à l’enregistrement du podcast **“Impactez-vous”** de TOOVALU animé par Marie Gaborit en compagnie de [Yves-Gaël Chény](https://www.linkedin.com/in/ACoAACG5RgsBi-I1ddsbTqSDbEk5auonjrjjndw) de la SCOP [Empreinte Digitale - Angers](https://www.linkedin.com/company/empreinte-digitale-angers/). 
 
Dans ce podcast, ils ont pu mettre en lumière l’impact de notre fonctionnement en parlant de notre environnement de travail et de notre culture d’entreprise. 

Au programme : cadre de travail inclusif, respectueux  des valeurs de tous, raison d’être de notre agence, participation aux prises de décisions, parts au capital de l’entreprise… 
 
Pour écouter le podcast : [https://lnkd.in/edJw867f](https://lnkd.in/edJw867f)  
 




### Participation à des événements et des ateliers pour approfondir nos connaissances 


Tout au long de l’année, nous avons participé à de nombreux événements et ateliers pour échanger sur des sujets liés à **l'inclusion, la diversité et l'éthique**, et en apprendre davantage. Par exemple, Cécile, Leticia et Paul ont participé à un atelier de découverte de la monnaie locale Moneko, une monnaie qui vise à promouvoir une circulation de la richesse hyper locale et à soutenir les artisans et entrepreneurs de la région.

## Troopers en 2022 : engagement pour une tech plus durable

En 2022, nous avons poursuivi notre engagement en faveur du **numérique durable**. Pour atteindre cet objectif, nous avons continué d’améliorer nos pratiques et de les partager, notamment sur le **TDD** (Test Driven Development) et le **DDD** (Domain Driven Design). Vincent a même animé un meetup de l'[AFUP](https://afup.org/home) (Association Française des Utilisateurs de PHP) sur le sujet, et prépare actuellement un livre blanc. 


Nous avons également accompagné nos clients dans leur démarche de numérique responsable en leur proposant des **solutions éco-conçues** et en les sensibilisant aux enjeux environnementaux et sociaux. Nous avons obtenu un score de **100% lors d'un audit RGAA** (Référentiel Général d'Accessibilité pour les Administrations) pour l'un de nos clients, témoignant de notre engagement en faveur de **l'accessibilité**. 


En plus de sensibiliser nos clients à ces enjeux, nous avons également apporté des modifications et des améliorations aux plateformes de nos clients. Par exemple, nous avons ajouté un CMS Headless à la plateforme des contributeurs de la [Nantes Digital Week](https://nantesdigitalweek.com/), et apporté des modifications sur le site d'[Amnesty International](https://www.amnesty.fr/) pour améliorer l’accessibilité des différentes barres de navigations. 


En 2022, nous avons aussi accueilli de nouveaux clients locaux avec des projets à impact. Nous sommes impatients de continuer à les accompagner et de contribuer à la création de solutions numériques durables.

Nous avons par ailleurs accordé une attention toute particulière à l'éco-conception et à l'accessibilité de notre site web. Nous avons travaillé à l'amélioration constante de notre site et avons partagé nos expertises en [React](https://troopers.coop/expertises/react) et [Symfony](https://troopers.coop/expertises/symfony). Nous avons également ajouté de nouvelles compétences à notre panel de services, comme la possibilité de réaliser des sites e-commerce avec [Sylius](https://troopers.coop/expertises/sylius), que nous avons déjà utilisé pour certains de nos clients. 


En plus de cela, nous avons également mis nos efforts sur l'export en HTML statique de notre site afin de le rendre plus performant et de réduire sa consommation de ressources. Nous avons également changé son hébergement, mais cette aventure mérite une histoire à part entière ! 


En 2023, nous prévoyons de publier notre déclaration d'accessibilité et de mettre en avant de manière encore plus claire nos différentes offres de services, en explicitant comment le numérique responsable s'intègre dans chacune d'entre elles.  
 
Nous avons également l'intention de mettre à jour le [CMS Headless Strapi ](https://troopers.coop/expertises/cms-headless) utilisé pour notre site web avec la version 4, qui propose une grande variété de plugins, de refondre notre blog et de nous lancer dans de nouvelles aventures. Mais nous ne voulons pas tout révéler pour le moment !


## Et la suite ?

En 2023, on compte poursuivre notre engagement en faveur de **solutions plus responsables et durables.** On croit que notre modèle coopératif et notre engagement en faveur de l'inclusion, la diversité et l'éthique sont des atouts précieux pour construire un monde numérique plus juste et plus durable. On espère que vous avez apprécié ce voyage dans le temps avec nous et qu'on se retrouvera tous ensemble en 2023 pour de nouvelles aventures ! 

2022 avec Troopers : un voyage vers un numérique responsable

Chez Troopers comme dans beaucoup d'agences web, on utilisait Slack. C'est pratique, gratuit et il y a un bot pour chercher des gifs rigolos.
Sauf que voilà, Slack, c'est un outil centralisé et possédé par Salesforce. Toutes nos conversations sont enregistrées sur des serveurs américains et on ne peut même pas consulter les messages les plus anciens sans payer. Dans le cadre d'un dé-GAFAMisation de nos outils, nous avons cherché une alternative, et c'est lors d'une panne de l'outil que nous avons installé et adopté [Mattermost](https://mattermost.com/), un outil très similaire, mais hébergé sur nos serveurs. Après quelques adaptations, l'outil est adopté par tou⋅s⋅tes, malgré quelques soucis qui traînent...


## La commission dégafamisation et la panne Slack

Pour rejoindre nos valeurs et nos pratiques, nous avions lancé une commission de dé-GAFAMisation de nos outils. Nous utilisons trop la suite Google et d'autres outils propriétaires et notre souhait était de réfléchir à des outils alternatifs, en restant en concordance avec nos besoins.
Parmi les outils à changer, il y avait Slack. Outre l'aspect du contrôle des données évoqué dans l'introduction, l'absence d'historique dans la version gratuite peut engendrer des problèmes. Plusieurs pistes ont été étudiées, il existe de nombreuses alternatives telles que [RocketChat](https://rocket.chat/), [Matrix](https://matrix.org/) ou encore ce bon vieux [XMPP](https://xmpp.org/).
C'est la simplicité d'installation de Mattermost, ainsi que son interface très similaire à Slack qui nous a premièrement attirés.
En janvier 2021, il y a eu une panne généralisée de Slack, nous étions donc obligés d'utiliser les mails pour communiquer. Comme nous avions déjà réussi à monter une instance de Mattermost pour tester cet outil, et vu l'efficacité de la solution dockerisée, nous avons mis en place le soir-même cette solution-là. Dès le lendemain, tous les Troopers pouvaient discuter via ce nouvel outil.


## Une adaptation nécessaire

Peu après le passage à Mattermost, nous avons proposé un petit sondage aux collègues pour voir si nous restions sur cet outil ou si nous retournions sur Slack. Nous avons également répertorié les points forts / points faibles par rapport à Slack dans notre wiki interne.





Le principal défaut de cette solution est évidemment le fait de devoir utiliser un nouvel outil avec une nouvelle application, tout en gardant Slack étant donné que nos clients n'ont pas changé d'outils. Nous avons exploré plusieurs pistes de ponts entre Slack et Mattermost pour palier ce problème, mais aucun ne convient à 100 %.
La principale fonctionnalité qui manquait au lancement était le système de fil de discussion introduit par Slack. Cette fonctionnalité a été ajoutée à Mattermost quelques mois plus tard. Le principal avantage était de pouvoir conserver tout l'historique de conversation (et même récupérer l'historique du Slack via l'export qui a été fait pour la transition).


## Docker : migration difficile

Lors de l'installation initiale de l'outil, nous avons utilisé le docker maintenu par la communauté. Dans les mois qui ont suivi, mattermost a mis en place une solution dockerisé officielle et la version communautaire a été déprécié. La [documentation officiellement proposée](https://github.com/mattermost/docker/blob/main/scripts/UPGRADE.md) pour migrer d'une solution à l'autre consiste, encore à ce jour, d'un script de migration de la base postgres et d'une issue github. Nous sommes restés sur la configuration communautaire qui fonctionne toujours bien, étant donné la complexité de migration. Nous avons mis plusieurs fois à jour l'outil pour profiter des dernières fonctionnalités et mises à jour de sécurité sans qu'il y ai le moindre souci. Nous avons dû migrer l'instance de serveur, ce qui s'est passé sans problème avec seulement une courte interruption de service.


## Conclusion : it just works

En automne 2022, soit presque 2 ans après la panne de Slack, les Troopers sont à l'aise avec Mattermost, et les ajouts de nouvelles fonctionnalités comme les Boards ont même été adoptés pour suivre les posts sur les réseaux sociaux et les participations aux événements. Il n'y a eu quasiment aucune interruption de service et nous avons le contrôle complet sur la solution et les données. Malheureusement, nous n’avons toujours pas trouvé de solution de pont efficace avec Slack, qui reste nécessaire pour certains clients. 

Et vous, quelle solution utilisez-vous avec votre équipe et vos partenaires ? Avez-vous réussi à trouver une solution efficace pour faire le pont avec Slack ? Dites-le nous sur les réseaux sociaux !



Le blog de Troopers

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

Comment choisir son hébergeur web écologique ?

2022 avec Troopers : un voyage vers un numérique responsable

Passer de Slack à Mattermost : un retour d'expérience