L’écoconception numérique continue à se développer en France, notamment portée par le nouveau Référentiel général d’écoconception de services numériques (RGESN) développé au sein de l’État. Cette pratique consiste à se demander quoi faire pour réduire la charge environnementale (émissions de gaz à effet de serre, consommation d’énergie, d’eau, etc.) d’un site web et de son usage. Nous avons maintenant une certaine expérience du sujet puisque nous explorons à la fois en théorie et en pratique depuis 5 ans toutes ces questions.
De plus, nous avons vu de nombreuses déclarations d’écoconception apparaître avec de nombreuses variations (référentiels, indicateurs et mesures, méthodologie, etc.) :
- ille-et-vilaine.fr/declaration-ecoconception
- exposition-celtique.bzh/ecoconception
- grenoblealpesmetropole.fr/302-eco-conception.htm
- lafibre.info/forum/ecoconception/
- lesentreprises-sengagent.gouv.fr/eco-conception
- ademe.fr/une-logique-d-ecoconception/
L’idée était de trouver un format de déclaration d’écoconception numérique qui réponde de façon détaillée au RGESN tout en restant synthétique et pertinent.
La refonte de TeleCoop s’inscrit d’ailleurs dans la continuité de l’écoconception du site de Commown développée en collaboration avec Derek Salmon. Dans cette étude de cas, nous avons appliqué le Référentiel général d’écoconception de services numériques (RGESN) constitué de 8 grands axes :
Stratégie
Commençons donc par la stratégie. Contrairement à d’autres projets portés précédemment, le contenu et l’arborescence n’ont pas subi de modifications majeures. Certaines pages ont été enlevées ou déplacées mais la structure est restée à peu près la même. Cela est d’autant plus normal que l’activité et l’offre de TeleCoop n’ont pas été modifiées entre temps. La majorité du travail d’écoconception s’est donc portée sur le design et le développement du nouveau site web sous la houlette de Timothée Goguely.
Nous avons commencé notre démarche en nous fixant certains objectifs sur nos indicateurs techniques habituels : poids total de la page, nombre de requêtes et indicateurs de performances (FCP, LCP, Speed Index). À cela se rajoute aussi des objectifs de rétrocomptabilité basés sur le RGESN, visant à produire un site web qui fonctionne de manière optimale pour des terminaux âgés de 5 ans ou plus.
Nos objectifs pour ce site étaient de limiter le poids total moyen des pages à 750 Ko (500 Ko idéalement), le nombre maximum de requêtes à 30, un FCP inférieur à 1,5 seconde, un LCP inférieur à 2 secondes et un Speed Index inférieur à 1 seconde.
Nous avons décidé de ne pas prendre en compte les outils grand public d’estimation du poids environnemental de pages web (Ecoindex ou Website Carbon par exemple) car nous ne trouvons pas leur méthodologie satisfaisante. Les facteurs d’impacts environnementaux d’Ecoindex sont issus d’une ACV qui n’est pas ouverte, et le modèle de Website Carbon est basé sur une vision trop macroscopique pour fournir des estimations pertinentes à notre sens. Nous préférons directement travailler avec les indicateurs techniques eux-mêmes utilisés et agrégés par ces outils.
Crédit : Gauthier Roussilhe
Notre stratégie se résume finalement à répondre au cœur du RGESN : contribuer à l’allongement de la durée de vie des équipements et fournir une expérience optimale même dans les conditions d’usage les plus difficiles. Nous estimons qu’en visant ces objectifs nous permettons de réduire l’empreinte environnementale attenante à l’usage du site web sans que cela ait besoin d’une estimation chiffrée en éq. CO2 ou autres facteurs.
Au-delà du respect du RGESN, il s’agissait aussi pour nous de renforcer le cercle vertueux des bonnes pratiques du web : attention très forte à l’accessibilité, respect du RGPD (Matomo), une meilleure expérience pour les utilisateurs et l’augmentation générale de la qualité du site.
Spécifications
Cette partie du RGESN est moins pertinente pour un projet « simple » comme celui de TeleCoop, mais nous avons dû faire avec des services tiers particulièrement récalcitrant à une démarche d’écoconception : le service de gestion des cookies (Axeptio), Avis Vérifiés et Matomo (hébergé par Ethibox) représentent à eux seuls plus de la moitié du poids de la page d’accueil (uniquement en JS). Il n’était malheureusement pas possible d’enlever ses services tiers ou même d’influer concrètement sur les widgets et les options d’intégration qu’ils proposent.
Seule l’intégration du widget RocketChat a pu faire l’objet d’une d’intégration sur mesure consistant à ne charger et n’afficher le widget (et tous les assets qui vont avec) qu’au clic sur un bouton composé d’une simple icône SVG. Mise à jour : le widget Rocket a finalement été désactivé depuis.
Architecture
Le site de TeleCoop est géré via une seule solution, le CMS Kirby basé sur PHP. À ce titre nous ne faisons pas appel à des frameworks externes. Les différents protocoles techniques ont bien été intégré en fonction de leur évolution et de leur pertinence par rapport au contenu présent sur le site.
Nous avons fait en sorte que le blog soit rapatrié sous le même nom de domaine (avant : https://www.blog.telecoop.fr/ / après : https://telecoop.fr/blog). Le blog est ainsi géré par la même solution (Kirby) au lieu d’avoir deux solutions différentes.
UX/UI & Contenus
Au vu de nos indicateurs et de nos objectifs, le travail d’UX et d’UI mené a pris en compte les critères du RGESN là où ils sont applicables : le site est fait pour fonctionner à bas débit, les parcours ont été optimisés, les contenus lourds (images, vidéo) suivent une logique de sélection et d’optimisation assez poussée et décrite dans la déclaration d’écoconception.
Concrètement, toutes les images sont converties en WebP, avec des fallbacks prévus en JPG ou PNG pour les équipements plus anciens, et un chargement dit « paresseux » (lazy loading). La seule vidéo présente dans le site a été compressée à 480p et sans option de pré-chargement avant d’éviter tout chargement excédentaire de données.
Front & Back-end
Comme dit précédemment, Kirby est utilisé pour le site de TeleCoop. Ce CMS est basé sur PHP et ne gère pas de base de données. Au-delà des caractéristiques techniques, Kirby propose selon nous d’une des meilleures expériences de gestion de contenu pour ses utilisateurs.
Le site a été pensé en mobile-first et est fait pour s’adapter à toutes les tailles d’écran standards. Nous avons mis en place de nombreux mécanismes pour s’assurer d’un chargement optimisé des ressources et des contenus transférés comme expliqué dans la déclaration d’écoconception. De même, une mise en cache est activée pour éviter tout transfert superflu.
Hébergement
Le site est hébergé chez Scaleway. Il existe quelques hébergeurs français qui répondent aux critères du RGESN. Nous apprécions particulièrement et valorisons la transparence de Scaleway sur la consommation d’énergie et d’eau de ses installations, c’est pour cela que nous les avons choisi.
Résultats
Voici à titre d’exemple l’évolution des indicateurs avant et après refonte, sur une sélection de quelques pages. Les données de la colonnes « après » sont une moyenne des résultats sur mobile et desktop.
Page d’Accueil
| Avant | Après | Évolution | |
|---|---|---|---|
| FCP | 1.57s | 0.75s | ÷2.09 ↘︎ |
| LCP | 3.22s | 1.7s | ÷1.89 ↘︎ |
| Speed Index | 2.79s | 0.9s | ÷3.1 ↘︎ |
| Performances | 62/100 | 97/100 | +35 ↗︎ |
| Accessibilité | 81/100 | 96/100 | +15 ↗︎ |
| Bonnes pratiques | 100/100 | 100/100 | – |
| SEO | 89/100 | 100/100 | +11 ↗︎ |
| Poids total | 881 Ko | 721 Ko | ÷1.22 ↘︎ |
À propos
| Avant | Après | Évolution | |
|---|---|---|---|
| FCP | 1.73s | 0.75s | ÷2.3 ↘︎ |
| LCP | 2.11s | 1.7s | ÷1.24 ↘︎ |
| Speed Index | 3.01s | 0.9s | ÷3.34 ↘︎ |
| Performances | 62/100 | 97/100 | +35 ↗︎ |
| Accessibilité | 72/100 | 96/100 | +24 ↗︎ |
| Bonnes pratiques | 100/100 | 100/100 | – |
| SEO | 89/100 | 100/100 | ÷11 ↗︎ |
| Poids total | 873 Ko | 650 Ko | ÷1.34 ↘︎ |
Blog
| Avant | Après | Évolution | |
|---|---|---|---|
| FCP | 1.73s | 0.75s | ÷2.3 ↘︎ |
| LCP | 2.11s | 1.45s | ÷3 ↘︎ |
| Speed Index | 3.01s | 0.75s | ÷4 ↘ |
| Performances | 89/100 | 99/100 | +10 ↗︎ |
| Accessibilité | 96/100 | 100/100 | +4 ↗︎ |
| Bonnes pratiques | 100/100 | 100/100 | – |
| SEO | 93/100 | 100/100 | +7 ↗︎ |
| Poids total | 1310 Ko | 905 Ko | ÷1.44 ↘︎ |
Article
| Avant | Après | Évolution | |
|---|---|---|---|
| FCP | 1.7s | 0.7s | ÷2.4 ↘︎ |
| LCP | 1.85s | 1.3s | ÷1.4 ↘︎ |
| Speed Index | 1.7s | 0.7s | ÷2.4 ↘︎ |
| Performances | 99/100 | 100/100 | +1 ↗︎ |
| Accessibilité | 96/100 | 100/100 | +4 ↗︎ |
| Bonnes pratiques | 100/100 | 100/100 | – |
| SEO | 100/100 | 100/100 | – |
| Poids total | 229 Ko | 569 Ko | ×2.5↗︎ |
Moyenne
| Avant | Après | Évolution | |
|---|---|---|---|
| FCP | 1.68s | 0.74s | ÷2.3 ↘︎ |
| LCP | 2.32s | 1.54s | ÷1.5 ↘︎ |
| Speed Index | 2.63s | 0.81s | ÷3.2 ↘︎ |
| Performances | 78/100 | 98/100 | +20 ↗︎ |
| Accessibilité | 86/100 | 98/100 | +12 ↗︎ |
| Bonnes pratiques | 93/100 | 100/100 | +7 ↗︎ |
| SEO | 100/100 | 100/100 | – |
| Poids total | 823 Ko | 711 Ko | ÷1.2 ↘︎ |
En se basant sur la moyenne des résultats obtenus pour chaque indicateur à partir de ce panel de 4 pages, on peut constater que nos différents objectifs ont tous été atteints.
Si vous souhaitez en savoir plus sur notre démarche d’écoconception, nous vous invitons à consulter notre Déclaration d’écoconception.
