La démarche d’éco-conception du site de la Mission French Tech

Le site de la Mission French Tech a été imaginé et réalisé dans le cadre d'une démarche d'éco-conception afin d’améliorer son impact environnemental.

L’essentiel à retenir

Le numérique représente aujourd’hui 4% de l’empreinte carbone mondiale, et cette part devrait augmenter à plus de 10% d’ici 2030 selon les estimations du Shift Project. Dans le cadre de la refonte de son site, la Mission French Tech s’est engagée à réduire cet impact environnemental. Pour ce faire, elle a réalisé une première analyse de performance web environnementale (PWE) visant à évaluer cet impact, puis a entrepris des travaux de conception et de développement en veillant à trouver un équilibre entre les besoins des utilisateurs et la réduction de l’empreinte carbone.

Ce site web a été conçu de manière écologique dans le cadre d’une collaboration avec l’agence digitale de communication La Netscouade et Temesis, une agence de conseil spécialisée dans le numérique responsable, l’accessibilité et la conformité RGPD. L’approche d’éco-conception a été appliquée lors des phases de planification, de conception et de développement, en intégrant un ensemble de bonnes pratiques visant à minimiser l’impact environnemental du site.

Une analyse des performances web environnementales a été réalisée par Temesis sur un échantillon de 5 pages. Pour piloter au mieux l’amélioration du service, cette analyse, qui repose sur 79 critères techniques, est complétée par une mesure Panalyzer permettant d’identifier les ressources utilisées par chaque page à un instant T.

Une liste de points de contrôle a également été suivie pour garantir une évaluation complète de l’impact environnemental du site.

Quelques chiffres clés à prendre en compte :

  • Avant la refonte du site web, la note obtenue était de 33,33 sur 100.

  • Après la refonte, la note a significativement augmenté pour atteindre 62,7 sur 100.

Ces évaluations sont basées sur des critères applicables (hors critères incertains), et sont calculées à l’aide de l’outil de mesure Panalyzer. Panalyzer, développé par le pôle éco-conception de Temesis, offre une vision synthétique du trafic réseau d’une ou plusieurs pages web, avec des indicateurs d’impacts environnementaux. Concrètement, Panalyzer permet, à un moment donné, d’obtenir une image précise des ressources utilisées du côté client pour un parcours utilisateur spécifique.

L’éco-conception, selon la norme ISO 14006, est “une approche méthodique qui prend en considération les aspects environnementaux du processus de conception et développement dans le but de réduire les impacts environnementaux négatifs tout au long du cycle de vie d’un produit”.  Il s’agit donc de trouver des solutions qui répondent aux besoins des utilisateurs tout en améliorant l’impact environnemental, le tout, en restant économiquement viable.

Les constats avant la refonte du site web

Observations et résultats de l’évaluation

L’évaluation détaillée a été réalisée sur cinq pages spécifiques :

  • Page d’accueil

  • Page « A propos »

  • Page « Nous contacter »

  • Page sur l’aide aux start-up avec le Programme French Tech Next 40/120

  • Page d’erreur

Exemples de critères vérifiés

Au cours de cette évaluation, divers critères ont été examinés, tels que :

  • La durée de mise en cache,

  • Le respect des alignements dans les compositions en grilles,

  • Les définitions CSS au HTML limitées,

  • La construction CSS conforme aux spécifications du langage,

  • L’indication claire du poids des documents téléchargeables,

  • L’utilisation d’un format alternatif à ICO pour le favicon,

  • Le chargement différé des images pour intervenir au moment opportun,

  • La dégradation de la qualité des images sans porter préjudice à l’UX,

  • La pertinence du recours à l’autocomplétion dans les formulaires.

Points d’amélioration notés

Plusieurs améliorations nécessaires ont été identifiées, notamment dans les catégories suivantes :

Images :

  • Sélection maladroite des formats,

  • Dimensionnement souvent inadapté malgré un traitement côté serveur,

  • Compression légère à la mise en ligne / à la livraison par le CMS,

  • Chargement différé perfectible (lazy loading).

Vidéos :

  • Absence d’optimisations (chargement prématuré, compression insuffisante, dimensionnement unique).

HTML, CSS et JS :

  • Pas ou trop peu de concaténation permettant de limiter le nombre de requêtes,

  • Complexité du code HTML inutile avec perte d’efficience des sélecteurs CSS,

  • Activation par défaut de certains services tiers,

  • Déclarations CSS et JS inline échappant à la mise en cache,

  • Faible couverture globale CSS et JS.

Ces observations ont servi de base pour mettre en place des actions visant à optimiser les performances et l’impact environnemental du site.

La démarche d’amélioration mise en place

La refonte du site de la Mission French Tech s’est inscrite dans une démarche d’éco-conception, Design Système de l’Etat. Elle a été guidée à la fois par les résultats de la première mesure Panalyzer et l’analyse PWE ainsi que par les réponses à une série de questions clés.

Plusieurs questions ont été posées et traitées en gardant en tête les besoins initiaux des utilisateurs :

  • Quelles sont les cibles prioritaires ?
  • Quels sont les objectifs mesurables et prioritaires ?

Dans cette optique, la conception a été guidée par plusieurs principes :

  • Ne proposer que des fonctionnalités et des gabarits utiles et utilisables par des utilisateurs réels
  • Limiter autant que possible les médias (vidéos, images…)
  • Préférer les fonctionnalités natives / standards (champ de saisie, ect…)
  • Limiter le nombre de pages

Ce processus a été appliqué à l’ensemble des modèles de gabarits qui ont été conçus. A titre d’exemple, dans la page Le réseau de proximité, la carte interactive présente en premier lieu un affichage “liste” plutôt qu’un affichage “carte” dans la mesure où cette dernière est plus énergivore.

 

Durant cette phase, la démarche consiste en l’application des bonnes pratiques du Web en tenant compte des contraintes de conception fonctionnelles et éditoriales.

Un premier travail a été mené lors de la mise en place des différents composants issus du Design Système de l’état. Une deuxième phase de travail a été initiée lors des développements pour que les bonnes pratiques du Web associées à l’éco-conception soient respectées.

Voici les points sur lesquels un travail a été mené :

  • Construire un DOM HTML léger
  • Minifier les CSS et les JS
  • Compresser les ressources
  • Limiter le nombre de requêtes
  • Activer le lazy loading
  • Redimensionner les images
  • Optimiser les images

Les résultats après la refonte du site

Les résultats de l’analyse PWE du site une fois la refonte terminée

L’évaluation détaillée a été réalisée sur cinq pages spécifiques :

  • Page d’accueil

  • Page de présentation de la French Tech

  • Page « Nous contacter »

  • Programme French Tech Next 40/120

  • Page d’erreur

L’analyse PWE a conclu aux résultats suivants :

  • 37 Critères conformes (C),

  • 22 Critères non conformes (NC),

  • 19 Critères non applicable (NA),

  • 1 Critères incertains (NSP).

Pour continuer à réduire son impact environnemental, le site de la Mission French Tech sera améliorée tout au long de son cycle de vie.