# Mettre en place des indicateurs

:::info
++État de la fiche++ : en attente de relecture
:::

:::info
Les indicateurs permettent de fixer un objectif dans la conduite de projet et servent de point de référence pour organiser les arbitrages. Les indicateurs d'éco-conception proposent un prisme d'analyse spécifique sur un projet numérique tout en rejoignant parfois les indicateurs d'autres pratiques (performance, accessibilité, SEO, ...). Ces indicateurs répondent directement aux conditions données par les piliers de l'éco-conception numérique.
:::

## Types d'indicateurs

Les indicateurs présentés ci-dessus servent à orienter le développement d'un produit numérique. À ce titre, certains indicateurs, comme ceux de l'empreinte environnementale, sont moins importants car ils ne permettent pas d'orienter le développement directement. Ils peuvent toutefois servir plus tard dans la communication du produit.

:::success
++Mettre en place la mesure de ces indicateurs++: une fiche est dédiée à l'outil de mesure et de suivi des indicateurs [ici](https://hackmd.io/CvhyaRRdQOqxntoVHP6oGQ).
:::

### Anatomie de page

Ces indicateurs reprennent les critères techniques de l'application [Ecoindex](http://www.ecoindex.fr/) de GreenIT mais servent aussi à suivre l'accessibilité technique de la page. Un poids de page réduit, un faible nombre de requêtes et d'éléments dans le DOM servent aussi à s'assurer que le service est accessible à du matériel plus ancien et moins puissant.

++Piliers associés++ :
1. Favoriser la durée de vie des équipements ;
2. Favoriser la réduction de la consommation globale de ressources non-renouvelables et la réduction des déchets électroniques ;
3. Optimiser pour les conditions d’usage les plus difficiles

#### 1. Poids moyen d'une page
Une page web est composée généralement de HTML, de CSS, de JS et d'images. Les images et le JS prennent souvent la plus grande place dans le poids total. Il est donc nécessaire de réduire au maximum le poids de ces deux éléments en suivant les conseils présentés dans les fiches explicatives. L'objectif de 150 Ko permet aussi de répondre à un second objectif présenté plus bas.

**Objectif (page simple)** : 150 Ko en moyenne par page

#### 2. Nombre moyen de requêtes par page
Il est important de réduire le nombre de requêtes à des services externes quand cela est possible. Cela peut être considérer comme faire l'isolation thermique d'une maison, il faut éviter au maximum les déperditions et fuites de chaleur. Au lieu d'utiliser Google Analytics, il est préférable d'utilser un service similaire qui stocke les données en local ; utiliser les fonts en local ou en preload plutôt que de faire un appel externe. Réduire le nombre de requêtes permettra aussi de réduire le temps de chargement et la vulnérabilité du produit à des attaques via des services tiers.

**Objectif (page simple)** : 10-15 requêtes en moyenne par page

#### 3. Nombre d'éléments du DOM
Plus le Document Object Model (DOM) sera important et profond plus il demandera un calcul et une mémorisation initiale importants. La réduction du DOM est possible pour les pages "simples" mais peut être parfois plus dure à atteindre sur certains types de page (listes longues, etc.). Il est toutefois recommandé d'optimiser le DOM afin de réduire la charge de calcul côté navigateur surtout pour les équipements plus anciens ou avec peu de puissance de calcul ou de mémoire disponible.

**Objectif (page simple)** : 400 éléments en moyenne

---

### Performance / Accessibilité technique
Mesurer la performance est déjà une habitude pour la plupart des développeurs, le rappel de ces indicateurs ici permet toutefois de fixer les objectifs à atteindre en terme d'éco-conception. Un indicateur supplémentaire est aussi rajouté pour mesurer l'optimisation du site pour des conditions d'accès plus difficiles.

#### 4. First Meaningful Paint
La First Meaningful Paint (FMP) mesure le temps écoulé entre le moment où la navigation commence et celui où le navigateur affiche le premier contenu à l'écran. Il est généralement conseillé que la FMP se fasse en même de 3 secondes. Au vu des indicateurs d'anatomie de la page mentionnés plus haut il semble possible de largement réduire ce temps de chargement.

**Objectif (page simple)** : inférieure à 1,5 seconde

#### 5. Time to Interactive
Le Time To Interactive (TTI) donne une mesure du temps nécessaire à une page pour devenir interactive pour l’utilisateur, c'est-à-dire pour qu'elle réagisse au clic. Ce temps de chargement est toujours plus long que la FMP mais ne devrait pas non plus doubler le temps de chargement si le nombre de requêtes est restreint et si le JS a été optimisé.

**Objectif (page simple)** : inférieure à 2 secondes

#### 6. Temps de chargement en 3G (780 Kbps)
Cet indicateur permet de garantir l'accessibilité d'un service à des usagers ayant des conditions de connexion plus difficiles. Dans l'optique de déployer un service public numérique cet indicateur est très important pour permettre à tous les citoyens d'avoir accès de la même façon aux services de l'État, quelque soit leurs conditions socio-économiques.

**Objectif (page simple)** : inférieure à 1,5 seconde

---

### Empreinte environnementale
Les indicateurs d'empreinte environnementale servent plutôt à la communication de la démarche plutôt qu'à guider le développement du produit. Les deux indicateurs sont calculés depuis Ecoindex à partir du poids moyen de la page (coeff 1), le nombre de requêtes (coeff 2) et la complexité du DOM (coeff 3).

#### 7. Empreinte GES moyenne par page
Cette empreinte en gaz à effet de serre inclue autant l'usage du service que les impacts liés à la fabrication des équipements et donne une valeur plus importante que les sites qui ne mesurent que la phase d'usage comme [Website Carbon](https://www.websitecarbon.com/).

**Objectif (page simple)** : 1,5gC02e en moyenne par page

#### 8. Empreinte Eau moyenne par page
Cette empreinte représente la consommation d'eau liée à la fabrication des équipements mais aussi à la production d'électricité via la vapeur d'eau (en France il faut 4 litres d'eau pour produire 1 kWh).

**Objectif (page simple)** : inférieure à 2cl en moyenne par page

## Les cas pour bien comprendre en contexte

### Cas n°1 : Commown
:::info
++Questions posées par le cas++ : est-il possible de réduire drastiquement le poids d'un site lors de sa refonte et d'atteindre les indicateurs présentés ci-dessus ?
:::

[Commown](https://commown.coop/) est une coopérative qui loue du matériel électronique réparable et responsable. La coopérative est basée sur un système d'économie de la fonctionnalité où le client loue l'équipement et Commown s'occupe de l'entretien et de la réparation. Afin d'aligner sa mission avec ses outils, la coopérative a décidé d'éco-concevoir son site. Le site existant reposait sur un Wordpress (avec le page builder Divy) et aucune politique de contenu et d'éco-conception avait été menée avant afin d'alléger le site.

Après un travail en sprint d'un mois, l'ensemble du contenu du site et son architecture ont été repensés afin de préparer un développement rapide. La dette technique de Wordpress étant trop grande, le site a été conçu sur un Netlify CMS / Hugo. L'ensemble des principes d'éco-conception présentés dans ce guide ont été utilisés. Cette refonte a permis de diviser le poids moyen de pages par 22,6 pour atteindre un poids moyen de 156 Ko par page. De façon générale, la plupart des indicateurs ont été atteints.



### Cas n°2 : Territoires en Transition
:::info
++Questions posées par le cas++ : est-ce possible de concevoir la page d'accueil d'un service public en respectant les indicateurs et le design system de l'État ?
:::

Dans le cadre d'un accompagnement en sobriété et éco-conception numérique pour la start-up d'État "Territoires en Transition", la méthodologie présentée a pu être mis en place. La spécificité de ce travail est liée à l'intégration du Design System d'État qui vient avec une série de composants, d'éléments graphiques, de polices, ... parfois difficiles à concilier avec les indicateurs d'éco-conception numérique du projet.

Le service est séparé entre une partie statique (comme la page d'accueil) et l'application, notre travail a concerné la première partie. La page d'accueil du service est une page simple donc elle doit répondre aux indicateurs présentés plus haut. La principale difficulté a été liée à l'usage de la police "Marianne" du Design System. Deux graisses 'Regular' et 'Bold' représentent 42Ko, ce qui est peu dans l'absolu mais très important par rapport à un budget de page de 150Ko. Le reste des composants n'ont pas posé de grands problèmes et nous avons pu intégré l'ensemble du Design System. Après un subset basé sur 'Basic Latin' et 'Latin-1 Supplement', le poids des deux graisses de Marianne est descendu a 26Ko. Ces deux fonts représentent toujours 1/3 du poids d'une page qui fait 69Ko.

De façon générale l'intégration du Design System a créé une augmentation du poids des pages sur toute l'application visible sur nos outils de suivi (le Design System a été implémenté dans le sprint finissant le 02/07/2021). Côté application, il est intéressant de noter que les webfonts pèsent autant que le html et que l'intégration du Design System augmente de 1 seconde le temps de chargement de la FMP et du TTI. L'intégration du Design System a un coût que l'on peut tenter de contenir au maximum mais il est compliqué de respecter tous les indicateurs une fois le Design System intégré. Cependant son intégration permet d'intégrer des bonnes pratiques d'accessibilité qui servent au produit. Il est dommage que la police utilisée est un tel poids sur les pages simples d'autant plus dans le cas d'un service public où l'accessbilité technique doit être favoriser.


## Ressources

### Outils

- [GreenIT Analysis](https://github.com/cnumr/GreenIT-Analysis)
- [YellowLab Tools](https://yellowlab.tools/)
- [Lighthouse](https://developers.google.com/web/tools/lighthouse)

## Lexique

#### Design System
Ensemble de composants html / css / js ayant pour but de faciliter la vie des développeurs et intégrateurs pour bâtir leurs interfaces.

#### FMP
La FMP mesure le moment où le contenu principal d'une page est visible pour l'utilisateur. Le score brut pour la FMP est le temps en secondes entre le moment où l'utilisateur lance le chargement de la page et le moment où la page affiche le contenu principal.

#### TTI
Le TTI mesure le temps qu'il faut à une page pour devenir pleinement interactive. Une page est considérée comme pleinement interactive lorsque :
1. La page affiche un contenu utile, qui est mesuré par le tableau First Contentful
2. Des gestionnaires d'événements sont enregistrés pour la plupart des éléments visibles de la page
3. La page répond aux interactions de l'utilisateur dans un délai de 50 millisecondes.