Le site Internet ALEC-Lyon.org reçoit en moyenne 300 visites par jour et permet d’informer ses visiteurs pour mettre en place des actions afin d’atténuer les effets du dérèglement climatique.
Nous sommes conscients que ce service numérique a un impact sur l’environnement et c’est pourquoi il était important pour nous de concevoir un site qui soit en phase avec les valeurs que nous défendons au quotidien. Lors de la refonte en 2022, nous avons ainsi suivi une démarche nous permettant d’atténuer l’empreinte environnementale de ce service d’information.
Mesure et réduction d’impact
Pour mener à bien ce travail d’éco-conception numérique avec l’agence web Ochelys, nous avons commencé par mesurer l’empreinte environnementale des visites actuelles, afin de se donner un objectif d’amélioration.
Nous avons utilisé pour cela l’outil GreenIT Analysis. Cet outil analyse le contenu d’une page afin de calculer un score d’empreinte environnementale. Si ce score n’est pas à prendre comme seul critère d’évaluation, il offre tout de même l’avantage de permettre des comparaisons et de suivre des améliorations.
Le tableau ci-après présente l’empreinte environnementale d’une visite sur la page d’accueil, sur la page Ecoréno’v (page la plus consultée), sur une page type d’actualité (les actualités représentent 21 % de notre trafic), ainsi que sur nos deux pages de ressources les plus consultées : la page concernant les réseaux de chaleur de la métropole et la page du calendrier des fruits et légumes de saison (respectivement 2,7% et 2,4% de notre trafic).
| Page | Score avant refonte | Score après refonte |
|---|---|---|
| Accueil | G (5,52 /100) | B (74,31 /100) |
| Ecoreno’v | F (15,94 /100) | C (57,97 /100) |
| Actualité type (Face à la hausse du prix des factures…) | F (18,56 /100) | B (74,83 /100) |
| Ressource très consultée (Fiche réseaux de chaleur de la métropole de Lyon) | F (20,76 /100) | B (74,83 /100) |
| Ressource très consultée (Calendrier des fruits et légumes de saison) | F (20,13 /100) | B (78,21 /100) |
L’outil GreenIT Analysis offre une traduction du score de l’EcoIndex en termes de consommation d’eau et d’émission de gaz à effet de serre. Ainsi, en prenant en compte 300 visites par jour, pour une moyenne de 1,9 pages par visite, nous pouvons ainsi estimer approximativement l’empreinte environnementale moyenne du site sur 12 mois avant sa refonte.
| Vues | Impact Eau | Impact CO2e | |
|---|---|---|---|
| Page d’accueil | 0,35 /visite | 4,33 cl | 2,89 g |
| Page de contenu type | 1,55 /visite | 4,00 cl | 2,50 g |
| Total par visite | 1,9 /visite | 7,72 cl | 4,89 g |
| Total par jour | 570 | 23,16 litres | 1,46 kg |
| Total par an | 208 050 | 8 453,4 litres | 535,46 kg |
Une nouvelle estimation de l’empreinte environnementale du site après sa refonte nous donne le résultat suivant :
| Vues | Impact Eau | Impact CO2e | |
|---|---|---|---|
| Page d’accueil | 0,35 /visite | 2,45 cl | 1,60 g |
| Page de contenu type | 1,55 /visite | 2,23 cl | 1,60 g |
| Total par visite | 1,9 /visite | 4,42 cl | 3,04 g |
| Total par jour | 570 | 13,26 litres | 912 g |
| Total par an | 208 050 | 4 840 litres | 333 kg |
À trafic équivalent, nous pouvons ainsi estimer que la refonte du site Internet nous a permis d’économiser 3 600 litres d’eau par an et de réduire les émissions de gaz à effet de serre de 203 kg équivalent-CO2 par an.
Ces optimisations amènent aussi des gains de performance, les pages s’affichent plus rapidement, ce qui améliore l’expérience utilisateur, surtout en cas de connexion faible, sur mobile par exemple. Le tableau suivant présente le “temps avant interaction” c’est-à-dire le temps que l’utilisateur doit attendre pour que la page soit complètement chargée et qu’il puisse interagir, avant et après la refonte.
| Page | Temps avant interaction avant refonte | Temps avant interaction après refonte |
|---|---|---|
| Accueil sur mobile | 40,2 sec | 2,1 sec |
| Actualité type sur mobile | 12,2 sec | 2,1 sec |
Pour parvenir à ces résultats, nous avons travaillé sur l’ensemble de la chaîne : la conception, la solution technique, la création et l’animation des contenus.
Conception fonctionnelle et design graphique
Lors des choix de conception nous avons adopté une philosophie de sobriété fonctionnelle et de sobriété du design graphique. Pour chaque fonctionnalité, nous avons pris en considération sa valeur ajoutée pour l’utilisateur et son impact environnemental.
Pour être très concrets, voici quelques exemples des choix parmi les plus impactants que nous avons faits en termes de conception :
- Une page d’accueil sans photographie et sans vidéo
- Un design graphique sans photo décorative, seulement des illustrations
- Une seule police de caractère spécifique avec 3 déclinaisons
- Pas de photos miniatures sur les listes d’actualités et d’événements
- Un trombinoscope interactif qui n’utilise qu’une image par personne
- Pas de carrousel de l’ensemble des logos des partenaires en pied de page
- Pas de fenêtre modale pour s’inscrire à la newsletter et les partages sociaux
- Pas d’inclusion des flux Facebook et Twitter en direct
- Pas d’inclusion d’une carte interactive pour présenter l’adresse
- Pas de calcul et d’affichage dynamique de l’EcoIndex de la page
Ce ne sont que des exemples bien sûr, de nombreux autres sujets ont été discutés tout au long de la conception. Une fois cette phase terminée, nos actions se poursuivent lors de la phase de réalisation technique.
Optimisation technique
La partie technique consiste en grande partie à optimiser les performances du site. Pour cela nous nous sommes basés sur le respect de bonnes pratiques telles que les pratiques opquast d’éco-conception.
Au-delà de ces bonnes pratiques génériques, nous avons également pris en compte les spécificités du CMS que nous utilisons : WordPress. L’enjeu est de disposer à la fois d’un outil facile à utiliser au quotidien, flexible dans le temps, et en même temps peu consommateur de ressources.
Chaque extension utilisée a ainsi été choisie en fonction de ses performances. De nombreuses fonctionnalités ont été développées de façon à être beaucoup plus légères que ce que les extensions génériques du marché proposent (Partage sociaux, page d’erreur 404, etc.).
Une fois le design et la technologie alignés, le site est prêt à accueillir les contenus qui doivent eux-aussi être optimisés.
Création de contenu
Il est important de noter que la création de contenu joue aussi un rôle majeur dans l’empreinte environnementale du site. Ils doivent être légers et optimisés. Voici des exemples de ce qui a été pris en compte au niveau des contenus :
- Compression et optimisation des images
- Découpe de certaines pages pour cibler des usages plus précis
- Suppression des photos purement décoratives
- Suppression de nombreuses pages et médias obsolètes
Ce travail sur les contenus est bien sûr un travail que nous continuerons à effectuer tout au long de l’année en animant le site Internet.
Conclusion
L’éco-conception du nouveau site Internet de l’ALEC Lyon a été une réflexion menée sur l’ensemble du service, qui a également impliqué certaines concessions. Cette démarche nous a permis de réduire fortement l’empreinte de ce service et nous chercherons à poursuivre ces efforts dans le temps.