diff --git a/best-practices-WordPress/fiches/04. Mesurer l'impact environnemental.md b/best-practices-WordPress/fiches/04. Mesurer l'impact environnemental.md index 78256e87..d2c5562a 100644 --- a/best-practices-WordPress/fiches/04. Mesurer l'impact environnemental.md +++ b/best-practices-WordPress/fiches/04. Mesurer l'impact environnemental.md @@ -1,18 +1,14 @@ --- title: 04. Mesurer l'impact environnemental people: Yann Gautreau -scope: \ +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: @@ -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 | diff --git a/lexique/parcours utilisateur.md b/lexique/parcours utilisateur.md new file mode 100644 index 00000000..60321e96 --- /dev/null +++ b/lexique/parcours utilisateur.md @@ -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.