4 outils pour mesurer l'empreinte carbone de son site internet
10 sept. 2024
Eco-conception
Publié le 21 mai 2024 - 9 minutes de lecture
Une agence web qui change son site web, comment ça se passe ? Respecter les principes rigoureux de l’éco-conception, atteindre l’éco-index A sur toutes les pages, tout en pensant accessibilité et en faisant travailler toutes les équipes, de l’UX à l’UI, en passant par le développement web ou le webmarketing… Comment avons-nous métamorphosé notre site et notre identité graphique pour qu’ils soient tous deux aussi performants que durables ? Revenons sur ce projet ambitieux, entre ateliers, créations graphiques et choix technologiques, on vous embarque dans notre aventure de refonte des quinze ans de Lemon Interactive.
Au programme
Un site éco-conçu est développé suivant des principes visant à minimiser son empreinte écologique, tout en maintenant des standards élevés de performance et d'accessibilité. Plus clairement, cela signifie intégrer dès la phase de conception des pratiques et des technologies permettant de réduire la consommation de ressources énergétiques et matérielles, ainsi que les émissions de CO2 associées à l'utilisation du site.
L'éco-conception d'un site web repose sur cinq axes majeurs, aucun de ces principes ne doit être oublié :
Pour cette refonte réalisée en interne, nous avons mis en œuvre une approche éco-conçue en adoptant des technologies adaptées comme le framework Astro en front et Strapi en back. Les maquettes allégées, pensées pour prioriser le contenu essentiel, et les tests rigoureux d'Eco-Index et de performances ont été essentiels tout au long de la conception. Revenons plus en détails sur ces différents éléments techniques.
Après plusieurs refontes au fil des années et une nouvelle vision apportée à l’identité de Lemon Interactive, la “Performance Digitale Durable”, il était devenu nécessaire de réaliser une refonte adaptée à cette promesse. Début 2022, nous avons constaté que l’UX de l’ancien site peinait à offrir une expérience utilisateur fluide et rapide, impactant notre référencement naturel et notre taux de conversion. De plus, notre changement de design à venir, notre volonté d’éco-conception et la faible accessibilité étaient des barrières pour nos clients potentiels, nécessitant une mise à jour complète, réalisée entre 2023 et 2024.
Le premier travail commence avec notre équipe de design d’expérience, que ce soit sur la charte graphique, l’UX et l’UI du site de Lemon Interactive. Redéfinir l’ensemble de notre identité, en incluant le logo, les présentations, les documents ou les affiches, était devenu une nécessité.
Dans cet objectif, il a fallu travailler une palette de couleurs accessible, en accord avec les recommandations WCAG (Web Content Accessibility Guidelines) et RGAA (Référentiel général d'amélioration de l'accessibilité), et assez versatile pour nous permettre de limiter notre consommation d’encre sur nos supports imprimés.
L’univers photographique de Lemon a également été pensé pour alléger les pages du site , avec un traitement en noir et blanc des photos et un aspect pixellisé qui nous permet d’obtenir des visuels plus légers. Adieu les photos de banques d’images, sur notre nouveau site on veut du vrai, du Lemon !
En imaginant les premières maquettes du site web, deux éléments sont ressortis comme prioritaires : plus de légèreté et de hiérarchisation. Notre directrice artistique a donc réalisé de nombreuses versions de chaque page, en tenant compte des principes d’éco-conception et en constant dialogue avec les développeurs et l’équipe SEO.
Le choix des technologies est crucial pour la création d’un site éco-conçu. Il guide toutes les réalisations à venir, tout en étant nécessaire dans notre objectif d’atteinte de l’’éco-index A sur toutes les pages.
Nous avons opté pour une architecture Jamstack : initialement hésitants entre WordPress en headless ou Directus, nous avons finalement choisi Strapi pour notre backend. La roadmap de Strapi est prometteuse…
En front-end, après des tests comparatifs rigoureux sur le même prototype, nous étions partis initialement sur Nuxt pour le côté SPA (single page application) et le rendu client-first mais nous avons finalement opté pour Astro et sa gestion MPA (Multi page application) et le rendu server-first et pour ses meilleures performances en termes d’éco-index et d’accessibilité. Astro est aussi le pionnier de l’architecture frontend Islands, architecture que nous avons utilisé sur notre formulaire de contact conçu en VueJs. Nous n’avons pas poussé sur les “view transitions” mais c'est quelque chose dont nous regardons les impacts et les intérêts pour le futur.
Concernant la gestion des formulaires et la génération de leads, dans l’objectif de synchronisation de toutes les technologies et outils que nous utilisons, nous avons appliqué le mode hybride d’Astro pour qu'il gère ses pages en static. Nous appliquons le SSR pour certaines pages, l'intérêt de mettre une page en SSR est d'appliquer de la gestion côté serveur, comme la validation de formulaire et la sécurisation des datas pour ensuite l'envoyer au serveur back, qui lui va traiter cette data pour l'envoyer à nos outils de gestion.
Par ailleurs, notre utilisation de Typescript permet d'implémenter un typage fort sur du javascript. Cela a l'avantage de rajouter de la lisibilité et du cadre dans le code.
Avec cette refonte de site, nous devions développé un plugin spécifique pour Strapi, afin de gérer des champs particuliers nécessaires à nos composants.
En ce qui concerne le front et l’intégration, là où nous utilisons habituellement le framework Bootstrap que nous connaissons bien désormais et que nous maîtrisons pleinement, sur un projet de la sorte où on s'attendrait à voir un Tailwind pour sa gestion orienté composant, nous avons fait le choix de créer notre propre kit front afin de ne charger que ce dont nous avions besoin, de réduire les dépendances et encore plus notre impact environnemental. Un style global pour définir le skeleton ainsi qu’un découpage de styles par composants a été défini. Évitant au maximum de charger du style CSS la ou il n’a pas besoin d’être appelé. Un système de purge permet aussi de nettoyer le code à la compilation du code non utilisé.
Nous avons aussi utilisé des sprites pour certains svg ou images. Avec ce procédé nous avons pu limiter le nombre de requêtes aux assets dans nos pages. Astro permet également la gestion de picture qui nous a permis pour une seule image de disposer de multiples formats et tailles.
Grâce à cela, nos images ont des tailles différentes en fonction des breakpoints pour le côté responsive mais aussi des formats jpg/png pour la source originale mais propose également aux navigateurs récents des sources en webp et avif. Ces nouveaux formats sont cruciaux dans le travail sur l'éco-conception. Des tests fonctionnels continus avec Cypress assurent la qualité et la stabilité de notre site.
Lors d’une telle refonte de site, plusieurs arbitrages sont indispensables pour allier éco-conception et performance digitale. La première décision fut de restructurer notre charte graphique. Chaque aspect des maquettes a été minutieusement pensé pour respecter les principes d'éco-conception : contenu allégé, priorisation des éléments essentiels, étude des ratios graphiques pour garantir l’accessibilité.
Après plusieurs ateliers et discussions avec toutes les équipes impliquées, notre choix s’est orienté vers une architecture Jamstack avec Strapi et Astro. Ce ne sont pas des choix uniquement guidés par l’éco-conception : ils permettent aussi et surtout d’avoir de réels résultats de performance, que ce soit sur la rapidité des pages ou l’optimisation back-office.
Dans notre démarche, nous avons aussi eu la volonté de pousser la réutilisation de tous les éléments créés. Cela passe notamment par la création de blocs sous forme de composants réutilisables. Imaginer ce concept autour de la réutilisabilité à été aussi bien créé sur les maquettes UI que pour l’équipe de développeurs. Les exemples sont nombreux, avec le hero block des pages expertises qui est le même que celui utilisé sur les pages CMS, ou les blocs des “cartes expertises”, utilisés sur les avis par exemple.
Etant donné que nous possédons une partie blog avec plusieurs articles par semaine, la personnalisation était aussi importante sur les pages dédiées. Tout est accessible pour les rédacteurs directement dans le back-office du site, en utilisant des blocs existants tous adaptés à la nouvelle charte de l’agence.
En instaurant des tests fonctionnels rigoureux via Cypress, nous avons pu avoir un développement sur-mesure de chaque partie du site. Le tout, géré intégralement par toute l’équipe de développeurs de l’agence : chaque collaborateur a pu participer à la création du site, permettant une amélioration continue des compétences de tous les développeurs, front et back. Un moyen de préparer toutes les équipes aux futurs sites éco-conçus à créer !
Une refonte de site d’une telle envergure était pavée de défis à surmonter : l’éco-conception est un domaine qui doit continuer son développement, et la sortie de ce site performant et responsable montre que, oui, un site éco-conçu qui convertit, c’est possible ! En étudiant l’expérience utilisateur, tout en conservant l’essentiel avec une navigation fluide et intuitive, cela permet à chaque visiteur de trouver la bonne information.
L’agence a pris une direction engagée depuis plusieurs années, qui devait se ressentir dans son identité. Cela a donné lieu à la création d’un nouveau logo, mettant en avant notre promesse qui résume cet engagement environnemental lié à la performance des sites créés : “Performance Digitale Durable”. Chaque élément du logo correspond à un mot :
En examinant les bons usages sur les couleurs ou les polices utilisées, nous avons pu créer une charte qui est modelée pour une communication complète, avec une nouvelle identité web et physique, garantissant une accessibilité optimale et un design allégé avec le contenu essentiel.
Les résultats obtenus démontrent l’efficacité de la méthode utilisée : notre site affiche désormais la majorité de ses pages avec un éco-index A et un taux d'accessibilité élevé. Deux indicateurs clés qui doivent devenir indispensables pour toutes les créations et refontes de site web à venir.
La performance technique et le design allégé ont permis non seulement d'améliorer l'expérience utilisateur, mais également de maintenir une empreinte écologique limitée. Nous avons mis en place un maximum de mesures pour atteindre l’objectif principal d’une telle démarche : limiter notre impact environnemental sur le numérique.
Ainsi, la refonte du site Lemon Interactive prouve qu'il est possible de concilier éco-conception et performance digitale sans jamais sacrifier l'ergonomie ou l'esthétique. En faisant participer toute l’agence à la création du site et de cette nouvelle direction artistique, nous faisons avancer toute une équipe vers un nouvel objectif. Celui de poursuivre la production de prestations digitales au service de clients engagés !
Nous sommes fiers de montrer la voie vers un web plus responsable, et nous espérons que, grâce à ces projets, de nouveaux acteurs prendront ce train en marche d’un web plus durable : pourquoi pas vous ?
Un site éco-conçu dans les cartons ?