Skip to content

Commit

Permalink
Merge pull request #120 from cnumr/feat/63-04-mesurer-limpact-environ…
Browse files Browse the repository at this point in the history
…nemental

Feat/63 04 mesurer limpact environnemental
  • Loading branch information
dNicolle authored Oct 24, 2022
2 parents b875372 + 2ce1fec commit db387e1
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 22 deletions.
Original file line number Diff line number Diff line change
@@ -1,18 +1,14 @@
---
title: 04. Mesurer l'impact environnemental
people: Yann Gautreau
scope: \<Famille de la fiche>
scope: Test
state_validation: TO VALIDATE
responsible:
- Code(use·ur) → Développeu·se·r
- Designeu(se·r)
- Low-code → Freelance et développeur Front-End d'agences
- No-code → Madame et Monsieur tout le monde
lifecycle:
- 2 - Conception / Design
- 3 - Développement
- 4 - Mise en ligne
- 5 - Maintenance
lifecycle: Tests & validation
priority_implementation: Fort 👍👍👍
environmental_impact: Fort 🌱🌱🌱
saved_resources:
Expand All @@ -22,35 +18,45 @@ saved_resources:
- Réseau
- Requêtes
path: /fiches/04-mesurer-l-impact-environnemental
toIndex: true
---

## Sujet

Mesurer l'impact environnemental d'un site en développement va permettre d'ajuster au mieux les composants de votre projet et permettre de faire des choix afin d'alléger l'impact de votre projet. Cette mesure doit se faire sur l'ensemble d'un parcours utilisateur. Cette mesure va prendre en compte le poids des composants de la page : HTML, CSS, Javascript, chargement des bibliothèques externes (typographie, cartographie...) et aussi mesurer les requêtes serveurs.
Mesurer l'impact environnemental d'un site en développement ou déjà mis en ligne va permettre d'ajuster au mieux les composants de votre projet et permettre de faire des choix afin d'alléger l'impact de votre projet. Cette mesure doit se faire sur l'ensemble d'un [[parcours utilisateur]]. Cette mesure va prendre en compte le poids et la complexité des composants de la page : HTML, CSS, JavaScript, chargement des bibliothèques externes (typographie, cartographie, etc.) et aussi mesurer les requêtes serveurs.

## GreenIT vous conseille

Posez-vous des limites par page et pour chaque parcours utilisateur. Une limite de poids : quel est le poids maximum que ma page doit avoir . Une limite de temps : en fonction de son terminal et du réseau, quelle est la durée acceptable pour que l’utilisateur atteigne son objectif.
Un outil pour vous aider : https://www.performancebudget.io/
Extension GreenIT Analysis : GreenIT Analysis est disponible sur Chrome et Firefox, et regroupe les fonctionnalités de EcoIndex.fr (empreinte et performance environnementale) et de ecometer.org (évaluation de bonnes pratiques). Installer cette extension sur vos navigateurs de test, ils sont accessibles via les outils d'inspecteur de code. Vider votre cache navigateur (afin de simuler une première visite) et cliquer sur "Lancer l'analyse". L'extension va attribuer une note de A à G à votre page. De A jusqu'a C le résultat est honorable, de D à G votre site est perfectible. Tirer les conclusions de la note obtenue : le poids des images et leurs nécessités, est-ce que votre page à une vidéo ? Chargez-vous beaucoup de typographies ou de bibliothèques externes, avez-vous beaucoup d'extensions, avez-vous des animations ?...
L'extension vous permet également d'enregistrer l'empreinte d'un parcours utilisateur complet. Pour ce faire cliquer sur "Sauver l'analyse" et effectuer le parcours de votre utilisateur (de la page catalogue jusqu'à la page validée votre commande par exemple).
Posez-vous des limites par page et pour chaque [[parcours utilisateur]].
- Une limite de poids : quel est le poids maximum que ma page ne doit pas atteindre ?
- Une limite de temps : en fonction de son terminal et du réseau, quelle est la durée acceptable pour que l’utilisateur atteigne son objectif ?

le guide de l'Institut du Numérique Responsable : Le GR491 est composé de 57 recommandations et 498 critères répartis dans 8 « familles » projets. Il répond aux enjeux opérationnels et doit permettre à chaque acteur d’un projet d’entrer dans une démarche d’amélioration continue, de s’évaluer et de mettre en œuvre des recommandations concrètes tout au long des phases de conception d’un service numérique. https://gr491.isit-europe.org/
Un outil en ligne qui note votre url selon le GR491 : https://kastor.green/
### Des outils simples d'utilisation à votre disposition

Alléger le poids de ces pages est avant tout une question d'équilibre et de choix : vous aimer les typographies . Alors limiter les images sur votre site . Privilégier le podcast à la vidéo....
*Actuellement, il n'existe pas d'outil spécifique à WordPress.*

[Performance Budget](https://www.performancebudget.io) : Site permettant le budget possible allouable aux différents éléments qui composent un site comme le JavaScript, le CSS, etc.

## Exemple
Extension GreenIT Analysis : Disponible sur [Chrome](https://chrome.google.com/webstore/detail/greenit-analysis/mofbfhffeklkbebfclfaiifefjflcpad?hl=fr) et [Firefox](https://addons.mozilla.org/fr/firefox/addon/greenit-analysis/?utm_source=addons.mozilla.org&utm_medium=referral&utm_content=search), l'extension regroupe les fonctionnalités de [EcoIndex.fr](http://www.ecoindex.fr/) (empreinte et performance environnementale) et de [ecometer.org](http://ecometer.org/) (évaluation de bonnes pratiques).
1. Installer cette extension sur vos navigateurs de test, ils sont accessibles via les outils d'inspecteur de code.
2. Vider votre cache navigateur (afin de simuler une première visite) et cliquer sur "Lancer l'analyse".
L'extension va attribuer une note de A à G à votre page. De A jusqu'a C le résultat est honorable, de D à G votre site est perfectible. Tirer les conclusions de la note obtenue : le poids des images et leurs nécessités, est-ce que votre page à une vidéo, chargez-vous beaucoup de typographies ou de bibliothèques externes, avez-vous beaucoup d'extensions, avez-vous des animations, etc.
> ❗L'extension vous permet également d'enregistrer l'empreinte d'un [[parcours utilisateur]] complet. Pour ce faire cliquer sur "Sauver l'analyse" et effectuer le parcours de votre utilisateur (de la page catalogue jusqu'à la page validée votre commande par exemple).
Exemple s'il y en a
[Kastor](https://kastor.green/) : Site permettant d'évaluer son site selon le [GR491](https://gr491.isit-europe.org/).

## Principe de validation
**Alléger le poids et la complexité de ses pages est avant tout une question d'équilibre et de choix.**

| Le nombre ... | est inférieur ou égal à |
| ------------- | :---------------------: |
| de ... | 0 |
## Exemples

- Vous aimez les typographies, alors limitez les images sur votre site ou encore.
- Vous souhaitez proposer un média dynamique à vos utilisateurs, privilégiez le podcast à la vidéo.

## Source
**Nous vous invitions à vous référer régulièrement à ce référentiel WordPress.**

Source s'il y en a
## Principe de validation

| Le nombre | est inférieur ou égal à |
| ------------- | :---------------------: |
| de [[parcours utilisateur]] sur votre site non testé avec un outil d'écoconception | 0 |
| de [[parcours utilisateur]] sur votre site non évalué à l'aide du référentiel d'écoconception Wordpress | 0 |
7 changes: 7 additions & 0 deletions lexique/parcours utilisateur.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
title: Parcours utilisateur
path: /lexique/parcours-utilisateur
toIndex: true
---

Le parcours utilisateur est le parcours type que suivent des utilisateurs lorsqu'ils utilisent, ici, un site WordPress. Un site peut avoir plusieurs parcours utilisateur.

0 comments on commit db387e1

Please sign in to comment.