En tant que Centre de Compétences Numérique Responsable Vaudois porté par le Swiss Institute for Sustainable IT (ISIT-CH), IT4Future a souhaité montrer l'exemple en réalisant un portail web répondant à des critères élevés d'éco-conception et d'accessibilité. Après un appel d'offre, ce projet a été remporté en août 2024 par Liip. Cette page a pour vocation d’expliquer avec transparence comment l'éco-conception et l'accessibilité ont été abordées tout au long du projet.
Méthodologie de travail: sustainability-by-design
L’éco-conception dans un site web est un mélange de choix techniques et visuels faisant appel à de l’efficacité et à de la sobriété: cette combinaison vise à obtenir un résultat optimisé d’un point de vue du socle technologique, mais aussi sur le pan de l’expérience utilisateur par l’optimisation des contenus et de l’architecture du site, notamment. Alors qu’internet est presque 10 fois plus rapide qu’il y a 10 ans, le poids moyen d’une page web en mobile à lui aussi été multiplié par 10 dans le même lapse de temps. On pourrait émettre l’hypothèse que l'augmentation de nos vitesses de connexion a permis aux designers et développeurs d’être moins attentifs à certains critères d’optimisation qui sont aujourd’hui réapparus sous la bannière de l’éco-conception. L'accessibilité, quant à elle, implique de s’assurer qu’un site web peut être utilisé par le plus grand nombre, en particulier les personnes en situation de handicap. Dans le cadre de ce projet, l'accessibilité est comprise dans la notion d'éco-conception.
Chaque partie prenante et phase d’un projet est concernée par l’éco-conception. Pour IT4Future, l’impératif a donc été dès le début de mettre le sujet sur la table et de le considérer dans les prises de décision, en l'intégrant dans le cahier des charges dès l'appel d'offre. Cette démarche est une évolution d’une vision user-centric vers une vision planet-centric. Pour vulgariser très simplement, il s’agit d’ajouter la question de l’impact environnemental à l’équation de la viabilité, désirabilité et faisabilité.
Évaluer la durabilité d’un site web
Afin de rendre légitime nos efforts et assurer un certain niveau de qualité, il a été impératif de définir des critères de réussite liés à cette démarche. Sur la base des guidelines de durabilité web du W3C, nous avons utilisé une plateforme d’audit d’éco-conception web (outil interne Liip). Cette plateforme permet d’évaluer le potentiel de durabilité d’un site de manière beaucoup plus précise qu’un calculateur en ligne comme Ecograder.
Bien entendu, Ecograder est un très bon outil, mais il se concentre principalement sur l’usage de bande passante traduite en émission de gaz à effet de serre, et des optimisations techniques. Cet outil, comme beaucoup d'autres “calculateurs carbone” en ligne, n'ont pas la subjectivité d’un être humain, crucial pour évaluer des critères liés à la sobriété. Cela se traduit, par exemple, avec l’optimisation des parcours utilisateurs, mais aussi des choix dans le design d’interface et la rédaction de contenus.
La plateforme de Liip contient une centaine de critères répartis sur les différentes phases d’un projet. Les parties prenantes ont été confrontées dès l’émission du cahier des charges, afin d’anticiper les critères qui pourraient être bloquants et d’avoir une vision sur les éléments à inclure dans leur processus de travail.
À la fin du projet, avec les mêmes critères, un audit est réalisé afin de listés ce qui a pu être fait ou pas. Le résultat inclut aussi des tests avec Lighthouse, Ecograder et GreenIT Analysis afin de croiser les approches.
Et plus concrètement, quelles bonnes pratiques ont été mises en place sur le site d’IT4Future ?
La liste présentée ci-dessous n’est pas exhaustive.
Gestion des images
Les images sont compressées et adaptées à l’écran de l’utilisateur. Nous utilisons des formats d’images modernes (.webp) et avons accordé une attention particulière à l’effet de dithering qui réduit drastiquement le poids d’une image en plus d’être un élément marquant dans le branding. L’usage du lazyloading nous permet de réduire l’usage de bande passante au strict nécessaire et d’améliorer les performances du site.
Sélection d’un hébergeur Suisse et engagé dans la transition écologique
Le site est hébergé chez Infomaniak dont les engagements, les mesures établies pour réduire leur empreinte environnementale et la transparence nous ont convaincus.
Mise en cache
Afin de limiter l’usage de la bande passante, tous les assets sont mis en cache sur le navigateur de l'utilisateur. Ceci permet de grandement réduire les temps de chargement pour les utilisateurs récurrents.
Site statique, ou presque
Le site internet est basé sur le CMS Drupal. Il permet, entre autre, une gestion dynamique de la contribution des pages, ainsi que de proposer un portail utilisateur à nos membres.
Pour réduire la charge seveur, les pages servies aux utilisateurs anonymes navigant sur le site sont entièrement mises en cache en base de donnée et en fichiers statiques pour réduire au maximum les reconstructions inutiles de ces dernières.
Ce système permet non seulement un gain d'énergie mais aussi une réduction des temps de chargement pour les utilisateurs, rendant la navigation beaucoup plus fluide.
Polices de caractères
Nous avons favoriser l’usage d’une font open-source en WOFF2 à laquelle nous avons retiré les caractères pas nécessaires à la rédaction de texte en français, moyennant une taille de fichier réduite.
Vidéos et parties tierces
Une partie tierce est un service externe qui demande souvent beaucoup d’énergie et de bande passante. Nous avons fait en sorte de limiter l’usage de ces dernières. Pour donner un exemple: il est bien possible d’ajouter une vidéo Youtube sur le site, mais ces dernières ne sont finalement vues que par une portion des utilisateurs. Afin d'éviter le ralentissement d’une page occasionnée par le pré-chargement d’une vidéo Youtube (et des nombreuses dépendances qui viennent avec), cette dernière est chargée sur demande par l’utilisateur en cliquant sur une vignette sur-mesure, beaucoup plus légère et donc rapide à afficher.
Et en plus, si le site devait charger une vidéo Youtube, cette dernière passerait par youtube-nocookie.com un service de Youtube pour partager des vidéos, sans cookies et avec une protection des données plus avancée.
Analytics
Nous avons choisi Plausible comme système pour les analytics. Dans la réflexion de simplifier la mise en place et de limiter les coûts, nous avons préféré l'hébergement en cloud chez Plausible plutôt que l'auto-hébergement. Les données collectées sont réduites au stricte minimum, ce qui permet aussi de se passer de la fameuse “cookie banner”.
Accessibilité
L’accessibilité est un critère majeur dans l’éco-conception, notamment au niveau social. Le site a été développé et testé dans le but de respecter les critères AA du WCAG.
Sensibilisation et transparence
Nous avons fait de notre mieux pour que ce site soit éco-conçu tout en trouvant un équilibre avec les facteurs économiques et temporels du projet. Comme mentionné en-tête, nous considérons que ce site est éco-conçu. Cette page nous permet de communiquer avec transparence les efforts fournis et les points d’amélioration et de sensibiliser nos utilisateurs les plus curieux.
Choix de design et consistance
Le design du site est relativement simple tout en mettant en avant des éléments de la marque IT4Future pour le rendre unique et distinguable. L’envie de limiter la multiplication de modules et de leur variation nous a mené à réaliser une interface non seulement sobre et cohérente, mais aussi à simplifier sa mise en place lors des phases de développement.
Budget de page et formation à la création de contenu pour le web
La contribution au contenu d’un administrateur côté client peut desservir l’éco-conception. Ceci est lié à l’autonomie qu’offre un CMS pour assembler de nouvelles pages ou mettre à jour du contenu. Le plus simple pour y parer sans créer d’usine à gaz technologique fut de former les contributeurs de contenu à la création de contenu pour le web et de mettre un place un budget de page. Un budget de page vise à limiter l’usage de bande passante, l’objectif étant de limiter surtout l’usage d’asset. Nous l’avons fixé à en dessous d’un mégabyte, ce qui correspond à environ 40% du poids médian d’une page web en 2024.