Écoconception

Le développement durable est inscrit au cœur des projets d'établissement du Musée de Bretagne et des Champs Libres, et tout particulièrement l'écoconception des projets.

Les orientations retenues pour les années à venir visent à l'exemplarité progressive des projets web en termes d'accessibilité, de sobriété et d'ouverture des ressources (culturelles et techniques). Le site web CELTIQUE ? cherche donc à respecter le plus haut niveau possible d'engagement pour un numérique écoresponsable et accessible, le tout dans un souci d'équilibre avec les enjeux de valorisation et diffusion des contenus culturels produits et présentés dans le cadre de l'exposition (images de collections, media...).

Ce site a été réalisé en suivant une démarche d’écoconception par Nicolas Doby de IT’s on us (développement), Anne Faubry et Aurélie Baton (Indépendantes UX/UI design), et Hélène Maître-Marchois de Fairness (opérationnalisation).

Principes d’écoconception

L’écoconception consiste à « [intégrer systématiquement] des aspects environnementaux dès la conception et le développement de produits (biens et services, systèmes) avec pour objectif la réduction des impacts environnementaux négatifs tout au long de leur cycle de vie à service rendu équivalent ou supérieur » (Norme NF X 30-264 Management environnemental – Aide à la mise en place d’une démarche d’éco-conception, 2013). Il s'agit de se rapprocher des besoins fondamentaux des utilisateurs et de s’y limiter.

La démarche d’écoconception nécessite la mobilisation de bonnes pratiques à chaque étape de la conception du site : de la conception du parcours utilisateur à son développement.

Se concentrer sur l'objectif utilisateur

Pour évaluer les impacts environnementaux dans le temps, nous avons défini une unité fonctionnelle de référence, c'est-à-dire une fonction principale du service qui correspond à un objectif principal d'un utilateur-ice.

Trois unités fonctionnelles ont été identifiées avec le Musée de Bretagne et priorisées de la façon suivante :

1. Approfondir un point précis sur le celtisme en Bretagne
2. Flâner parmi les contenus et découvrir de nouvelles choses
3. Se renseigner sur le sujet du celtisme en Bretagne

NB : L’unité fonctionnelle prioritaire doit être précisée pour l’étape de mesure d’impact du parcours utilisateur.

Le site répond à cette unité fonctionnelle prioritaire. Voici ci-dessous une liste de bonnes pratiques appliquées dans le cadre du développement de ce site.

Fluidifier l'expérience utilisateur

Une attention très particulière a été portée sur la fluidité de l’expérience utilisateur qui constitue l’un des fondamentaux de l’écoconception.

• Le nombre de photos et vidéos a été réduit afin de se limiter aux plus pertinentes.
• Les étapes du parcours de découverte de l’exposition sont balisées par un « chemin de fer » en haut de chaque page de contenu.
• L’utilisateur·rice peut facilement suivre le parcours avec les boutons Page précédente et Page suivante en bas de page.
• Cette découverte « linéaire » de l’exposition n’est pas l’unique façon de naviguer, et les profils d’utilisateurs plus « flâneurs » peuvent également découvrir les contenus de façon transverse, en passant d’une ressource à une autre selon les centres d’intérêt.
• L’architecture du site a également été simplifiée en comparaison de la structure de l’exposition physique afin de proposer un menu simple avec points d’entrée directs vers les 2 grands chapitres.
• Une attention particulière a été portée à la hiérarchie des titres sur la page et à leur cohérence de style à travers le site.

Agir pour un site sobre

Éliminer le superflu

Nous avons évalué et vérifié les besoins tout au long du projet, ce qui a permis de retirer certaines fonctionnalités initialement prévues.

Par exemple, nous avions prévu une barre de progression pour les questions du test. Or, les tests utilisateurs nous ont montré qu’au vu du faible nombre de questions (réduit à 9 questions), il n’était pas nécessaire de rassurer les utilisateurs sur leur avancement.

Nous nous sommes interrogés sur la valeur ajoutée d’afficher toutes les images de l’exposition. Initialement, certaines pages devaient comporter jusqu'à 12 images. Après avoir essayé différentes options de chargement progressif, il a finalement été décidé qu’aucune page n’aurait plus que 10 images et d’ajouter des descriptions longues afin de les contextualiser.

Du point de vue de la résolution des images, nous avons priorisé les utilisateurs cibles du site et identifié qu’ils n’ont pas besoin de la haute définition par défaut. Ainsi les images haute résolution ne sont disponibles qu’au clic et non affichées par défaut (voir plus à ce sujet ci-dessous).

Réduire le poids des images

Les images et les photos sont le cœur de l’exposition. Le défi était donc d’intégrer ces images sans alourdir le poids des pages, mais tout en conservant une qualité satisfaisante.

Les images jpeg et png ont été chargées en 2 tailles sur le serveur, une pour mobile et l’autre pour Desktop. Ainsi selon la taille d’écran du terminal utilisateur, l’image la plus optimale est chargée.

Images et photos

La taille des images a été réduite à des tailles moyennes (généralement 600 px maximum) afin d’être à côté du texte descriptif et de réduire le poids de la page.

Pour les images et photos de l’exposition, nous avons décidé d’optimiser les images de chaque page tout en gardant une qualité suffisante. Nous avons par ailleurs fourni un lien « Voir en résolution maximum » afin que les utilisateurs puissent observer les détails des images.

Cependant même en résolution maximum, il ne servait à rien d’insérer directement les photos d’origine. En effet, les images fournies avaient un poids initial avoisinant généralement les 4 à 5 Mo mais pouvant s’élever à plus de 20 Mo pour une seule photo.

Les images ont donc été optimisées de la manière suivante :

1. L'image est retaillée à une taille maximum de 1900 px pour la version haute définition.
2. L’image est retaillée à la taille d’affichage de l’image sur l’écran (entre 200 px pour les plus petites et 1400 px pour les plus grandes).
3. L’image est compressée (le niveau de compression est choisi en fonction de la qualité minimum nécessaire) avec Shortpixel.

Les gains de poids par image sont très conséquents et peuvent aller jusqu’à un gain de plus 80%. La plupart des images ont ainsi un poids final avoisinant 40 à 100 Ko en résolution par défaut, et 1 Mo en haute définition.

Illustrations vectorielles

Les illustrations ont été choisies avec soin pour satisfaire des questions d’esthétisme et de sens : un triskell par grande partie du parcours, bandeau pour identifier la page d’accueil, vague en arrière-plan pour symboliser un changement de partie...

Lorsque cela était possible, nous avons fourni les illustrations en format SVG pour alléger tout en conservant une qualité optimale. En revanche, dans certains cas, si la complexité de l’image rendait un SVG trop lourd, nous avons privilégié la version PNG plus légère.

Nous avons également compressé les illustrations SVG lorsque cela était possible ; c'est-à-dire retirer les méta-informations non essentielles.

Icônes

Les icônes choisies sont sans complexité et fournies au format SVG ou PNG. Lorsqu’un équivalent sous forme de glyphe était disponible, par exemple dans le cas des flèches, le glyphe a été privilégié.

Réduire le poids des vidéos

La pertinence des vidéos et audios présentes sur le site a été évaluée. Puisqu'elles apportent de la valeur en lien avec l’unité fonctionnelle du site, elles ont été intégrées mais en nombre limité.

Intégration dans la page

Nous avons mené des tests techniques pour évaluer la meilleure solution d’intégration des vidéos et des pistes audios.

Lorsque cela était possible, nous avons choisi d’intégrer la vidéo et les sons avec le lecteur par défaut HTML5. Quoique plus restrictif sur l’apparence du lecteur, les tests ont montré qu’il est plus de 50 fois plus léger qu’un lecteur Youtube.

C’est pourquoi, notre choix s’est porté sur le lecteur HTML5, très bien supporté par les différents navigateurs.

La lecture automatique des vidéos a été désactivée afin de ne charger le flux vidéo que si la lecture est lancée.

Lorsque la vidéo faisait partie d’un service externe, nous avons privilégié une image et un lien vers la vidéo afin de ne pas inciter les utilisateurs à charger une vidéo qu’ils ne sont pas réellement intéressés de voir.

Le poids des vidéos et des sons est toujours indiqué en Mo à côté du lecteur, afin que l’utilisateur sache combien de données sont transférées lors de son chargement.

Compression

Toutes les vidéos et pistes audio ont également été compressées.

Les vidéos ont été redimensionnées de 1080p vers du 720p et optimisées avec le logiciel Handbrake (Réduire le poids des vidéos + icône sortant). Le poids des vidéos a ainsi en moyenne été divisé par 13. Par exemple, la vidéo « Un monde celte aux portes de l’Europe » est ainsi passée d’un poids de 185 Mo à 14 Mo.

Dans certains cas, une autre compression additionnelle a été effectuée, lorsqu’il n’y avait pas de perte de qualité avérée, avec CompresserVideo.

Informer les utilisateurs du poids des PDF

Le site propose certains contenus téléchargeables tels que des PDF de programmation ou de ressources pédagogiques. Le format du fichier et son poids sont toujours indiqués sur le bouton d’action afin que l’utilisateur·rice sache combien de Mo il/elle télécharge en cliquant.

Choisir une police standard

Pour des raisons d’écoconception, nous avons choisi de nous limiter à une police système. Ainsi aucune police personnalisée n’est téléchargée par les utilisateurs lors de l’affichage du site, ce qui évite d’alourdir la page et limite le nombre de requêtes.

Nous avons fait le choix d’utiliser la police Arial pour plusieurs raisons :

• Arial est disponible sur quasiment la totalité des appareils peu importe leur système d’exploitation.
• Arial est plus accessible que des typographies serif.
• Arial existe en plusieurs graisses.

Pour conserver la typographie spécifique du titre de l’exposition « Celtique ? », nous avons décidé d’utiliser une image SVG, afin de ne pas charger inutilement une police qui n’aurait servi que pour le titre.

Éviter les animations

Le site contient très peu d’animations, elles servent à fluidifier l’expérience de manière subtile : apparition du sous-menu au survol, réduction du menu lors du scroll sur la page.

Les animations sont uniquement en CSS et ne nécessitent que très peu de JavaScript (seulement pour masquer le menu lorsque l’utilisateur·rice scrolle).

Penser mobile first

Le site est responsive et a été pensé et conçu pour fonctionner sur mobile, aussi bien que sur ordinateur. Concevoir pour mobile dès l’étape de wireframing a notamment permis d’éviter d’intégrer du superflu et de faire des pages trop longues, comme c’est souvent le cas lorsque l’on conçoit uniquement pour ordinateur.

Concevoir techniquement un site sobre

Le site est un complément numérique de l’exposition physique. Hormis quelques corrections, le site a vocation à rester constant dans le temps. Il est donc tout indiqué d’avoir des pages statiques.

Comme l’explique LOW←TECH MAGAZINE et pour la même raison :

« Un des choix fondamentaux que nous avons faits a été d’élaborer un site internet statique. La majorité des sites actuels utilisent des langages de programmation côté serveur qui génèrent la page désirée à la volée par requête à une base de données. Ça veut dire qu’à chaque fois que quelqu’un visite une page web, elle est générée sur demande.

Au contraire, un site statique est généré une fois pour toutes et existe comme un simple ensemble de documents sur le disque dur du serveur. Il est toujours là, et pas seulement quand quelqu’un visite la page. Les sites internet statiques sont donc basés sur le stockage de fichiers quand les sites dynamiques dépendent de calculs récurrents. En conséquence, un site statique nécessite moins de puissance de calcul, donc moins d’énergie. »

Pour parvenir à nos fins, nous avons décidé d’utiliser le générateur de site statique 11ty et le kit de démarrage Elf. Le kit contient :

• Eleventy
• EJS comme langage de templating
• Sass pour simplifier l’écriture de CSS
• Babel pour rendre compatible JavaScript avec les différents navigateur
• Autoprefixer pour préfixer les ressources CSS
• Webpack pour compiler les ressources Sass et JavaScript
• ESLint et Airbnb's base configuration comme linter

Une fois le projet compilé, les pages HTML, le CSS et le JavaScript sont générés une fois pour toute. Le serveur Web peut donc servir ces ressources simplement sans aucun effort. La configuration du serveur permet d’optimiser le tout en :

• compressant les requêtes,
• configurant le cache dans les entêtes des requêtes,
• utilisant HTTP2.

Résultats et mesures

Performance globale

Le site “Celtique ?” comporte 19 pages. Les données suivantes écartent les pages “Plan du site”, “Accessibilité”, “Écoconception” et “Mentions légales” afin de ne pas biaiser positivement les résultats par des pages de contenu exclusivement textuel, par essence très légères.

Les mesures ci-dessous ont été effectuées sous Firefox le 27/07/2022 via le plugin GreenIT Analysis. Le cache a été vidé entre chaque mesure de page.

Sur les 15 pages de contenu du site, nous obtenons les résultats suivants :

• Note moyenne Ecoindex : B (74/100, sachant que A commence à 75/100). Toutes les pages sont A ou B avec des notes oscillant entre 66 et 80 sur 100.
• Nombre de requêtes moyen par page : 15 (entre 8 et 24 requêtes selon les pages). GreenIT recommande de rester en deça de 27 requêtes par page. Le nombre de requêtes moyen d’une page web en 2022 est de 76 d’après HTTP Archive.
• Poids moyen des pages : 658 Ko (entre 238 Ko pour la page “Test” et 1,2 Mo pour la page “Celt’Attitude”). GreenIT recommande de rester en deça de 1 Mo par page. Seule la page “Celt’attitude”, comportant 9 images de taille moyenne et une vidéo incrustée sur la page, excède cet objectif. Toutes les autres pages font moins de 900 Ko. Le poids moyen d’une page web en 2022 est de 2,3 Mo d’après HTTP Archive.
• Taille moyenne de DOM : 310 (entre 187 et 454). GreenIT recommande une taille de DOM par page en dessous de 600.

Par ailleurs, d’après les outils de développement Firefox, la page d’accueil du site charge en :

• 3,5 secondes avec une bonne connexion 2G
• 2,5 secondes avec une connexion 3G moyenne
• 0,6 seconde avec une connexion 4G moyenne
• 0,5 seconde avec une connexion ADSL

On peut conclure que le site “Celtique ?” est globalement très léger et performant malgré des pages contenant généralement plus de 8 images jpeg de différentes tailles, ainsi que d’autres médias incrustés dans la page (1/3 des pages avec des vidéos et 1/4 avec des audios).

Ces mesures donnent un premier aperçu de la performance du site, mais en écoconception, l’important est de mesurer la performance d’un parcours en lien à l’unité fonctionnelle définie.

Mesure de parcours

Les mesures ont été effectuées sur les parcours correspondant aux deux unités fonctionnelles prioritaires du site telles que définies conjointement avec le Musée de Bretagne :

1. Flâner parmi les contenus (lecture transverse) : arriver sur le site, faire le test et lire les contenus recommandés avant de se consulter les informations pratiques pour se rendre à l’exposition
2. Approfondir un point précis sur le celtisme en Bretagne (lecture linéaire) : lire 4 pages de contenu et télécharger une photo en HD, puis se rendre sur Aller plus loin avant d’aller voir d’autres ressources

Ces unités fonctionnelles correspondent à des cas d’usage différents en lien avec des personas qui avaient été pré-identifiés.

Parcours 1 : Flâner parmi les contenus (lecture transverse)

Ce parcours concerne le cas d’une personne intéressée par l’exposition et qui arrive sur le site “Celtique ?” depuis le site du Musée de Bretagne.

Son parcours sur le site est le suivant :

1. Arrivée sur la page d’accueil et clic sur “Faire le test”
2. Réalisation du test
3. Consultation de son résultat (ici Profil 2)
4. Lecture des deux pages recommandées (ici “Armorique celtique” et “Le Breton, langue celtique ?”) avec retour au résultat entre chaque
5. Consultation des Informations pratiques

Les mesures effectuées via GreenIT Analysis sous Firefox le 27/07/2022 donnent les impacts environnementaux suivants pour l’ensemble du parcours :

• 10,23 gCO2e
• 15,35 cl d’eau

Ces mesures sont des estimations et ne représentent pas une vision exacte de la réalité (Sous le capot de la mesure Ecoindex - OCTO Talks).

Parcours 2 : Approfondir un point précis (lecture linéaire)

Ce parcours concerne le cas d’une personne intéressée par le sujet du celtisme (historien, passionné, enseignant…) arrivant sur une page de contenu du site par référencement naturel.

Son parcours sur le site est le suivant :

1. Arrivée sur la page “Mythes fondateurs” qu’il lit entièrement avant de passer à la page suivante
2. Lecture des 3 pages suivantes dans leur intégralité
3. Ouverture en haute définition et téléchargement de la photo Bagad sur la page “Celt’attitude”
4. Clic sur “Aller plus loin” dans le menu et sortie vers Bécédia

Les mesures effectuées via GreenIT Analysis sous Firefox le 27/07/2022 vers 13h15 donnent les impacts environnementaux suivants pour l’ensemble du parcours :

• 9,2 gCO2e
• 13,8 cl d’eau

Ces mesures sont des estimations et ne représentent pas une vision exacte de la réalité (Sous le capot de la mesure Ecoindex - OCTO Talks).

L’écoconception est une démarche d’amélioration continue et nous sommes conscients que ce site présente encore des points d’amélioration.