Site d'entreprise à faible empreinte écologique

Contexte et objectifs

La refonte du site web a été motivée par l'envie d'améliorer son ergonomie et de compléter son contenu, tout en progressant dans ma démarche d'écoconception. Je souhaitais avoir un site à la fois plus sobre dans son design et plus ambitieux dans son contenu, avec l'ajout de pages supplémentaires.

Activités menées

J'ai réalisé le projet du maquettage à la programmation, grâce aux nombreuses ressources disponibles sur internet, aux conseils de mon entourage et aux professionnels ayant accepté de partager leurs connaissances.

Méthodologie et outils

Le site a été maquetté avec Inkscape puis codé en HTML, CSS et JS sur Visual Studio Code, sans utiliser de framework, ni de générateurs de sites statiques.

Pour orienter les choix de conception, j'ai tenté de respecter au maximum le Trinôme de conception à faible impact proposé par Gauthier Roussilhe dans l'article Faire un site low-tech ? :

• Choix d'un hébergement à faible impact et géographiquement proche : Datacampus, localisé au Futuroscope à coté de Poitiers et utilisant la technologie de refroidissement par immersion développée par Submer. Leurs performances environnementale compte parmis les meilleures au monde avec un PUE (Power Usage Effectiveness) inférieur à 1,03 et un WUE (Water Usage Effectiveness) de 0,00426746 L/kWh en 2023 (Source : Service Commercial Datacampus).
• Réduction des scripts : le site a été codé quasi-exclusivement en HTML et CSS. Le JavaScript se limite à la définition de constantes communes à plusieurs pages (disponibilités, coordonnées et version du site).
• Réduction des médias / du poids des médias : les images ont été redimensionnées à 588px de largeur, compressées par optimisation intelligente avec Optidash et formatées en WebP. A la version 2.2.9, le site totalise 30 images pour 495 ko, soit une moyenne de 16,5 ko par image. Il n'y a pas de vidéos.
• Réduction des services tiers de captation des données : au moment de la mise en ligne de ce site, aucun service d'analyse de trafic n'a été mis en place.
• Code propre : le code a été révisé en détail pour éviter les balises redondantes et structurer tout les éléments correctement. Il reste des optimisations à apporter au moment de la mise en ligne qui seront effectuées au fur et à mesure.
• Expérience de navigation simplifiée : ce dernier point n'a pas fait l'objet d'une attention particulière au moment de la mise en ligne car la navigation reste assez basique.

La démarche d'écoconception est communiqué au visiteur en pied de page avec une mention explicite 'Site web à faible empreinte écologique' et un lien vers la déclaration environnementale du site.

Résultats

Comparativement à la V1, le site a bénéficié d'amélioration sur tous les aspects : écoconception, accessibilité, contenu et qualité du code. Le tableau ci-dessous offre un aperçu des performances du site via quelques indicateurs.

Dans sa version 2.2.9 (mise à jour de février 2025), le site totalise 86 éléments pour seulement 1,5 Mo, permettant d'économiser les ressources serveur.

En tant qu'indépendant, je dois être visible sur le web pour trouver de nouveaux clients et éviter les périodes de creux. Un site bien conçu m'évite pour cela de dépendre entièrement de plateformes tierces.

Avoir réalisé ce projet moi-même de A à Z me permet d'être autonome dans la maintenance, l'amélioration continue et la modification de ce site. En outre, ce fut une excellente occasion d'apprendre !