Déclaration environnementale de ce site web
Mes valeurs
Etant attachée à la préservation de l’environnement et impliquée professionnellement dans cet engagement, il me paraît juste de l’appliquer jusqu’à mon site web.
J’ai donc choisi d’opter pour un site éco-conçu. Pour ce faire, j’ai collaboré avec Milena, spécialiste en éco-conception. En plus d’avoir de nombreuses valeurs en commun, elle a su m’accompagner tout au long de cette démarche et des arbitrages à effectuer.
Je parle bien d’arbitrages car il m’a fallu faire coïncider autant que possible :
- Mon souhait d’avoir un site le plus responsable possible,
- Le besoin de mettre en valeur mes références pour la pérennisation de mon activité.
Mission accomplie puisque je dispose d’un score B.

Je vous partage les arbitrages que j’ai dû faire pour bénéficier d’un score B, et les raisons pour lesquelles je n’atteins pas le A.
Les choix suivants alourdissent mon site :
- Ajout de photos.
J’ai mis quelques photos de mes interventions, sur ma page d’accueil, dans chacune de mes pages Services (Sensibiliser, Mesurer, Agir, Valoriser) et sur la rubrique « Me connaître). Le blog contient également des illustrations. J’ai également mis en valeur 3 retours clients avec photos sur la page d’accueil.
Je serai votre interlocutrice dédiée et suis à la tête de ma propre entreprise. Il me paraît important d’illustrer mes actions pour vous aider à vous projeter dans une possible collaboration.
- Présence de logos
Pour valoriser mes références et les mettre en valeur, j’ai fait ajouter les logos des entreprises et collectivités publiques avec lesquelles j’ai travaillé. Cela contribue à alourdir le site mais :
- Milena a trouvé une astuce pour réduire le poids associé,
- Les preuves de mon expérience sont importantes pour la pérennisation de mon activité.
J’ai toutefois optimisé de la façon suivante :
- Absence de vidéo
Mon site ne compte aucune vidéo, cela contribue à l’alléger et à diminuer le nombre de requêtes associées.
- Limitation du nombre de photos
A l’exception du blog, mon site contient 9 photos. Pour plus de 18 pages si l’on prend en considération les différents types de références et de conférences. Beaucoup de photos ont été remplacées par des illustrations, elles-mêmes éco-conçues. Ces dernières ont été créées par Lucie Colin, qui a refondu l’ensemble de mon identité visuelle. Nous partageons également de nombreuses valeurs avec Lucie.
- Absence de « slider »
Les « sliders » sont ces présentations que vous pouvez faire défiler à l’aide de votre curseur. Je souhaitais en intégrer pour mes logos ainsi que 2 messages-clés en tête du site. Milena m’a expliqué qu’il serait très compliqué de disposer d’un score A ou B avec un tel élément. J’ai donc fait le choix de ne pas l’intégrer. A mon sens, un slider est moins important pour ma vitrine et la pérennisation de mon activité que les photos et autres modes d’affichage des références.
- Absence de menu déroulant pour la section « Services »
Il s’agit de mon plus gros arbitrage. Afin de favoriser la navigation entre les différents services que je propose, je souhaitais un bandeau déroulant sous la section « Services » avec le nom et le lien vers chacun d’entre eux : Sensibiliser, Mesurer, Agir, Valoriser.
Milena a testé les deux et l’installation du bandeau déroulant a un impact assez pénalisant sur l’Ecoindex. Nous avons donc opté pour :
- Une barre d’en-tête fixe
- Le détail de mes services en bas de page.
Si cela rend la navigation trop difficile, je n’exclus pas de revenir au bandeau déroulant.
- Police de caractère
Lucie Colin m’a proposé deux superbes police pour mes présentations et rapports. Malheureusement, elles ne font pas partie des polices standard. Lucie a donc proposé d’adapter la police du corps de texte avec une police système sur la version web pour limiter le poids de la page et les requêtes : helvetica.
- Constructeur de page
Là encore, Milena a été top. Elle a audité Elementor qui était le constructeur de page initialement prévu, ainsi que Spectra, une surcouche très légère qui propose quelques fonctionnalités supplémentaires à l’éditeur d’origine de WordPress : Gutenberg. Au moment du test sur la page d’accueil, il y avait 4 points de différences sur l’EcoIndex, en faveur de Spectra.
Sur le site https://www.wpcrafter.com, une comparaison du poids des différents modules est également disponible : Specta (15 MB), Elementor (25 MB) et Divi (50 MB).
J’ai donc suivi les conseils de Milena et opté pour Spectra, qui est en plus très simple d’utilisation.
- Une seule image pour les logos
Là encore, petit arbitrage requis. Afin d’alléger la page, Lucie et Milena ont regroupé tous les logos de mes références sur une seule image. Ceci sur la page d’accueil comme sur la page Services : les logos apparaissent en bandeau. Sur mon ancien site, chaque logo renvoyait au site de mon client. Mais ce fonctionnement implique une requête par image + une requête par lien. Soit 14 requêtes pour ma page d’accueil au lieu d’une actuellement pour cette partie.
Ces arbitrages vous donnent un petit aperçu du travail réalisé derrière pour atteindre un score de B. J’ai dû mettre mon côté perfectionniste et mon souhait d’atteindre un score A de côté et faire preuve de pragmatisme. Je reste très satisfaite de ce travail et enchantée de ma collaboration avec Milena et Lucie sur ce sujet.
Il va sans dire que je n’oublie absolument pas que le gros de l’impact réside dans la fabrication des équipements, notamment en ce qui concerne les terminaux utilisateurs. La réalisation de mon site en écoconception est donc la dernière étape après la réduction de mon nombre d’équipements, leur conservation et l’achat d’une partie de mon matériel en reconditionné.
J’ai également profité de la refonte de mon site pour migrer vers Infomaniak. J’aime beaucoup leur politique environnentale, leur pragmatisme et leur pédagogie, c’était donc l’occasion. Je vous invite à lire leur article « Découvrez pourquoi nous polluons ».
Vous trouverez ci-dessous la déclaration environnementale de mon site.
Niveau d’écoconception du site web
- Note Ecoindex : 76/100
- Consommation d’eau moyenne rapportée à 1 000 utilisateurs* :
- 22,18 litres
Soit 2,4 packs d’eau minérale.
- Émission de Gaz à Effet de Serre (GES) moyenne rapportée à 1 000 utilisateurs* :
- 1,48 kilos CO2e
Soit un trajet de 7 kms en voiture à énergie thermique.
*Moyenne de l’impact environnemental des 5 pages les plus visitées ce site web.
Méthode d’évaluation
Comme toute production numérique, ce site web a un impact environnemental que je vous présente sur cette page à l’aide d’indicateurs standardisés.
J’utilise le plug-in GreenIT Analysis, similaire au référentiel EcoIndex proposé par le collectif GreenIT.fr, pour évaluer la performance environnementale de mon site web. Celui-ci est quantifié grâce à deux types d’indicateurs :
- Niveau d’écoconception du site web.
Cet indicateur évalue la mise en place de bonnes pratiques permettant de réduire l’impact d’une page web. Le niveau atteint est représenté par une évaluation relative de A à G (A est la meilleure note) associée à un score absolu de 0 à 100 (100 est la meilleure note).
- Consommation d’eau et émissions de gaz à effet de serre (GES) liées au chargement de la page.
Cet indicateur quantifie la consommation d’eau douce (cls) et l’émission de GES (gCO2e) liées au chargement d’une page web.
À des fins de synthèse, quatre types de données sont représentées :
- Niveau d’écoconception pour les 5 pages les plus visitées du site web
- Niveau d’écoconception pour 5 parcours utilisateurs type du site web
- Consommation d’eau (exprimée en litres) et émissions de GES (kilos CO2e) liées au chargement d’une page web pour 1 utilisateur, et rapportée à 1 000 utilisateurs.
- Consommation d’eau (exprimée en litres) et émissions de GES (kilos CO2e) liées à l’exécution d’un parcours pour 1 utilisateur, et rapportée à 1 000 utilisateurs.
L’analyse indiquée a été effectuée le 3 juin 2024 elle est susceptible d’évoluer : la quantification des impacts environnementaux présentée ci-dessous est une photographie réalisée à un instant T.
Evaluation de l’impact des 5 pages les plus visitées du site
Page 1 : Accueil
- Consommation d’eau rapportée à 1 000 utilisateurs :
- 21,6 litres
Soit 2 packs d’eau minérale.
- Émissions de GES rapportées à 1 000 utilisateurs :
- 1,44 kilos CO2e (kg CO2e)
Soit un trajet de 7 kms en voiture à énergie thermique.
Page 2 : Services
- Consommation d’eau rapportée à 1 000 utilisateurs :
- 21,1 litres
Soit 2 packs d’eau minérale.
- Émissions de GES rapportées à 1 000 utilisateurs :
- 1,41 kg CO2e
Soit un trajet de 7 kms en voiture à énergie thermique.
Page 3 : Références
- Consommation d’eau rapportée à 1 000 utilisateurs :
- 23 litres
Soit 3 packs d’eau minérale.
- Émissions de GES rapportée à 1 000 utilisateurs :
- 1,53 kg CO2e
Soit un trajet de 7 kms en voiture à énergie thermique.
Page 4 : Conférences
- Consommation d’eau rapportée à 1 000 utilisateurs :
- 23,1 litres
Soit 3 packs d’eau minérale.
- Émissions de GES rapportée à 1 000 utilisateurs :
- 1,54 kg CO2e
Soit un trajet de 7 kms en voiture à énergie thermique.
Page 5 : Me connaître
- Consommation d’eau rapportée à 1 000 utilisateurs :
- 22,1 litres
Soit 2 packs d’eau minérale.
- Émissions de GES rapportée à 1 000 utilisateurs :
- 1,48 kg CO2e
Soit un trajet de 7 kms en voiture à énergie thermique.
Evaluation de l’impact pour 5 parcours utilisateurs sur le site
Parcours 1 : Découverte de mes services
- Objectif du parcours : Prendre connaissance de l’ensemble des services que je propose.
- Parcours cible : Arrivée sur le site et consultation des 4 services : sensibiliser, mesurer, agir, valoriser.
Parcours 1 | Page d’accueil | Sensibiliser | Mesurer | Agir | Valoriser |
EcoIndex | 73,04/100 (note : B) | 74,47/100 (note : B) | 74,14/100 (note : B) | 70,37/100 (note : B) | 74,16/100 (note : B) |
Eau (cl) | 2,31 | 2,27 | 2,28 | 2,39 | 2,28 |
GES (gCO2eq) | 1,54 | 1,51 | 1,52 | 1,59 | 1,52 |
Nombre de requêtes | 30 | 26 | 26 | 27 | 28 |
Taille de la page (Ko) | 363 | 241 | 247 | 250 | 254 |
Taille du DOM | 436 | 434 | 441 | 527 | 431 |
- Consommation d’eau rapportée à 1 000 utilisateurs :
- 115,3 litres
Soit 13 packs d’eau minérale.
- Émission de GES rapportée à 1 000 utilisateurs :
- 7,68 kg CO2e
Soit un trajet de 36 kms en voiture à énergie thermique.
Parcours 2 : Consultation des références
- Objectif du parcours : Découvrir les références du secteur public
- Parcours cible : Arrivée sur la page d’accueil et consultation des références «Gouvernement et entités territoriales »
Parcours 2 | Page d’accueil | Références « Gouvernement et entités territoriales » |
EcoIndex | 73,04/100 (note : B) | 70,74/100 (note : B) |
Eau (cl) | 2,31 | 2,38 |
GES (gCO2eq) | 1,54 | 1,59 |
Nombre de requêtes | 30 | 22 |
Taille de la page (Ko) | 363 | 221 |
Taille du DOM | 436 | 543 |
- Consommation d’eau rapportée à 1 000 utilisateurs :
- 46,9 litres
Soit 5 packs d’eau minérale.
- Émission de GES rapportée à 1 000 utilisateurs :
- 3,13 kg CO2e
Soit un trajet de 14 kms en voiture à énergie thermique.
Parcours 3 : Consultation des actualités et du blog
- Objectif du parcours : Découvrir les articles de la sélection
- Parcours cible : Chargement de la page d’accueil, clic sur la section « Blog » puis sur « Ma sélection », affichage de l’article sur le numérique responsable à destination des entreprises.
Parcours 3 | Page d’accueil | Blog | Ma sélection | Atelier NR entreprises |
EcoIndex | 73,04/100 (note : B) | 65,34/100 (note : C) | 77,09/100 (note : B) | 75,11/100 (note : B) |
Eau (cl) | 2,31 | 2,54 | 2,19 | 2,25 |
GES (gCO2eq) | 1,54 | 1,69 | 1,46 | 1,5 |
Nombre de requêtes | 30 | 30 | 21 | 20 |
Taille de la page (Ko) | 363 | 886 | 269 | 232 |
Taille du DOM | 436 | 555 | 389 | 444 |
- Consommation d’eau rapportée à 1 000 utilisateurs :
- 92,9 litres
Soit 10 packs d’eau minérale.
- Émission de GES rapportée à 1 000 utilisateurs :
- 6,19 kg CO2e
Soit un trajet de 29 kms en voiture à énergie thermique.
Parcours 4 : Découverte des conférences « Adaptation au cotexte environnemental » de la page des services.
- Objectif du parcours : S’informer sur les interventions « Adaptation au contexte environnemental » à partir de la page Services.
- Parcours cible :Chargement de la page Services, clic sur la section « Conférences » puis sur « Adaptation au contexte environnemental ».
Parcours 4 | Services | Conférences | Adaptation au contexte environnemental |
EcoIndex | 76,93/100 (note : B) | 70,61/100 (note : B) | 70,61/100 (note : B) |
Eau (cl) | 2,19 | 2,38 | 2,38 |
GES (gCO2eq) | 1,46 | 1,59 | 1,59 |
Nombre de requêtes | 25 | 21 | 21 |
Taille de la page (Ko) | 226 | 204 | 204 |
Taille du DOM | 382 | 553 | 553 |
- Consommation d’eau rapportée à 1 000 utilisateurs :
- 69,5 litres
Soit 8 packs d’eau minérale.
- Émission de GES rapportée à 1 000 utilisateurs :
- 4,64 kg CO2e
Soit un trajet de 21 kms en voiture à énergie thermique.
Parcours 5 : Prise de contact
- Objectif du parcours : Me contacter pour évoquer la possibilité d’une collaboration, à partir de la page Services
- Parcours cible : Chargement de la page Services, clic sur le bouton « Me contacter » en bas de page, affichage de la page « Contact ».
Parcours 5 | Services | Contact |
EcoIndex | 76,93/100 (note : B) | 77,55/100 (note : B) |
Eau (cl) | 2,19 | 2,17 |
GES (gCO2eq) | 1,46 | 1,45 |
Nombre de requêtes | 25 | 21 |
Taille de la page (Ko) | 226 | 289 |
Taille du DOM | 382 | 376 |
- Consommation d’eau rapportée à 1 000 utilisateurs :
- 43,6 litres
Soit 5 packs d’eau minérale.
- Émission de GES rapportée à 1 000 utilisateurs :
- 2,91 kg CO2e
Soit un trajet de 13 kms en voiture à énergie thermique.
L’écoconception
L’écoconception s’appuie sur une méthodologie et un ensemble de bonnes pratiques pour réduire l’impact de ce site web sur son environnement. Concrètement, il va s’agir de limiter les ressources techniques nécessaires à l’affichage d’une page ou à l’exécution d’une fonctionnalité, tout en étant au plus proche du besoin de l’utilisateur.
Vous êtes un professionnel du numérique et vous souhaitez réduire l’impact environnemental de vos sites ? Voici quelques bonnes pratiques à mettre en œuvre, issues notamment des 115 bonnes pratiques de Green.IT :
Quelques bonnes pratiques en matière d’ergonomie et de design
- Limiter le nombre de fonctionnalités dès la conception
- Supprimer les fonctionnalités non utilisées
- Limiter le nombre de carrousels
- Choisir des typographies standards ou au poids réduit
- Favoriser les designs simples et épurés
- Adopter quand cela est possible une approche « mobile-first »
- Préférer la pagination au défilement infini
- Éviter la lecture et le chargement automatique des vidéos et des sons
- Optimiser les parcours utilisateurs
- – …
Astuces sur la gestion des contenus
- Préférer les images aux vidéos
- Favoriser les formats vectoriels
- Limiter le nombre d’images sur chaque page
- Optimiser la taille des images au format cible
- Compresser les images via un outil de type TinyPNG
- Compresser les pdfs via un outil de type iLovePDF
- Limiter l’utilisation des GIFs animés
- Préférer les glyphs aux images
- …
Quelques bonnes pratiques en matière de développement
- Proposer un traitement asynchrone lorsque c’est possible
- N’utilisez que les portions indispensables des bibliothèques JS et CSS
- Mettre en cache les données calculées souvent utilisées
- Limiter le nombre d’appels aux API HTTP
- Réduire le volume de données stockées au strict nécessaire
- Utiliser la version la plus récente du langage
- Fournir une alternative textuelle aux contenus multimédias
- Découper les CSS
- Ne pas faire de modification du DOM lorsqu’on le traverse
- Utiliser le chargement paresseux (lazyload)
- Valider les pages auprès du W3C
- Ajouter des entêtes Expires ou Cache-Control
- Compresser les fichiers texte : CSS, JS, HTML et SVG
- Mettre en place un sitemap efficient
- …
Conseils en matière d’hébergement
- Choisir un hébergeur écoresponsable
- Installer le minimum requis sur le serveur
- S’appuyer sur les services managés
- Optimiser l’efficacité énergétique des serveurs
- Réduire au nécessaire les logs des serveurs
- Apache Vhost : désactiver le AllowOverride
- Utiliser des serveurs virtualisés
- Utiliser un serveur asynchrone
- Stocker les données dans le cloud
- …
Pour mettre en place votre déclaration environnementale :
Pour consulter la liste complète de bonnes pratiques de l’écoconception web :
–Accéder au dépôt GreenIt (GitHub)
Pour en savoir plus sur EcoIndex :