En tant qu’entreprise soucieuse de l’environnement, nous avons choisi de collaborer avec l’agence WebSenso pour développer un site web éco-conçu. Cette démarche collective nous permet de concilier performance numérique et responsabilité écologique.
Nous avons donc développé un site qui répond à vos besoins tout en minimisant notre empreinte numérique.
EN BREF, COMMENT
AVONS-NOUS PROCÉDÉ ?
- Design épuré : nous avons supprimé tous les éléments superflus
- Contenus essentiels : chaque information a été soigneusement sélectionnée
- Ressources optimisée : images compressées, code allégé, etc.
L’ÉCO-CONCEPTION, C’EST QUOI ?
L’éco-conception web est une démarche visant à réduire l’impact environnemental d’un site internet tout au long de son cycle de vie. Elle consiste à concevoir des sites moins énergivores et plus respectueux de l’environnement, en optimisant les ressources, le code, et en privilégiant des hébergeurs verts. Cette approche permet non seulement de minimiser l’empreinte carbone, mais aussi d’améliorer les performances et l’expérience utilisateur.
Des indicateurs et référentiels clés
EcoIndex
EcoIndex est un outil gratuit d’évaluation de l’impact environnemental des sites web. Développé par l’association GreenIT et Nxtweb, il permet aux utilisateurs de mesurer la performance écologique de leurs pages web. EcoIndex analyse des critères tels que le poids de la page, sa complexité et le nombre de requêtes, puis attribue un score sur 100 et une note de A à G.
GTmetrix
GTmetrix est un outil d’analyse de performance web. Il évalue la vitesse de chargement et l’optimisation des sites internet en fournissant des métriques détaillées et des recommandations d’amélioration.
GTmetrix utilise divers indicateurs tels que le temps de chargement, la taille totale de la page et le nombre de requêtes. Il génère des rapports complets avec des scores de performance et propose des suggestions spécifiques pour optimiser le site. Bien que son focus principal soit la performance, GTmetrix contribue indirectement à l’éco-conception en encourageant des sites plus légers et efficaces.
Le référentiel « 115 bonnes pratiques d’éco-conception web » développée par le Collectif Green IT.
Ce guide complet offre une approche structurée pour concevoir et maintenir des sites web écologiquement responsables. Il couvre l’ensemble du cycle de vie d’un projet web, de la spécification à la fin de vie, en passant par la conception, la réalisation, la production et l’utilisation.
Les 115 bonnes pratiques sont organisées en six rubriques principales : Spécification, Conception, Réalisation, Production, Utilisation, Support / maintenance / fin de vie. Chaque pratique est présentée de manière concise, offrant des conseils pratiques pour réduire l’impact environnemental des sites web. Ces recommandations visent à optimiser les performances, réduire la consommation d’énergie et minimiser l’utilisation des ressources, tout en améliorant l’expérience utilisateur.
NOTRE SITE EN QUELQUES POINTS CLÉS
Niveau d’éco-conception du site edsb.fr
- Poids des pages : Significativement réduit
- Temps de chargement : Optimisé
- Émissions de CO2 : Minimisées
- Score éco-index :
- Page d'accueil : C
- Mentions légales : B
- Indicateurs GTmetrix :
- Page d'accueil : A (90%)
- Mentions légales : A (100%)
- Website Carbon Calculator :
- Page d'accueil : B (plus propre que 71% de toutes les pages web)
- Mentions légales : A+ (plus propre que 94% de toutes les pages web)
EDSB s’engage
dans la sobriété numérique
En lançant le projet de refonte de son site edsb.fr, notre entreprise s’est engagée dans une démarche d’éco-conception sérieuse et solide en sollicitant l’accompagnement de l’agence WebSenso qui s’appuie sur des référentiels et indicateurs fiables en matière d’éco-conception web. WebSenso détient aussi une expertise multiple de qualité dans ce domaine pour atteindre des objectifs précis : créer une présence en ligne légère, performante et respectueuse de l’environnement, accessible, en veillant à répondre aux besoins de nos utilisateurs.
Des choix rigoureusement sélectionnés
- Réduire le poids des pages web : chargement des images asynchrone, peu de fonts, pré-chargement des fonts…
- Limiter le nombre de requêtes au serveur autant que possible, sans pour autant renoncer à toute fonctionnalité
- Optimiser davantage les parcours usagers
- Revoir la façon de concevoir nos contenus
- Optimisation de nos pratiques techniques (agrégation, minification, images responsive,…)
Dès le départ du projet, une méthode de conception adaptée pour relever nos défis !
Le WebSen’SCORE : un outil d’évaluation collaboratif créé par WebSenso
Avec WebSenso, nous avons utilisé le WebSen’SCORE, un outil d’évaluation innovant qui nous a permis de :
- Évaluer notre impact : en partant d’un score initial de X/5, nous avons exploré ensemble les différentes options de conception possibles et recommandées.
- Prendre des décisions éclairées : grâce à un processus interactif, chaque choix a été discuté et a eu un impact direct sur notre score final : X/5
Cet outil a facilité notre dialogue et nous a aidés à comprendre les implications de nos décisions en matière d’éco-conception.
Méthodologie de conception centrée utilisateur avec l’UX Design
L’UX design joue un rôle crucial dans la réduction de l’impact environnemental des sites web à travers plusieurs approches clés : simplification et minimalisme, optimisation des performances, amélioration de la navigation, accessibilité, réduction de la pollution visuelle…
Les méthodes d’UX Design telles que les focus groups et le tri de cartes réalisés sur le projet de refonte d’edsb.fr, aident à optimiser les parcours utilisateurs et à structurer les contenus de manière efficace et intuitive. Ces ateliers visent à complèter les défis techniques d’éco-conception tout en maintenant une haute qualité d’expérience utilisateur.
Le design participatif impliquer les utilisateurs dans le processus de conception et permet de co-créer des solutions qui répondent plus précisément à leurs besoins. Cette approche limite le gaspillage de ressources en évitant le développement de fonctionnalités inutiles ou complexes qui alourdissent le site.
Cette méthode préconisée et animée par WebSenso participe activement à l’éco-conception. Elle nous ont aidées à mettre l’accent sur des pratiques centrées sur l’utilisateur pour optimiser les parcours et la conception des contenus.
Le développement
Mise en cache optimisée
Pour réduire les temps de chargement et la consommation de ressources, nous avons mis en place une mise en cache efficace. Les fichiers statiques (CSS, JS, images) sont stockés côté utilisateur pour éviter de les recharger à chaque visite.
Structure HTML allégée
Le code HTML a été épuré pour éviter tout élément inutile. Une structure simplifiée réduit la taille des pages et accélère leur interprétation par les navigateurs.
Chargement asynchrone des ressources
Les ressources non critiques, comme les images, vidéos et widgets, sont chargées en différé grâce à des techniques de lazy loading. Cela améliore les performances et réduit le temps de chargement initial.
Requêtes serveur optimisées
Les échanges avec le serveur ont été réduits en limitant les requêtes inutiles et en regroupant les données lorsque possible. L'utilisation de requêtes optimisées, combinée à la mise en cache des réponses, diminue le temps de réponse et améliore l'affichage des pages.
L'intégration
Optimisation des assets
Pour alléger le site, seules les polices nécessaires ont été intégrées, avec des formats optimisés comme WOFF2. Les ressources critiques utilisent le pré-chargement, et les icônes ont été regroupées en un sprite unique pour limiter les requêtes. Les images, compressées et converties, allient légèreté et qualité visuelle.
Moins de dépendances externes
Nous avons réduit l’usage de bibliothèques tierces comme jQuery, préférant des solutions natives et un CSS sur-mesure. Cela diminue le poids du site tout en offrant un contrôle total sur le code.
Un code standard et performant
Le code suit les standards actuels et les règles CSS Lint. Cela simplifie sa lecture, améliore les performances côté navigateur et garantit une meilleure pérennité.
Réduire l'impact environnemental
Nous avons limité les animations gourmandes, optimisé le DOM et activé une mise en cache efficace. Ces choix réduisent la consommation énergétique tout en améliorant l’expérience utilisateur.
Être partenaires dans une démarche éco-responsable est essentiel. L’expertise de WebSenso combinée à notre vision a permis de créer un site performant, durable et aligné sur nos valeurs.